/* The game view, dressed to match the menus: walnut and brass around each area's rendered background.
   Speech bubbles and tokens keep their own bright colours, so they stay the easiest things to read. */
.backdrop { display: block; object-fit: cover; object-position: center 62%; }
.screen.game, .screen.story { background: #0a1210; }

/* The stall's finish. The shop's cherry, mint and gold finishes replace these colours. */
.game[data-skin=""] { --oak: #8a5a33; --oak-hi: #a8733f; --oak-lo: #3f2412; }
.game[data-area="1"] { --felt: #2f6a60; --felt-lo: #1f4a43; }
.game[data-area="2"] { --felt: #8a5364; --felt-lo: #5f3543; }
.game[data-area="3"] { --felt: #33687e; --felt-lo: #224857; }
.game[data-area="4"] { --felt: #5c4a8a; --felt-lo: #3d3063; }
.game[data-area="5"] { --felt: #8a2f40; --felt-lo: #5f1f2c; }
.game[data-area="6"] { --felt: #2f6a7a; --felt-lo: #204a56; }
.game[data-area="7"] { --felt: #4d6474; --felt-lo: #344552; }
.game[data-area="8"] { --felt: #37704a; --felt-lo: #254e33; }
.game[data-area="9"] { --felt: #7a5236; --felt-lo: #533723; }
.game[data-area="10"] { --felt: #5b4a86; --felt-lo: #3d3160; }

/* Top bar and message desk */
.game .hud, .game .desk {
  --ink: #f3e9d4; --ink-soft: #b5ab96; --paper: #101815; --paper-2: #1d2722; --line: rgba(217, 181, 102, .24); --teal-deep: #d9b566; --display: "Cormorant Garamond", "Didot", Georgia, serif;
  color: var(--ink); background: #101815; box-shadow: none;
}
.game .hud { box-shadow: 0 1px 0 rgba(217, 181, 102, .28); }
.game .hud-title { font-weight: 600; font-size: 1.28rem; }
.game .hud-timer { font: 600 1.05rem var(--body); font-variant-numeric: lining-nums tabular-nums; box-shadow: inset 0 0 0 1px rgba(217, 181, 102, .24); }
.game .tips { font: 600 1.05rem var(--body); font-variant-numeric: lining-nums tabular-nums; color: #f0dca6; }
.game .icon-btn { color: var(--ink); }
.game .hud-combo { color: #1b1407; background: #d9b566; }
.game .desk { box-shadow: 0 -1px 0 rgba(217, 181, 102, .28); }
.game .ledger { font: 500 1rem/1.25 var(--body); color: var(--ink); }
.game .tray-cell { background: rgba(0, 0, 0, .34); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .6), 0 1px 0 rgba(243, 233, 212, .08); }
.game .btn-choice.risky { color: var(--ink); background: var(--paper-2); }

.game .desk .token { font-family: "Rozha One", "Didot", Georgia, serif; }
.game .slot-pill, .game .queue-pill { color: #f3e9d4; background: rgba(10, 17, 15, .78); box-shadow: inset 0 0 0 1px rgba(217, 181, 102, .32); }
.game .slot-pill.full { color: #fff; background: var(--bad); box-shadow: none; }

/* The counter and racks: real grain over the stall's finish */
.game .counter { background: url("assets/ui/grain.jpg") center / 900px auto, linear-gradient(180deg, var(--oak-hi), var(--oak) 22%, var(--oak-lo)); background-blend-mode: multiply; box-shadow: inset 0 3px 0 #c9a25a, inset 0 4px 0 rgba(0, 0, 0, .45), 0 -8px 20px rgba(0, 0, 0, .4); }
.game .rack { background: url("assets/ui/grain.jpg") center / 900px auto, linear-gradient(90deg, var(--oak-lo), var(--oak) 8%, var(--oak) 92%, var(--oak-lo)); background-blend-mode: multiply; box-shadow: inset 0 3px 8px rgba(0, 0, 0, .55); }
.game .rack-unit { background: rgba(10, 6, 2, .42); box-shadow: inset 0 0 0 1px rgba(217, 181, 102, .16); }
.game .rack-name { font: 600 .84rem/1.3 "Cormorant Garamond", Georgia, serif; letter-spacing: .03em; color: #f0dca6; text-shadow: 0 1px 1px #000; }
.game .box { background: linear-gradient(180deg, var(--felt-lo), var(--felt) 46%); box-shadow: inset 0 7px 10px rgba(0, 0, 0, .5), 0 1px 0 rgba(243, 220, 170, .22); }
.game .box:hover { filter: brightness(1.1); box-shadow: inset 0 7px 10px rgba(0, 0, 0, .5), 0 0 0 2px #d9b566; }
.game .plate { font: 700 .86rem/1.3 var(--body); font-variant-numeric: lining-nums; color: #2a1c07; background: linear-gradient(180deg, #f1dc9c, #c99f4d); box-shadow: inset 0 1px 0 rgba(255, 248, 220, .8), 0 1px 2px rgba(0, 0, 0, .6); }
.game .gear-item { background: #1d2722; box-shadow: 0 0 0 1px rgba(217, 181, 102, .5), 0 3px 6px rgba(0, 0, 0, .5); }
.game .gear-item .shop-icon { background: none; box-shadow: none; }
.game .clean-btn { color: #1b1407; background: linear-gradient(180deg, #efd894, #c99f4d); }
.game .event-banner { color: #f3e9d4; background: rgba(13, 20, 18, .94); box-shadow: inset 0 0 0 1px #d9b566, 0 16px 34px rgba(0, 0, 0, .55); }
.game .event-banner b { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; color: #f0dca6; }

/* Results: the page stays cream, in a leather cover */
.overlay { background: rgba(5, 9, 8, .62); }
.overlay .ledger-book { background: linear-gradient(90deg, #12211d, #1c3029); box-shadow: inset 0 0 0 1px rgba(217, 181, 102, .4), 0 26px 60px rgba(0, 0, 0, .6); }
.overlay .ledger-page h2 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 2.2rem; }
.overlay .btn-brass { color: #1b1407; background: linear-gradient(180deg, #efd894, #d0a653 58%, #b58a3b); box-shadow: inset 0 1px 0 rgba(255, 248, 220, .75), 0 6px 14px rgba(40, 25, 5, .35); }
.overlay .btn-plain { color: #2b2140; background: transparent; box-shadow: inset 0 0 0 1px rgba(90, 62, 16, .5); }
.overlay .ledger-note { color: #7b5a1c; }

/* Story scenes */
.story .story-box { --ink: #f3e9d4; --ink-soft: #b5ab96; --coral: #d9b566; color: #f3e9d4; background: rgba(15, 22, 19, .95); box-shadow: inset 0 0 0 1px rgba(217, 181, 102, .4), 0 18px 40px rgba(0, 0, 0, .5); }
.story .backdrop { filter: brightness(.82); }
.story .story-text { color: #f3e9d4; }
.story .story-text.narr { font: italic 500 clamp(1.25rem, 3vw, 1.5rem)/1.32 "Cormorant Garamond", Georgia, serif; }
.story .story-name { box-shadow: none; color: #1b1407; background: linear-gradient(180deg, #f1dc9c, #c99f4d); font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; }
.story .story-skip { color: #f3e9d4; background: rgba(10, 17, 15, .72); box-shadow: inset 0 0 0 1px rgba(217, 181, 102, .4); }

/* Rain only shows where there is sky. Indoors, it still brings muddy shoes in from outside. */
.game:not([data-area="1"]):not([data-area="4"]):not([data-area="8"]) .rain { display: none; }