/* The HD look (loaded after css/game.css by the game's page, and switched off there for 經典 by js/look.js; everything
   in it is under html.hd). Since 2026-10-14 in a cozy island life-sim
   look, after the screenshots the owner gave (「HD版的畫風全面改為動物森友會」): cream panels with soft rounded
   corners and soft shadows, brown words in a rounded face, a sunny yellow for the one thing to press, leaf green for
   what is going well, coral for what is not. Nothing of that game's own interface is copied: its pieces are taken as
   a mood. Until then this file dressed the game in navy and gold. */
@font-face {
  font-family: "jf openhuninn";
  src: url("assets/fonts/huninn.woff2") format("woff2"); /* jf open 粉圓 2.1, SIL OFL 1.1: tools/hd-font.py keeps the characters the game writes */
  font-display: swap;
}
.hd {
  /* the palette (named for what it is) */
  --c-cream: #fff8e7;
  --c-paper: #fbefd2;
  --c-sand: #e6d3a6;
  --c-cocoa: #5e4428;
  --c-bark: #7c5f3c;
  --c-sun: #ffd24a;
  --c-sun-edge: #d99a14;
  --c-leaf: #3f9f5f;
  --c-coral: #e5604b;
  --c-sky: #5fb2df;
  --c-shadow: rgba(94, 68, 40, .28);
  /* what game.css calls its colours, turned for a light page: its "white" is the colour of words */
  --g-night: var(--c-cream);
  --g-white: var(--c-cocoa);
  --g-gray: var(--c-bark);
  --g-dim: #82654a;
  --g-gold: #9a5c00;
  --g-navy: #fff0c4;
  --g-green: #26773f;
  --g-blue: #2a7cb8;
  --g-red: #c0392b;
  --g-line: var(--c-sand);
  /* (2026-10-17, design check, DESIGN.md: the faint, gold, green and red words were 2.9 to 4.4 to 1 on cream; now 4.8 to
     5.2. The 12px grid in game.css is the bitmap font's; this face is drawn at any size, so the small words are larger) */
  --t-tiny: 14px;
  --t-body: 15px;
  --c-focus: #2368a0; /* (the keyboard's ring: sky blue was 2.2 to 1 on cream) */
  --hd-face: "jf openhuninn", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
.hd .game-root, .hd .game-root button, .hd .game-root input, .hd .game-root select { font-family: var(--hd-face); font-weight: normal; letter-spacing: .02em; }
.hd .game-root { -webkit-font-smoothing: antialiased; font-smooth: auto; }
.hd .red, .hd .hud-stat.warn b, .hd .r-desc.red, .hd .field-say { color: var(--g-red); }
/* nothing is stamped on in black any more */
.hd .hud-title, .hd .hud-money, .hd .hud-stat, .hd .hud-bar, .hd #hud.drive .hud-load, .hd .menu-item, .hd .screen h2, .hd .field-label, .hd .field-say, .hd .door-hint { text-shadow: none; }

/* ---- panels: cream cards with round corners and a soft shadow ---- */
.hd .game-panel { background: var(--c-cream); border: 2px solid var(--c-sand); border-radius: 18px; box-shadow: 0 6px 0 var(--c-sand), 0 12px 24px var(--c-shadow); }
.hd .toast, .hd .trophy, .hd .event, .hd .sponsor-strip, .hd #drive b, .hd .map-coach b, .hd .record, .hd .card, .hd .note {
  background: var(--c-cream); border: 2px solid var(--c-sand); border-radius: 16px; box-shadow: 0 4px 0 var(--c-sand), 0 8px 18px var(--c-shadow);
}
.hd .toast { border-radius: 22px; padding: 8px 16px; }
.hd .toast.gold { color: var(--g-gold); border-color: var(--c-sun); box-shadow: 0 4px 0 var(--c-sun-edge), 0 8px 18px var(--c-shadow); }
.hd .toast.bad { color: #fff; background: #c0412d; border-color: #f7a597; box-shadow: 0 4px 0 #8f2f20, 0 8px 18px var(--c-shadow); }
.hd .trophy { border-color: var(--c-sun); }
.hd .event { border-color: #9fd7a9; }
.hd .event.bad { border-color: #f2a294; }
.hd .veil { background: rgba(70, 52, 30, .38); }
.hd .sheet { border-radius: 22px 22px 0 0; }
.hd .sheet-body { border-top: 2px solid var(--c-sand); border-bottom: 2px solid var(--c-sand); }
.hd .mapwrap canvas, .hd .modal .card-img { border: 3px solid var(--c-sand); border-radius: 14px; }
/* the street seen through: what lies over it is cream, a little see-through */
.hd .hud-top { background: rgba(255, 248, 231, .95); border-bottom: 0; border-radius: 0 0 20px 20px; box-shadow: 0 4px 0 var(--c-sand), 0 8px 18px var(--c-shadow); }
.hd .quest { background: rgba(255, 248, 231, .95); border: 2px solid var(--c-sun); border-radius: 16px; box-shadow: 0 4px 0 var(--c-sun-edge), 0 8px 18px var(--c-shadow); }
/* a computer's or a tablet's corner card: rounded all round, in the sand line (where it stands and the room it gives
   the task under it: css/game.css, for both looks; 2026-10-15, 「平板與PC版的左上資訊卡，邊緣有黑色的邊匡很突兀」) */
@media (min-width: 640px) and (min-height: 560px) {
  .hd .hud-top { border: 2px solid var(--c-sand); border-radius: 20px; }
}
.hd .quest.done { border-color: #8fd09f; box-shadow: 0 4px 0 var(--c-leaf), 0 8px 18px var(--c-shadow); }
/* the task's number is a little tag, like a name over somebody's head */
.hd .quest .q-no { display: inline-block; background: var(--c-sun); color: var(--c-cocoa); border-radius: 999px; padding: 0 9px; margin-bottom: 2px; }
.hd .radar { border: 3px solid var(--c-cream); border-radius: 16px; overflow: hidden; background: #cfe9b6; box-shadow: 0 0 0 2px var(--c-sand), 0 8px 18px var(--c-shadow); }

/* ---- the money: the one bold thing on the road, a coin-yellow pill ---- */
.hd .hud-money { color: var(--c-cocoa); background: var(--c-sun); border-radius: 999px; padding: 4px 14px 3px; box-shadow: 0 3px 0 var(--c-sun-edge); }
.hd .hud-title { color: var(--g-gold); }
.hd .hud-co { color: var(--c-bark); }
.hd .hud-co.gold { color: var(--g-gold); } /* 土地公保佑 / 爐主 and the time left */
.hd .hud-co.red { color: var(--g-red); } /* 熱度 high enough for a checkpoint to hold the truck (build 36) */
.hd .hud-stat.full b { color: var(--g-gold); }
.hd .hud-stat.over b, .hd #hud.drive .hud-load.over b { color: var(--g-red); } /* 超載 (build 47) */
.hd .shot { background: #fffdf5; border: 2px solid var(--c-sand); border-radius: 14px; color: var(--c-cocoa); } /* 精彩瞬間 (build 48) */
.hd .shot img { border-radius: 10px; }
.hd .hud-bottom .game-btn[data-key]::after, .hd .tabs .go[data-key]::after { border-width: 1.5px; border-radius: 6px; padding: 1px 6px; } /* 空白鍵 key cap (build 51) */

/* ---- buttons: soft pills that sink when pressed ---- */
.hd .game-btn { color: var(--c-cocoa); background: #fffdf5; border: 2px solid var(--c-sand); border-radius: 999px; box-shadow: 0 4px 0 var(--c-sand); }
.hd .game-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--c-sand); }
.hd .game-btn:disabled:active { transform: none; box-shadow: 0 4px 0 var(--c-sand); }
.hd .game-btn--gold { background: var(--c-sun); border-color: #ffe48f; box-shadow: 0 4px 0 var(--c-sun-edge); }
.hd .game-btn--gold:active { box-shadow: 0 1px 0 var(--c-sun-edge); }
.hd .game-btn--red { color: #fff; background: var(--c-coral); border-color: #f4a091; box-shadow: 0 4px 0 #b93f2d; }
@keyframes hd-pulse { 0%, to { box-shadow: 0 4px 0 var(--c-sun-edge), 0 0 0 0 rgba(255, 210, 74, .7); } 50% { box-shadow: 0 4px 0 var(--c-sun-edge), 0 0 0 8px rgba(255, 210, 74, 0); } }
.hd .game-btn.pulse { animation-name: hd-pulse; }
.hd .hud-btn { border-radius: 50%; background: #fffdf5; border: 2px solid var(--c-sand); box-shadow: 0 3px 0 var(--c-sand); }
.hd .game-input { color: var(--c-cocoa); background: #fffdf5; border: 2px solid var(--c-sand); border-radius: 14px; }
.hd .game-input:focus { box-shadow: 0 0 0 3px var(--c-focus); }
.hd .modal .game-input { background: #fffdf5; color: var(--c-cocoa); border-color: var(--c-sun); }
/* (the list of rooms: its little arrow, and nothing else. .hd .game-input's `background` above resets repeat, size and
   place as well, and the arrow's two halves were tiled over the whole box: cocoa on cocoa, nothing to read; 2026-10-15) */
.hd .game-select, .hd .modal .game-select { background-color: #fffdf5; background-image: linear-gradient(45deg, transparent 50%, var(--c-cocoa) 50%), linear-gradient(135deg, var(--c-cocoa) 50%, transparent 50%);
  background-position: calc(100% - 22px) 55%, calc(100% - 14px) 55%; background-size: 8px 8px; background-repeat: no-repeat; }
.hd .game-btn:focus-visible, .hd .tab:focus-visible, .hd .diff:focus-visible, .hd .paint:focus-visible, .hd .radar:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }

/* ---- bars and pips: rounded grooves ---- */
.hd .bar, .hd .pbar { background: #eadcb8; border-radius: 999px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(94, 68, 40, .25); }
.hd .bar i, .hd .pbar i { background: linear-gradient(180deg, #ffe07a, #f5b623); border-radius: 999px; }
.hd .bar.hp i { background: linear-gradient(180deg, #8edc8e, #45ad5c); }
.hd .bar.low i { background: linear-gradient(180deg, #f6a08f, #e5604b); }
.hd .pips i { background: #eadcb8; border-radius: 3px; }
.hd .pips i.on { background: #f5b623; }

/* ---- the pieces inside a page ---- */
.hd .tab { color: var(--c-cocoa); background: #fffdf5; border: 2px solid var(--c-sand); border-radius: 14px; box-shadow: 0 3px 0 var(--c-sand); }
.hd .tab.on { background: var(--c-sun); border-color: #ffe48f; color: var(--c-cocoa); box-shadow: 0 3px 0 var(--c-sun-edge); }
.hd .tab .dot { border-radius: 50%; background: var(--c-coral); }
.hd .tab .dot.can { background: var(--c-leaf); }
.hd .tab.on .dot.can { background: var(--c-cocoa); }
.hd .diff, .hd .paint { color: var(--c-cocoa); background: #fffdf5; border: 2px solid var(--c-sand); border-radius: 16px; box-shadow: 0 3px 0 var(--c-sand); }
.hd .diff.on, .hd .paint.on { background: #fff3c6; border-color: var(--c-sun); box-shadow: 0 3px 0 var(--c-sun-edge), 0 0 0 3px rgba(255, 210, 74, .35); }
.hd .card .c-pic { border-radius: 12px; background: var(--c-paper); }
/* 收藏冊 (build 39): the stamps in a shop's red ink on the cream card; a ride's picture smooth */
.hd .stamp { border-color: #d2412b; color: #c0392b; background: rgba(210, 65, 43, .08); }
.hd .stamp small { color: var(--c-bark); }
.hd .stamp.off { border-color: var(--c-sand); color: #b8a37c; background: none; }
.hd .ride-row .ride-pic { image-rendering: auto; }
.hd img.shadow { filter: brightness(0) opacity(.28); }
/* 賭城 (build 40; build 41's tables): its painted hall behind the page (hd.js sets --hd-casino once the picture is in),
   the table Codex's felt inside a wooden rim, the chips and the cards Codex's pictures (--hd-chip0…, --hd-card-…) */
.hd .screen.casino { background-image: var(--hd-casino, var(--hd-cover, none)); background-color: #6a2a2a; background-size: cover; background-position: center; }
.hd .screen.casino .screen-in.cz { background: none; border-radius: 0; box-shadow: none; min-height: 0; margin-top: 0; margin-bottom: 0; }
.hd .screen.casino .cz-name { color: var(--c-cream); text-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.hd .screen.casino .cz-name::after { display: none; }
/* (the four games: a cream pill of a segmented control, the chosen part sun-yellow; a column of cards in a computer's sidebar) */
.hd .cz-games { border: 0; border-radius: 999px; padding: 3px; gap: 2px; background: rgba(255, 248, 231, .94); box-shadow: 0 3px 0 var(--c-sand); }
.hd .cz-game { min-height: 40px; border: 0; border-radius: 999px; background: transparent; color: var(--c-cocoa); box-shadow: none; font-weight: 700; }
.hd .cz-game + .cz-game { border-left: 0; }
.hd .cz-game[aria-selected="true"] { background: var(--c-sun); box-shadow: 0 2px 0 var(--c-sun-edge); }
@media (orientation: landscape) and (min-width: 1000px) and (min-height: 500px) {
  .hd .cz-games { padding: 0; gap: 10px; border-radius: 0; background: none; box-shadow: none; }
  .hd .cz-game { min-height: 100px; border: 2px solid var(--c-sand); border-radius: 20px; background: rgba(255, 248, 231, .94); box-shadow: 0 3px 0 var(--c-sand); }
  .hd .cz-game + .cz-game { border-left: 2px solid var(--c-sand); }
  .hd .cz-game[aria-selected="true"] { background: var(--c-sun); border-color: #ffe48f; box-shadow: 0 3px 0 var(--c-sun-edge); }
}
.hd .cz-ico { image-rendering: auto; }
.hd .cz-table { border: 0; border-radius: 28px; background-color: #2f7d55; background-image: var(--hd-felt, none); background-size: 256px 256px; box-shadow: inset 0 0 0 7px #8a5a32, inset 0 0 0 10px #ffd24a, inset 0 0 44px rgba(0, 0, 0, .32), 0 6px 0 #5e3a1c; }
.hd .sl, .hd .rl, .hd .bc, .hd .dg { inset: 14px; }
.hd .cz-win { color: var(--c-sun); font-weight: 800; text-shadow: 0 3px 0 #b06a00, 0 6px 16px rgba(0, 0, 0, .45); }
.hd .cz-win small { color: var(--c-cream); }
.hd .cz-side { background: rgba(255, 248, 231, .96); border: 0; border-radius: 22px; color: var(--c-cocoa); box-shadow: 0 5px 0 var(--c-sand); }
.hd .cz-h { color: #b06a00; font-weight: 700; }
.hd .cz-bar { background: rgba(255, 248, 231, .95); border: 0; border-radius: 22px; box-shadow: 0 5px 0 var(--c-sand); }
/* (what happened, over the table on a phone: a cream pill; in the bar elsewhere, plain) */
.hd .cz-toast { color: var(--c-cocoa); background: rgba(255, 248, 231, .97); border: 0; border-radius: 999px; box-shadow: 0 4px 0 var(--c-sand), 0 8px 22px rgba(0, 0, 0, .25); font-weight: 700; }
.hd .c-said.gold, .hd .cz-toast.gold { color: #b06a00; }
.hd .cz-toast.red { color: var(--g-red); }
.hd .cz-toast.gray { color: var(--c-bark); }
.hd .cz-info b { color: var(--c-cocoa); }
.hd .cz-cash .c-money { color: #b06a00; font-weight: 800; }
.hd .cz-delta { border-radius: 999px; background: rgba(255, 248, 231, .95); box-shadow: 0 2px 0 var(--c-sand); font-weight: 800; }
.hd .cz-delta.up { color: #b06a00; }
.hd .cz-delta.down, .hd .c-said.red { color: var(--g-red); }
.hd .cz-chip, .hd .cz-stack { border: 0; font-weight: 800; color: var(--c-cocoa); background-color: #f3e3c3; background-position: center; background-size: 100% 100%; background-repeat: no-repeat; box-shadow: 0 3px 0 rgba(94, 68, 40, .35); }
.hd .cz-chip.k0, .hd .cz-stack.k0 { background-image: var(--hd-chip0, none); }
.hd .cz-chip.k1, .hd .cz-stack.k1 { background-image: var(--hd-chip1, none); background-color: #5fb2df; color: var(--c-cream); }
.hd .cz-chip.k2, .hd .cz-stack.k2 { background-image: var(--hd-chip2, none); background-color: #8a2a35; color: var(--c-cream); }
.hd .cz-chip.k3, .hd .cz-stack.k3 { background-image: var(--hd-chip3, none); background-color: #3b3f4a; color: var(--c-sun); }
.hd .cz-chip[aria-checked="true"] { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--c-sun-edge); }
.hd .cz-chip:focus-visible, .hd .cz-game:focus-visible, .hd .rl-c:focus-visible, .hd .bc-spot:focus-visible { outline-color: var(--c-focus); }
.hd .cz-stack { width: 34px; min-width: 34px; height: 34px; padding: 0; border-radius: 50%; font-size: 11px; text-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.hd .cz-stack.k0 { text-shadow: none; }
.hd .pcard { border-radius: calc(var(--cw, 44px) * .1); background: #fffdf5 var(--hd-card-front, none) center / 100% 100% no-repeat; color: var(--c-cocoa); box-shadow: 0 3px 0 rgba(94, 68, 40, .35); }
.hd .pcard b { font-weight: 800; }
.hd .pcard.red { color: #d2412b; }
.hd .pcard.back { background: #8a2a35 var(--hd-card-back, none) center / 100% 100% no-repeat; }
.hd .pcard.slot { background: none; border: 2px dashed rgba(255, 248, 231, .6); box-shadow: none; }
.hd .pcard.gate { border-color: var(--c-sun); }
.hd .rl-c { border: 1px solid rgba(255, 248, 231, .7); border-radius: 6px; font-weight: 700; }
.hd .rl-c.pk-red, .hd .rl-c.out.pk-red, .hd .rl-b.pk-red, .hd .bd.banker { background: #d2412b; }
.hd .rl-c.pk-black, .hd .rl-c.out.pk-black, .hd .rl-b.pk-black { background: #3b2c22; }
.hd .rl-c.pk-green, .hd .rl-b.pk-green, .hd .bd.tie { background: #2f8a52; }
.hd .rl-c.out { background: rgba(15, 58, 34, .5); } /* (2026-10-17: white on the felt with a cream wash was 2.8 to 1; 6.3 now) */
.hd .rl-c.win { box-shadow: inset 0 0 0 3px var(--c-sun); }
.hd .rl-c.hit { background: var(--c-sun); color: var(--c-cocoa); }
.hd .rl-b { border: 0; border-radius: 8px; font-weight: 700; }
.hd .rl-b.now { box-shadow: 0 0 0 3px var(--c-sun); }
.hd .rl-none { color: rgba(255, 248, 231, .85); }
.hd .cz-side .rl-none { color: var(--c-bark); }
.hd .bc-hand { border: 2px solid rgba(255, 248, 231, .35); border-radius: 18px; }
.hd .bc-hand.won { border-color: var(--c-sun); box-shadow: 0 0 0 2px var(--c-sun); }
.hd .bc-label { font-weight: 800; }
.hd .bc-hand.player .bc-label { color: #b8e2ff; }
.hd .bc-hand.banker .bc-label { color: #ffc2b6; }
.hd .bc-pts { color: var(--c-cream); }
.hd .bc-banner { border: 0; border-radius: 999px; font-weight: 800; box-shadow: 0 4px 0 rgba(0, 0, 0, .3); }
.hd .bc-banner.player, .hd .bd.player { background: #2a7cb8; }
.hd .bc-banner.banker { background: #d2412b; }
.hd .bc-banner.tie { background: #2f8a52; }
.hd .bc-spot { border: 2px solid rgba(255, 248, 231, .6); border-radius: 18px; font-weight: 800; background: rgba(255, 248, 231, .1); }
.hd .bc-spot.player { border-color: #b8e2ff; background: rgba(42, 124, 184, .38); }
.hd .bc-spot.banker { border-color: #ffc2b6; background: rgba(210, 65, 43, .38); }
.hd .bc-spot.tie { border-color: #b8f0c8; }
.hd .bc-spot small { color: rgba(255, 248, 231, .85); }
.hd .bc-spot.win { box-shadow: inset 0 0 0 3px var(--c-sun); }
.hd .br.banker { border-color: #d2412b; }
.hd .br.player { border-color: #2a7cb8; }
.hd .dg-gap { color: var(--c-sun); font-weight: 800; text-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.hd .dg-e { border: 0; border-radius: 999px; background: rgba(255, 248, 231, .16); color: var(--c-cream); }
.hd .dg-e.in, .hd .dg-e.right { background: rgba(255, 210, 74, .9); color: var(--c-cocoa); }
.hd .dg-e.post, .hd .dg-e.three { background: rgba(229, 96, 75, .9); color: #fff; }
.hd .cz-side .dg-e { background: var(--c-paper); color: var(--c-cocoa); }
.hd .pt-f img { image-rendering: auto; }
.hd .card.locked { opacity: .8; }
.hd .legend i { border-radius: 4px; border: 1px solid rgba(94, 68, 40, .45); outline: none; }
.hd .members .member.empty { background: rgba(255, 248, 231, .7); border-color: var(--c-sand); border-radius: 14px; }
.hd .side-chip { border-radius: 999px; }
.hd .mp-bar { background: rgba(255, 248, 231, .95); color: var(--c-cocoa); border: 2px solid var(--c-sun); border-radius: 999px; box-shadow: 0 3px 0 var(--c-sun-edge); }
.hd .mp-bar .mp-open { background: var(--c-sun); color: var(--c-cocoa); border-radius: 999px; }
.hd .mp-bar .mp-open.new { background: var(--c-coral); color: #fff; }
.hd .mp-bar.late .mp-rank { color: var(--g-red); }

/* ---- the stick and the hint how to drive ---- */
.hd #stick { border: 3px solid rgba(255, 248, 231, .9); background: rgba(255, 248, 231, .35); box-shadow: 0 4px 12px var(--c-shadow); }
.hd #stick i, .hd #drive i, .hd .map-coach i { background: radial-gradient(circle at 38% 30%, #fff1b3, var(--c-sun) 55%, var(--c-sun-edge)); border: 3px solid #fff8e7; box-shadow: 0 3px 8px var(--c-shadow); }

/* ---- pictures: the painted ones are smooth ---- */
.hd .ico, .hd .hud-btn img, .hd .card .c-pic img, .hd .px { image-rendering: auto; }
/* the playfield may be given fewer pixels than the screen has (HD.pace in hd.js): stretched smoothly, not in blocks */
.hd #stage { image-rendering: auto; }
.hd .modal .m-pic canvas { width: 210px !important; height: auto !important; image-rendering: auto; }
.hd .card .c-pic img { object-fit: contain; }
.hd .radar canvas, .hd .mapwrap canvas, .hd .modal .card-img { image-rendering: auto; }
.hd img.px { object-fit: contain; image-rendering: auto; }

/* ---- full pages: one of the covers behind (hd.js picks one a day), the page itself on a cream card ---- */
.hd .screen { background-color: #bfe3f2; background-size: cover; background-position: center bottom; background-repeat: no-repeat; background-image: var(--hd-cover, none); }
.hd .screen-bgw { display: none; }
.hd .screen-in:not(:has(.title-logo)) { background: rgba(255, 248, 231, .94); border-radius: 26px; margin-top: calc(10px + var(--sat)); margin-bottom: 14px; min-height: 0; box-shadow: 0 6px 0 var(--c-sand), 0 14px 30px var(--c-shadow); }
.hd .screen h2 { color: var(--c-cocoa); }
.hd .screen h2::after { content: ""; display: block; width: 56px; height: 6px; margin: 10px auto 0; border-radius: 999px; background: var(--c-sun); }
/* (the line keeps game.css's clear 16 px above it as a transparent top border. The pill is a layer of its own over
   the padding only: painted on the element, it took in that border and the words sat low in it, 2026-10-14) */
.hd .credit { color: var(--c-cocoa); background: none; padding: 4px 14px; text-shadow: none; z-index: 0; }
.hd .credit::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 999px; background: rgba(255, 248, 231, .9); box-shadow: 0 3px 10px var(--c-shadow); }

/* ---- the title page: the name on a wooden sign that bobs, a menu of pills, a truck along the cover's road ---- */
.hd .screen-bgw.hd-drive { display: block; }
.hd .title-logo { margin-top: 28px; }
.hd .title-logo h1.game-logo { display: inline-block; padding: 14px 22px 18px; border-radius: 28px; background: linear-gradient(180deg, #a87a4c, #8a5f36); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .25), inset 0 -5px 0 rgba(60, 36, 14, .35), 0 8px 0 #5e3f20, 0 16px 28px rgba(40, 26, 10, .35); animation: hd-logo-in .7s cubic-bezier(.2, 1.5, .4, 1) both, hd-logo-float 4.5s ease-in-out .7s infinite; }
.hd .game-logo { color: #fff8e2; background: none; -webkit-background-clip: border-box; background-clip: border-box; filter: none;
  text-shadow: 0 3px 0 #5e3f20, 2px 2px 0 #5e3f20, -2px 2px 0 #5e3f20, 2px -1px 0 #5e3f20, -2px -1px 0 #5e3f20, 0 6px 10px rgba(40, 26, 10, .35); }
.hd .title-logo h1 span:last-child { color: var(--c-sun); }
.hd .title-logo h1.game-logo { color: #fff8e2; -webkit-background-clip: border-box; background-clip: border-box; }
@keyframes hd-logo-in { from { transform: translateY(-36px) scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes hd-logo-float { 0%, to { transform: translateY(0) rotate(-.6deg); } 50% { transform: translateY(-5px) rotate(.6deg); } }
.hd .menu { margin-top: 20px; }
.hd .menu-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: min(340px, 86vw); }
.hd .menu-item { justify-content: center; gap: 0; min-height: 48px; padding: 0 8px; font-size: 18px; color: var(--c-cocoa); border-radius: 999px; border: 2px solid var(--c-sand); background: rgba(255, 253, 245, .96); box-shadow: 0 4px 0 var(--c-sand), 0 8px 16px var(--c-shadow); text-align: center; animation: hd-menu-in .45s ease-out both; }
.hd .menu-item .game-caret { display: none; }
.hd .menu-item:first-child { grid-column: 1 / -1; min-height: 60px; font-size: 25px; }
.hd .menu-item:last-child:nth-child(even) { grid-column: 1 / -1; }
.hd .menu-item:nth-child(2) { animation-delay: .06s; } .hd .menu-item:nth-child(3) { animation-delay: .1s; } .hd .menu-item:nth-child(4) { animation-delay: .14s; } .hd .menu-item:nth-child(5) { animation-delay: .18s; } .hd .menu-item:nth-child(6) { animation-delay: .22s; }
.hd .menu-item.on { color: var(--c-cocoa); border-color: #ffe48f; background: var(--c-sun); box-shadow: 0 4px 0 var(--c-sun-edge), 0 8px 16px var(--c-shadow); }
.hd .menu-item:first-child.on { animation: hd-menu-in .45s ease-out both, hd-start-pulse 1.8s ease-in-out .6s infinite; }
.hd .menu-item:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--c-sand); }
@keyframes hd-menu-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes hd-start-pulse { 0%, to { box-shadow: 0 4px 0 var(--c-sun-edge), 0 0 0 0 rgba(255, 210, 74, .6); } 50% { box-shadow: 0 4px 0 var(--c-sun-edge), 0 0 0 10px rgba(255, 210, 74, 0); } }
.hd .record { margin-top: 18px; animation: hd-menu-in .5s ease-out .28s both; }
@media (prefers-reduced-motion: reduce) { .hd .title-logo h1.game-logo, .hd .menu-item, .hd .menu-item:first-child.on, .hd .record { animation: none; } }
/* (on a screen with the large type, the two halves of the day's line each broke in two and the panel stood in the road) */
@media (max-resolution: 1.49dppx) { .hd .record { max-width: 400px; } .hd .record .r-row { font-size: 20px; } }
@media (max-height: 520px) { .hd .title-logo h1.game-logo { padding: 8px 16px 10px; } }
/* 監理站 (build 43): cream cards on the street's cover, the ground in a soft frame, the result on a cream plate */
.hd .screen.exam { background-image: var(--hd-cover, none); background-color: var(--c-paper); background-size: cover; background-position: center; }
.hd .screen.exam .screen-in.ex { background: none; border-radius: 0; box-shadow: none; margin-top: 0; margin-bottom: 0; }
.hd .screen.exam .ex-name { color: var(--c-cream); text-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.hd .screen.exam .ex-name::after { display: none; }
.hd .ex-tally { padding: 4px 12px; border-radius: 999px; background: rgba(255, 248, 231, .95); box-shadow: 0 3px 0 var(--c-sand); font-weight: 700; }
.hd .ex-say { align-self: flex-start; padding: 4px 12px; border-radius: 16px; background: rgba(255, 248, 231, .95); box-shadow: 0 3px 0 var(--c-sand); font-weight: 700; }
.hd .ex-card { border: 0; border-radius: 20px; color: var(--c-cocoa); background: rgba(255, 248, 231, .96); box-shadow: 0 4px 0 var(--c-sand); }
.hd .ex-card.m3 { box-shadow: 0 4px 0 var(--c-sun-edge), inset 0 0 0 3px var(--c-sun); }
.hd .ex-card.m1 .ex-m { color: #b0662e; }
.hd .ex-card.m2 .ex-m { color: #6f7a8c; }
.hd .ex-card.m3 .ex-m { color: #b06a00; font-weight: 700; }
.hd .ex-head { padding: 6px 14px; border-radius: 18px; background: rgba(255, 248, 231, .95); box-shadow: 0 3px 0 var(--c-sand); }
.hd .ex-head .ex-test { color: #b06a00; font-weight: 700; }
.hd .ex-canvas { border: 0; border-radius: 18px; image-rendering: auto; box-shadow: 0 0 0 6px rgba(255, 248, 231, .95), 0 8px 0 6px var(--c-sand); }
.hd .ex-hud { border-radius: 999px; color: var(--c-cocoa); background: rgba(255, 248, 231, .95); box-shadow: 0 3px 0 var(--c-sand); font-weight: 700; }
.hd .ex-res { border: 0; border-radius: 24px; color: var(--c-cocoa); background: rgba(255, 248, 231, .97); box-shadow: 0 5px 0 var(--c-sand), 0 10px 28px rgba(0, 0, 0, .28); }
.hd .ex-res b { color: #b06a00; font-weight: 800; }
.hd .ex-res.fail b { color: var(--g-red); }
.hd .ex-res.m1 b { color: #b0662e; }
.hd .ex-res.m2 b { color: #6f7a8c; }
.hd .ex-res .ex-note { color: #b06a00; }
.hd .ex-bar { padding: 6px 10px; border-radius: 18px; background: rgba(255, 248, 231, .95); box-shadow: 0 3px 0 var(--c-sand); }

/* (2026-10-17, design check) the last row of buttons on a page, held at the window's foot while the page scrolls
   (game.css), on the card's own cream; and the factory's tabs on the narrowest phones in a readable size (the
   pixel face keeps its 12px grid there) */
.hd .screen-in > .btn-row:last-child, .hd .screen-in > .back-row:last-child { background: linear-gradient(180deg, rgba(255, 248, 231, 0), rgba(255, 248, 231, .97) 14px); }
@media (max-width: 380px) { .hd .tab { font-size: 16px; } }
/* ...except on the road: the panels over it keep their sizes, as tests/browser/hud.py holds them to how much of the
   screen they may cover (the owner: 「盡可能讓出畫面」) */
.hd #hud { --t-tiny: 12px; --t-body: 12px; }
.hd .legend img.lg { image-rendering: auto; } /* (HD's marks are round: drawn smooth) */
.hd .map-foot .gray.red { color: var(--g-red); } /* (地圖標記, build 52: there is no road there) */
.hd .map-coach b { color: var(--c-cocoa); border-color: var(--c-sun); box-shadow: 0 4px 0 var(--c-sun-edge), 0 8px 18px var(--c-shadow); }
.hd .radar.big { box-shadow: 0 0 0 2px var(--c-sand), 0 14px 30px var(--c-shadow); } /* (2026-10-17: the minimap tapped large on a phone held sideways) */