:root{
  /* Board-sourced palette (ukiyo-e / washi). Indigo + ochre dominate; terracotta
     is roofs only; coral is dice & seals. See _private/UI_DESIGN_RECOMMENDATIONS.md */
  --washi:#ece2cc; --washi-deep:#e2d6ba; --panel:#f1e8d4;
  --ai:#2c3a54; --ai-soft:#3d5273;            /* indigo — Diplomats, chrome beams */
  --ochre:#c3923d; --kincha:#7f5330;          /* Stewards, wood frames */
  --kawara:#b05c38;                            /* roof tiles ONLY */
  --matcha:#8a976c; --sora:#cfe0e1;            /* yards grass, castle sky */
  --ink:#2a2622; --muted:#897b64;
  --accent:#cf4a2e; --gold:#d9b24e; --line:#d7c5a2;
  --coral:#d1583a; --blue:#34507e; --green:#5f8a4e; --yellow:#d9b24e;
  --paper-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
body{margin:0;font-family:"Zen Kaku Gothic New","Segoe UI",system-ui,sans-serif;color:var(--ink);min-height:100vh;
  background:
    var(--paper-grain),
    radial-gradient(120% 70% at 50% -8%, rgba(207,224,225,.55), rgba(207,224,225,0) 46%),
    linear-gradient(180deg,#efe6d0,#e7dcc0 60%,#e2d6b8);
  background-attachment:fixed}
/* display face: an Edo-print Mincho carries the headings' voice */
.lobby-card h1,.lobby-card h2,#topbar .brand,.region h3,.track-block h4,
.yard-head,.subregion h4,.modal-box h3,.floor-tag b{font-family:"Shippori Mincho B1","Shippori Mincho",serif}
.hidden{display:none !important}
button{font:inherit;cursor:pointer;border:none;border-radius:8px;padding:.55em 1em}
button.primary{background:var(--accent);color:#fff;font-weight:600}
button.primary:hover{filter:brightness(1.08)}
button.primary:disabled{background:#9a9088;cursor:not-allowed}
/* base ghost = dark text (sits on light surfaces: modals, resume banner, …) */
button.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
button.ghost:hover:not(:disabled){background:var(--washi);border-color:var(--ochre)}
button.ghost:disabled{opacity:.4;cursor:not-allowed}
/* ghost buttons on the dark indigo top-bar need light text instead */
#topbar button.ghost{color:#f1e8d4;border-color:#ffffff55}
#topbar button.ghost:hover:not(:disabled){background:#ffffff1a;border-color:#ffffff99}
.code{font-family:ui-monospace,monospace;letter-spacing:.2em;background:#0003;padding:.1em .4em;border-radius:6px}
.error{color:#ffb4a8;min-height:1.2em;margin:.4em 0 0}

/* ---- lobby / waiting / setup ---- */
.screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
#game.screen{display:block;align-items:stretch}
.lobby-card{background:var(--panel);border-radius:16px;padding:32px;max-width:640px;width:100%;
  box-shadow:0 20px 60px #0007;border:1px solid var(--line)}
.lobby-card.wide{max-width:900px}
.lobby-card h1{margin:0 0 .2em;font-size:2.4rem;text-align:center;font-weight:800}
.lobby-card h1 span{display:block;font-size:1rem;color:var(--muted);letter-spacing:.3em;text-transform:uppercase}
.tagline{text-align:center;color:var(--muted);margin:0 0 1.4em}
.field{display:block;margin:.6em 0}
.field span{display:block;font-size:.85rem;color:var(--muted);margin-bottom:.3em}
.field input,.field select{width:100%;padding:.6em;border:1px solid var(--line);border-radius:8px;font:inherit;background:#fff}
.lobby-cols{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;margin-top:1em}
.lobby-col h2{font-size:1.1rem;margin:.2em 0 .4em}
.lobby-col .primary{width:100%;margin-top:.4em}
.lobby-hint{font-size:.82rem;color:var(--muted);margin:.6em 0 0;line-height:1.35}
.divider{position:relative;text-align:center;color:var(--muted)}
.divider span{background:var(--panel);padding:.3em}
.big{text-align:center;font-size:1.2rem;margin:1em 0}
.playerlist{list-style:none;padding:0;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.playerlist li{background:#fff;border:1px solid var(--line);border-radius:999px;padding:.3em .9em}
.resume{display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap;
  background:#fff6e2;border:1px solid var(--gold);border-radius:10px;padding:10px 14px;margin:0 0 1em}
.resume .code{color:var(--accent)}
button.small{padding:.35em .8em;font-size:.85rem}
.setup-actions{display:flex;justify-content:center;margin-top:1.4em}
/* Selection-order strip (reverse of Heron turn order) above the pairs */
.setup-order{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:.4em}
.so-cap{display:flex;align-items:center;gap:5px;font-size:.78rem;font-weight:700;color:var(--muted)}
.so-cap .ico{width:16px;height:16px;vertical-align:middle}
.so-list{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;padding:0}
.so-item{display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
  border:1px solid var(--line);background:#fff8ec;font-size:.86rem}
.so-item.current{border-color:#2f72c9;background:#2f72c91a;font-weight:700;box-shadow:0 0 0 2px #2f72c93a}
.so-item.done{opacity:.55}
.so-item .dot{width:11px;height:11px;border-radius:50%;display:inline-block}
.so-rank{font-weight:800;color:var(--muted);min-width:1em;text-align:center}
.so-heron{display:inline-flex;align-items:center;gap:1px;font-size:.74rem;color:var(--muted)}
.so-heron .ico{width:14px;height:14px;vertical-align:middle}
.so-now{font-size:.72rem;font-weight:700;color:#2f72c9}
.so-check{color:#3f9a52;font-weight:800}
.so-arrow{color:var(--muted);font-size:.9rem}
.offer{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:1em;align-items:stretch}
/* Each offer is a PAIR you pick as a unit: action card (top) + resource card (bottom). */
.offer-pair{display:flex;flex-direction:column;gap:8px;align-items:stretch;width:184px;
  padding:8px;border:2px solid transparent;border-radius:14px;
  transition:transform .1s,border-color .1s,background .1s}
/* highlight whichever pair the mouse is over, regardless of whose turn it is */
.offer-pair:hover{border-color:#2f72c9;background:#2f72c90f}
.offer-pair.pickable{cursor:pointer}
.offer-pair.pickable:hover{transform:translateY(-6px)}
.offer-card{display:flex;flex-direction:column;flex:1 1 auto}
/* starting-pair cards: benefits as icon chips, orange resource card + yellow lantern side.
   Cards stretch to equal height regardless of content (resources/decree/lantern). */
.offer-card .card{width:100%;flex:1 1 auto;justify-content:center;background:linear-gradient(#f7bd71,#ef9a3d);border:1px solid #cf8026}
/* pale region fills the card (uniform height); resources sit at the top,
   the Lantern bar at the bottom. */
.offer-card .card .scroll{flex:1 1 auto;display:flex;flex-direction:column;gap:7px;padding:9px;
  background:rgba(255,251,242,.9)}
.offer-gains{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;align-items:center;
  font-size:.92rem;font-weight:700}
.offer-card .card .scroll .ico{width:27px;height:27px;vertical-align:middle}
.offer-card .card .scroll .sc-sep{font-size:1rem}
/* Decree (with the resources) + Lantern both sit INSIDE the card as full-width lines */
.offer-decree,.offer-lantern-in{flex-basis:100%;display:flex;align-items:center;justify-content:center;gap:5px;
  flex-wrap:wrap;margin-top:6px;border-radius:8px;padding:4px 8px;font-size:.74rem;font-weight:700}
.offer-decree{background:linear-gradient(#4c4b52,transparent);color:#f3ece0}
/* lantern is a direct child of the column scroll: pin to content height (flex-basis:100%
   would mean full HEIGHT here) and stretch full width via the scroll's default align. */
.offer-lantern-in{flex:0 0 auto;margin-top:auto;align-self:stretch;
  background:linear-gradient(#f4e392,#ebd455);border:1px solid #ccb23a;color:#4a3a0c}
.offer-decree .ico,.offer-lantern-in .ico{width:17px;height:17px;vertical-align:middle}
/* the starting ACTION card atop each pair (yellow) */
.start-action-card{display:flex;flex-direction:column;align-items:center;gap:3px;width:100%;padding:10px 10px;
  background:linear-gradient(#f4e392,#ead14a);border:2px solid #ccb23a;border-radius:12px;box-shadow:0 3px 8px #0002}
.sa-cap{font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#7a5e10}
.sa-icon{line-height:0}
.sa-label{font-size:1rem;color:#4a3a0c}
.sa-sub{font-size:.72rem;color:#6b5a20}

/* ---- cards ---- */
.card{width:120px;min-height:120px;background:#fffdf7;border:1px solid var(--line);border-radius:10px;
  padding:6px;display:flex;flex-direction:column;gap:3px;box-shadow:0 3px 8px #0002;position:relative}
/* end-game Clan Points shown on the card face as a yellow shell + number */
.garden-vp-badge{position:absolute;right:4px;bottom:4px;width:26px;height:26px;line-height:0;filter:drop-shadow(0 1px 1px #0003)}
.garden-vp-badge .ico{display:block;width:26px;height:26px}
.gvp-n{position:absolute;left:0;right:0;top:54%;transform:translateY(-50%);text-align:center;
  font-weight:800;font-size:.72rem;color:#4a3a0c;text-shadow:0 1px 1px #f6e3ab}
.card.small{width:92px;min-height:92px;font-size:.72rem}
.card.empty{align-items:center;justify-content:center;color:var(--muted)}
.card-id{font-size:.6rem;color:var(--muted);font-family:ui-monospace,monospace}
.card .scroll{background:#efe6d6;border-radius:5px;padding:2px 5px;font-size:.78rem;display:flex;align-items:center;gap:4px}
.card.small .scroll{font-size:.66rem;padding:1px 4px}
/* River & Gardens: the benefit is the card's primary info — give it room */
.garden .card.small{width:auto}
.garden .card.small .scroll{font-size:.82rem;font-weight:700;padding:6px 8px;min-height:40px;gap:5px}
.garden .card.small .scroll .ico{width:23px;height:23px}
.garden .card.small .scroll .sc-sep{font-size:.9rem;margin:0 1px}
.scroll-dot{width:9px;height:9px;border-radius:50%;display:inline-block;border:1px solid #0003}
.scroll-dot[data-c="coral"]{background:var(--coral)}
.scroll-dot[data-c="black"]{background:#2b2b2f}
.scroll-dot[data-c="white"]{background:#f3ece0}
.scroll-dot[data-c=""]{background:repeating-linear-gradient(45deg,#ccc,#ccc 2px,#eee 2px,#eee 4px)}
.garden-right{margin-top:auto;font-size:.7rem;color:var(--muted)}
.inferred{color:var(--accent);font-weight:700}
.card.draggable{cursor:grab}

/* ---- game layout ---- */
/* a lacquered indigo beam, like a castle lintel */
#topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;
  background:linear-gradient(#33425e,#2c3a54);color:#f1e8d4;padding:10px 18px;
  box-shadow:0 2px 0 #1d2740,0 4px 12px #0003;border-bottom:1px solid #1d2740}
#topbar .brand{font-weight:700;font-size:1.1rem;letter-spacing:.02em;color:#f3ead0}
#topbar .turn{margin-left:8px;background:#0003;padding:.3em .8em;border-radius:999px}
#topbar .round{color:#cdd8e4}
#topbar .code{background:#0003;color:#f0e4c4}
#topbar .actions{margin-left:auto;display:flex;gap:8px}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:middle;margin-right:4px;border:1px solid #0004}
#boardWrap{display:grid;grid-template-columns:1fr 320px;gap:14px;padding:14px;align-items:start}
#mainboard{display:flex;flex-direction:column;gap:12px}
/* 3-column middle: River&Gardens (left) · Castle (center) · Yards (right) */
/* River & Gardens wide enough for 5 dice on a bridge (no wrap); castle a touch
   wider; yards may squish. */
.board-mid{display:grid;grid-template-columns:minmax(372px,1.1fr) minmax(400px,1.45fr) minmax(158px,0.75fr);gap:12px;align-items:stretch}
.board-col{display:flex;flex-direction:column;gap:12px;min-width:0}
/* the three mid-board regions share the tallest column's height */
.board-col>.region{flex:1 1 auto}
.board-right .yards .yard-row{flex-direction:column}  /* yards stack vertically on the right */
.board-grounds{display:flex;gap:12px;flex-wrap:wrap}
.board-grounds .region{flex:1 1 280px}
@media (max-width:1100px){ .board-mid{grid-template-columns:1fr} }
/* ---- narrow / mobile: stack the board above the player mats ---- */
@media (max-width:820px){
  #boardWrap{grid-template-columns:1fr;gap:10px;padding:8px}
  #sidebar{position:static;top:auto}
  #mainboard{border-width:7px;border-radius:12px}
  .board-grounds{flex-direction:column}       /* Well + Outside stack */
  /* top bar wraps instead of overflowing; controls stay reachable */
  #topbar{flex-wrap:wrap;gap:6px 8px;padding:8px 10px}
  #topbar .brand{font-size:1rem;flex:1 1 100%}
  #topbar .turn{margin-left:0}
  #topbar .actions{margin-left:auto;flex-wrap:wrap}
  #topbar .actions button{padding:.4em .7em;font-size:.8rem}
  #musicToggle.music-btn{width:32px;height:32px}
  /* castle: the 1st floor (3 Steward rooms) is wider than a phone — let the
     building scroll horizontally instead of bleeding off the viewport */
  .castle-build{overflow-x:auto;overflow-y:visible;padding-bottom:10px;align-items:flex-start}
  /* each floor takes its full natural width (not capped to the scroll viewport),
     so the floor background + roof span all its rooms when you swipe across */
  .floor{max-width:none;width:max-content}
  .castle-build>*{flex:0 0 auto}
  .castle-gate{width:max-content}
}
/* dice-placement slot (printed default + placed dice) */
.dice-slot{display:flex;flex-direction:column;gap:2px;margin:5px 0;background:#fff8ec;border:1px dashed #c9b78f;
  border-radius:8px;padding:4px 6px}
.slot-dice{display:flex;align-items:center;gap:3px;flex-wrap:wrap}
.printed-die{opacity:.65}
.placed-die.top{outline:2px solid var(--gold);border-radius:7px}
.slot-more{font-size:.7rem;color:var(--muted)}
/* outside the walls — a market road: 🌉 stall 🏯 stall ⚔️ */
.outside-region{background:
  linear-gradient(#e7d9bb,#dbcaa2 60%,#d2bf93)}       /* earthen road */
.outside-row{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap;justify-content:center;
  padding-top:6px;border-top:2px dashed #c3ad7e}
.os-symbol{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:74px;
  background:#f6ecd6;border:1px solid var(--line);border-radius:7px;padding:6px}
.os-emoji{font-size:1.7rem;line-height:1}
.os-symbol span:last-child{font-size:.6rem;color:var(--muted);text-align:center;letter-spacing:.02em}
/* each placement slot = a market stall with a little awning roof */
.os-slot{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;justify-content:flex-end;
  background:#fff8ec;border:1px solid var(--kincha);border-radius:8px;padding:10px 10px 7px}
.os-acts{font-size:.64rem;color:var(--kincha);font-weight:700;text-transform:capitalize}
.well-region .dice-slot{max-width:260px}
.well-body{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.well-svg{flex:0 0 auto;filter:drop-shadow(0 2px 3px #0002)}
.well-info{flex:1 1 200px;min-width:200px}
.well-benefits{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:2px 0 6px}
/* larger benefit-tile glyphs in the Well */
.well-benefits .opt-ben{font-size:.84rem;font-weight:700;padding:3px 8px}
.well-benefits .opt-ben .ico{width:23px;height:23px;vertical-align:middle}
.well-benefits .opt-ben .sc-sep{font-size:.9rem;margin:0 1px}
.wb-cap{font-size:.62rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.wb-note{font-size:.62rem;color:var(--muted);font-style:italic}
.region{background:var(--panel);border-radius:12px;padding:12px;border:1px solid var(--line);
  box-shadow:0 1px 0 #fff8 inset,0 6px 16px -10px #3a2c1a66}
.region h3{margin:0 0 2px;font-size:1.12rem;font-weight:700;letter-spacing:.01em;color:var(--ink);display:flex;align-items:center;gap:7px}

/* ============================================================
   THE BOARD AS ONE CONTINUOUS SURFACE
   Dissolve the separate rounded "cards": the mainboard becomes a single
   lacquered-wood tray and every region tiles into it edge-to-edge, divided
   only by soft seams — the way the printed board is one painted sheet, not a
   grid of panels.
   ============================================================ */
#mainboard{gap:0;border-radius:18px;overflow:hidden;background:#d9cba8;
  border:12px solid #45321e;
  box-shadow:0 20px 48px -18px #22150a, inset 0 0 0 2px #2a1c0e, inset 0 0 60px #00000026}
.board-mid,.board-grounds{gap:0}
/* each zone keeps a slight inlaid border so areas stay distinct, but no card
   chrome (no radius, no drop shadow) — they still tile into one board */
#mainboard .region{border:0;border-radius:0;
  box-shadow:inset 0 0 0 1px rgba(58,44,26,.34), inset 0 0 0 2px rgba(255,255,255,.14)}
/* a faint woodgrain highlight along the inner edge of the tray */
#mainboard::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:6px;
  box-shadow:inset 0 0 0 1px #ffffff14}
#mainboard{position:relative}
/* the two mid-board edges where River|Castle|Yards meet get a soft blended seam */
.board-col{position:relative}
.sec-ico{font-size:1.6rem;line-height:1}
.sec-sub{margin:0 0 8px;font-size:.72rem;color:var(--muted);font-style:italic;opacity:.9}

/* river & gardens — bridge dice above each pair of gardens.
   A stone garden: the "river" is a pale jade channel; stepping-stones drift
   across it; each Bridge spans the water with the dice resting on its deck. */
.rivergarden{background:
  radial-gradient(60% 40% at 80% 12%, rgba(227,180,192,.22), transparent 60%),  /* cherry haze */
  linear-gradient(#e7dcbe,#dfe4d6 62%,#cfe0dd)}
.bridge-groups{display:flex;flex-direction:column;gap:14px}  /* coral → black → white, top to bottom */
.bridge-group{position:relative;background:linear-gradient(#eef3ee,#dfeae6);border:1px solid #c9d3c6;
  border-radius:12px;padding:10px 8px 8px;display:flex;flex-direction:column;gap:9px;
  box-shadow:inset 0 0 0 1px #ffffff66}
/* stepping-stone path texture across the river channel */
.bridge-group::after{content:'';position:absolute;left:10px;right:10px;top:50px;height:14px;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle,#b9b0a0 38%,transparent 42%);background-size:22px 14px;opacity:.35}
/* the bridge: an arched timber/stone span with a plank deck and a shadow beneath */
.bridge-strip{position:relative;z-index:1;display:flex;align-items:center;gap:6px;padding:8px 12px;
  border-radius:40px 40px 10px 10px;min-height:54px;
  background:
    linear-gradient(#caa678,#b98f5f 55%,#a67c4e),
    repeating-linear-gradient(90deg,#00000012 0 1px,transparent 1px 13px);
  border:1px solid #8a6238;
  box-shadow:0 6px 10px -4px #0005, inset 0 2px 0 #ffffff55, inset 0 -3px 5px #00000022}
.bridge-strip::before{content:'';position:absolute;left:6%;right:6%;bottom:-7px;height:12px;z-index:-1;
  border-radius:50%;background:radial-gradient(50% 100% at 50% 0,#0003,transparent 70%)}  /* arch shadow on the water */
/* a stone lantern (tōrō) plinth at the bridge's lantern (left) end */
.bridge-strip .bridge-tag{display:flex;flex-direction:column;align-items:center;gap:0;font-size:.58rem;color:#f3ead0;
  letter-spacing:.02em;background:linear-gradient(#6f6a60,#4f4b44);padding:.3em .5em;border-radius:8px;white-space:nowrap;
  box-shadow:inset 0 1px 0 #ffffff33,0 1px 2px #0004}
.bridge-tag .lantern-side{font-size:.5rem;opacity:.8}
/* the tōrō glows when a Lantern-triggering left draft is available to you */
.bridge-strip:has(.end-left.clickable-die) .bridge-tag{animation:toroGlow 1.6s ease-in-out infinite}
@keyframes toroGlow{0%,100%{box-shadow:inset 0 1px 0 #ffffff33,0 0 0 0 rgba(226,181,60,0),0 0 6px 0 rgba(226,181,60,.0)}
  50%{box-shadow:inset 0 1px 0 #ffffff55,0 0 0 2px rgba(226,181,60,.55),0 0 14px 3px rgba(226,181,60,.6)}}
@media (prefers-reduced-motion:reduce){.bridge-strip:has(.end-left.clickable-die) .bridge-tag{animation:none;box-shadow:0 0 0 2px rgba(226,181,60,.6)}}
.bridge-dice{display:flex;gap:6px;align-items:center;flex-wrap:nowrap}
.diecell{padding:2px;border-radius:8px}
.diecell.draftable{outline:2px dashed #ffffffcc}
.diecell[draggable=true]{cursor:grab}
.diecell.end-left{outline-color:var(--gold)}
.empty-note{color:#fff;font-size:.72rem;opacity:.8}
.garden-pair{display:flex;gap:7px;align-items:stretch}
.garden-pair .garden{flex:1}
/* the river between the Plant & Stone banks — flowing water with gentle ripples */
.rg-river{flex:0 0 20px;align-self:stretch;border-radius:5px;position:relative;overflow:hidden;
  background:linear-gradient(90deg,#8fc6e6,#bfe6f4 45%,#8fc6e6);
  box-shadow:inset 0 0 0 1px #4b93c0,inset 0 0 7px #ffffff66}
.rg-river::after{content:'';position:absolute;inset:-20% 0;opacity:.45;
  background:repeating-linear-gradient(0deg,transparent 0 6px,#ffffff55 6px 8px,transparent 8px 14px)}

/* castle — tiered pagoda */
.castle{background:linear-gradient(#cde0ea,#e9e0cf 55%);position:relative;overflow:hidden}
/* vertical brush cartouche — "A Year at the White Heron Castle" (白鷺城での一年) */
.cartouche{position:absolute;z-index:2;top:62px;left:10px;writing-mode:vertical-rl;text-orientation:upright;
  font-family:"Yuji Syuku",serif;font-size:1.15rem;letter-spacing:.14em;color:#2a2622;line-height:1.05;
  background:linear-gradient(#e7c56a,#d8ac44);border:1px solid #b78a2f;border-radius:4px;padding:10px 5px;
  box-shadow:0 3px 8px -3px #0006,inset 0 0 0 2px #f3e0a855;pointer-events:none;user-select:none}
@media (max-width:1100px){.cartouche{display:none}}
/* cloud backdrop — a fixed-height band behind the top of the pagoda.
   Fixed height + slice keeps clouds uniformly scaled (cropped, never stretched). */
.castle-clouds{position:absolute;top:34px;left:0;width:100%;height:150px;z-index:0;pointer-events:none;overflow:hidden}
.castle-clouds .clouds-svg{width:100%;height:100%;display:block}
.castle>h3,.castle>.sec-sub,.castle-build{position:relative;z-index:1}
.castle-build{display:flex;flex-direction:column;align-items:center;gap:0;padding:4px 0 2px}
/* daimyo chamber: Lantern + placed card */
.daimyo-lantern{display:flex;align-items:center;justify-content:center;gap:5px;margin:2px 0 4px;
  font-size:.62rem;color:#7a5a1c;background:#fff6e2;border:1px solid #e3cf9b;border-radius:6px;padding:3px 6px}
.daimyo-lantern .dl-plus{font-weight:700;font-size:.9rem;color:#b3934a}
.daimyo-lantern .dl-card{font-family:ui-monospace,monospace;font-size:.56rem;color:#8a6a2c;text-transform:capitalize}
.floor{display:flex;flex-direction:column;align-items:stretch;width:fit-content;max-width:100%;position:relative;margin-bottom:-2px}
.floor-3{z-index:4}.floor-2{z-index:3}.floor-1{z-index:2}
.roof{line-height:0;filter:drop-shadow(0 3px 2px #0003)}
.roof-svg{display:block;width:100%;height:30px;margin-bottom:-2px}
.floor-body{display:flex;align-items:stretch;gap:8px;background:linear-gradient(#fffdf8,#efe7d6);
  border:1px solid #d8ccb8;border-top:none;border-radius:0 0 8px 8px;padding:8px 12px;
  box-shadow:inset 0 2px 0 #fff}
.floor-tag{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding-right:8px;border-right:2px solid #e0d6c2;min-width:66px}
.floor-tag b{font-size:.72rem;color:#333}.floor-tag span{font-size:.64rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.gate-climb{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px;margin-top:3px;
  font-size:.62rem;color:#6a5a3c;text-transform:none;letter-spacing:0}
.cost-tag{display:inline-flex;align-items:center;gap:1px;font-size:.62rem;color:#8a2f23;font-weight:700;
  background:#fff;border:1px solid #e0d6c2;border-radius:4px;padding:0 3px;text-transform:none}
.tier-rooms{display:flex;gap:10px;justify-content:center}
.room{min-width:108px;display:flex;flex-direction:column;align-items:stretch;gap:5px}
/* the card itself lives in a coloured container; dice slot sits OUTSIDE it */
.card-box{background:#fff;border:1px solid var(--line);border-radius:8px;padding:7px;box-shadow:0 2px 5px #0001}
/* card-type containers: light-brown Stewards on L1, dark-blue Diplomats on L2 */
.floor-1 .card-box{background:linear-gradient(#ead6ab,#d9c08a);border-color:#b8935a}
.floor-2 .card-box{background:linear-gradient(#3b5188,#2b3c66);border-color:#1e2b49}
/* Room card = a 2-col grid (die-tile | scroll). Pairs share a grid row, so a
   die tile is ALWAYS vertically aligned with its scroll (span-aware, size-proof). */
.room-cardrow{display:grid;grid-template-columns:auto 1fr;column-gap:6px;row-gap:3px;align-items:stretch;
  background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px;box-shadow:0 2px 5px #0001}
.floor-1 .room-cardrow{background:linear-gradient(#ead6ab,#d9c08a);border-color:#b8935a}
.floor-2 .room-cardrow{background:linear-gradient(#3b5188,#2b3c66);border-color:#1e2b49}
.room-cardrow .dt{grid-column:1;display:flex;align-items:center;justify-content:center}
.room-cardrow .castle-row{grid-column:2}
.dietile-svg{display:block;filter:drop-shadow(0 1px 1px #0003)}
/* Castle: all glyphs a touch larger for readability (structural roof/gate kept) */
.castle-build .castle-row .ico,.castle-build .daimyo-slot .ico{width:19px;height:19px}
.castle-build .daimyo-lantern .ico{width:30px;height:30px}
.castle-build .dt .dietile-svg{width:31px;height:auto}
.castle-build .dt-inline .dietile-svg{width:24px;height:auto}
.castle-build .meeple{width:22px;height:22px}
.dt-inline{display:inline-flex;align-items:center;flex:0 0 auto;margin-right:1px}
.room-head{font-size:.66rem;color:var(--muted);margin-bottom:0;text-align:center}
.room-dice{display:flex;gap:3px;margin-top:5px;justify-content:center;min-height:30px}
.active-die{outline:2px solid var(--gold);border-radius:7px}
.inactive-die{opacity:.45}
.room-courtiers{margin-top:5px;min-height:20px;text-align:center}
.room-cardid{font-size:.5rem;color:#b3a894;font-family:ui-monospace,monospace}
/* die-tile → scroll rows */
.castle-rows{display:flex;flex-direction:column;gap:3px;margin:4px 0}
.castle-row{display:flex;align-items:center;gap:5px;background:#fff;border:1px solid var(--line);
  border-radius:6px;padding:2px 5px;font-size:.7rem}
.castle-row.row-hit{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset;background:#fffbe9}
.tile-dot{width:13px;height:13px;border-radius:3px;flex:0 0 auto}
.row-scroll{line-height:1.1}
.choose-opt .castle-rows{margin:4px 0}
/* scroll-colour swatch (light=white / dark=black) for exec-scroll choosers */
.scroll-swatch{width:14px;height:14px;border-radius:3px;flex:0 0 auto;border:1px solid #0004;display:inline-block;vertical-align:middle}
.scroll-swatch[data-c="white"]{background:#f3ece0}
.scroll-swatch[data-c="black"]{background:#4c4b52}
.scroll-swatch[data-c="coral"]{background:var(--coral)}
.scroll-swatch[data-c=""]{background:repeating-linear-gradient(45deg,#ccc,#ccc 2px,#eee 2px,#eee 4px)}
.scroll-row.row-hit{box-shadow:0 0 0 2px var(--gold)}
/* daimyo favour slots */
.daimyo-room{min-width:150px;background:linear-gradient(#fff9ec,#f4e8cf);border:1px solid #e3cf9b;
  border-radius:8px;padding:7px;box-shadow:0 2px 5px #0001}
.tok-emoji{font-size:1rem;line-height:1;vertical-align:middle}
.daimyo-slot .slot-ben .tok-emoji{font-size:1.15rem}
.tok-ico{display:inline-flex;align-items:center;vertical-align:middle}
.tok-ico svg{display:block}
.bchip{display:inline-flex;align-items:center;gap:1px;vertical-align:middle}
.bchip svg{display:block}
/* a scroll's chips share one full-instruction tooltip (cost included) */
.scroll-eff{display:inline-flex;align-items:center;gap:3px;flex-wrap:wrap;vertical-align:middle}
.daimyo-slots{margin-top:2px;display:flex;flex-direction:column;gap:4px}
.daimyo-slots-title{font-size:.58rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:center}
.daimyo-slot{display:flex;align-items:center;justify-content:space-between;gap:6px;
  background:#fff;border:1px solid var(--line);border-radius:7px;padding:3px 6px;font-size:.72rem}
.daimyo-slot.occupied{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset;background:#fffbe9}
.daimyo-slot .slot-ben{font-weight:600}
.daimyo-slot .slot-occ{display:inline-flex;align-items:center;gap:3px}
.daimyo-slot .slot-who{font-size:.62rem;font-weight:700;text-transform:capitalize}
.daimyo-slot .empty-slot{font-size:.62rem;color:#b3a894;font-style:italic}
/* gate */
.castle-gate{margin-top:2px;display:flex;flex-direction:column;align-items:center;gap:2px;
  background:linear-gradient(#e7d9bd,#d9c6a2);border:1px solid #c9b78f;border-radius:8px;padding:6px 18px}
.gate-svg{width:110px;height:40px}
.gate-label{font-size:.66rem;color:#6a5a3c;text-transform:uppercase;letter-spacing:.05em}
.gate-courtiers{min-height:20px}

/* grounds */
.grounds{display:flex;gap:10px;flex-wrap:wrap}
.subregion{background:#fff8ec;border:1px solid var(--line);border-radius:10px;padding:8px;min-width:120px;text-align:center}
.subregion h4{margin:0 0 6px;font-size:.8rem}
.tiny{font-size:.68rem;color:var(--muted)}

/* yards / gardens — training grounds set in sage countryside */
.yards{background:
  radial-gradient(70% 50% at 20% 100%, rgba(124,138,94,.35), transparent 60%),
  linear-gradient(#b9cc9a,#cdd7ac 58%,#dcd9b4)}
.yard-row,.garden-row{display:flex;gap:10px;flex-wrap:wrap}
.yard,.garden{background:#fff8ec;border:1px solid var(--line);border-radius:10px;padding:8px;min-width:120px}
/* Textured garden containers: Stone (river) + Plant (garden) sides each get a
   per-bridge photo behind the card; the header stays legible via a dark scrim
   and the card itself is opaque. */
.garden-art-bg{background-size:cover;background-position:center;position:relative}
/* the textures are pre-washed; a light veil adds a touch more softening */
.garden-art-bg::before{content:'';position:absolute;inset:0;border-radius:inherit;z-index:0;pointer-events:none;
  background:rgba(246,241,229,.22)}
.garden-art-bg>*{position:relative;z-index:1}   /* keep header / card / meeples above the veil */
.garden-art-bg .garden-head{color:#2a2622;text-shadow:0 1px 1px #fff;background:rgba(255,255,255,.55);
  border-radius:6px;padding:1px 7px;display:inline-flex;align-items:center;gap:5px;font-weight:700}
.garden-stone{border-color:#6b5a44;background-color:#8a8178}   /* grey stone fallback */
.garden-plant{border-color:#4e6b3f;background-color:#7f8a66}   /* green plant fallback */
/* each Yard tile = an arched wooden tablet standing on the grass */
.yard{position:relative;border-radius:18px 18px 7px 7px;border:2px solid var(--kincha);
  box-shadow:0 5px 10px -5px #2c230f80,inset 0 0 0 2px #ffffff30}
/* samurai artwork background per yard, with a light readability scrim */
.yard-art{background-size:cover;background-position:center;min-height:100px;overflow:hidden;
  background-color:#8f8274;background-blend-mode:soft-light}
.yard-art::before{content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(rgba(20,16,10,.18),rgba(20,16,10,.46));z-index:0;pointer-events:none}
.yard-art>.yard-head,.yard-art>.yard-ben,.yard-art>.yard-w{position:relative;z-index:1}
/* all yard text (header, benefits, warrior count) reads white over the artwork */
.yard-art,.yard-art .yard-head,.yard-art .yard-ben,.yard-art>.yard-w{color:#fff;text-shadow:0 1px 3px #000}
.yard-art .yard-head{font-weight:700}
.yard-art .yard-cost,.yard-art .yard-mult{z-index:1;color:#fff;background:rgba(14,11,8,.5);
  border-radius:999px;padding:1px 7px;text-shadow:0 1px 2px #000}
.yard-head,.garden-head{font-size:.75rem;color:var(--muted)}
.yard-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
/* cost in the top-right corner, VP multiplier in the bottom-right */
.yard-cost{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;gap:2px;color:#6b7177;font-weight:700;font-size:.78rem}
.yard-mult{position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;gap:2px;color:var(--accent);font-weight:700;font-size:.78rem}
.yard-ben{display:flex;flex-wrap:wrap;gap:6px;font-size:.82rem;margin:5px 0}
.yard-pill{display:inline-flex;align-items:center;gap:3px;border-radius:999px;padding:2px 9px;font-weight:700;line-height:1.4}
/* scale up the benefit glyphs on the training yards (they read too small otherwise) */
.yard-ben .ico,.yard-ben .meeple{width:22px;height:22px}
.yard-pill.yellow{background:#e9bf45;color:#4a3a0c;border:1px solid #c79a28}
.yard-pill.blue{background:#2a6fb0;color:#fff;border:1px solid #1f5a92}
.droptarget.over,.piecedrop.over{outline:3px solid var(--gold);background:#fffbe9}

/* passage of time / influence VP track */
.pot-track{display:flex;gap:3px;flex-wrap:wrap}
.pot-space{min-width:34px;min-height:46px;border:1px solid var(--line);border-radius:6px;background:#eaf2f8;
  font-size:.62rem;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:2px 1px}
.pot-space.pot-checkpoint{border-color:var(--kawara);border-width:2px;background:#f7ead3;padding-top:0}
/* season checkpoint drawn as a torii gate with its Daimyo-seal toll */
.pot-gate{display:flex;flex-direction:column;align-items:center;line-height:1;color:var(--kawara);font-size:.82rem;margin-top:1px}
.pot-gate-cost{display:inline-flex;align-items:center;gap:1px;font-size:.56rem;color:#8a2f23;font-weight:700}
.pot-pos{color:var(--muted);font-weight:600}
.pot-vp{color:var(--accent);font-weight:700;font-size:.66rem}
.pot-vp .vp{font-size:.55rem}
.pot-markers{display:flex;gap:1px;flex-wrap:wrap;justify-content:center;margin-top:auto}
/* top track blocks */
.tracks{display:flex;flex-direction:column;gap:8px;background:linear-gradient(#e7eef3,#efe8d9);position:relative;overflow:hidden}
/* cherry-blossom banner backdrop behind the tracks, lightly veiled for readable text */
.tracks-bg{position:absolute;inset:0;z-index:0;background:url('../img/cherry-tracks.jpg') center/cover;pointer-events:none}
.tracks-bg::after{content:'';position:absolute;inset:0;background:rgba(247,245,240,.72)}
.tracks-credit{position:absolute;right:8px;bottom:4px;z-index:1;font-size:.52rem;color:#6a5f52;opacity:.7;pointer-events:none}
.tracks>.track-block{position:relative;z-index:1}
.track-block h4{margin:0 0 4px;font-size:.92rem;letter-spacing:.01em;color:var(--ink);display:flex;align-items:center;gap:6px}
.trk-ico{display:inline-flex;align-items:center;flex:none}
.trk-ico svg{display:block}
.track-note{text-transform:none;letter-spacing:0;font-weight:400;color:#9a9088;font-size:.9em}
.heron-row{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.heron{display:inline-flex;align-items:center;gap:4px;background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:2px 9px;font-size:.78rem;text-transform:capitalize}
.heron.active{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold) inset;font-weight:700}
.heron-pos{font-size:.62rem;color:var(--muted);font-weight:700}
.heron-arrow{color:var(--muted)}
/* Clan Points track is long (0-40) — keep its spaces compact so they wrap tidily */
.ivp-space{min-width:23px;min-height:28px;padding:1px 0}
.ivp-space .pot-pos{font-size:.56rem}
.dot.fan{border-radius:50% 50% 50% 0}   /* fan-ish marker */
/* "+40" lap badge beside a marker that has wrapped past 40 on the CP track */
.ivp-marker{position:relative;display:inline-flex;align-items:center}
.cp-lap{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:1px;
  background:#c0392b;color:#fff;font-size:.5rem;font-weight:800;line-height:1;letter-spacing:.02em;
  padding:1px 3px;border-radius:999px;white-space:nowrap;box-shadow:0 1px 2px #0005}

/* sidebar */
#sidebar{display:flex;flex-direction:column;gap:12px;position:sticky;top:64px}
.player{background:var(--panel);border-radius:12px;padding:10px;border:1px solid var(--line)}
.player.active{outline:2px solid var(--gold)}
.player.me{border-color:var(--accent)}
.player-head{display:flex;align-items:center;gap:6px}
.player-head .cp{margin-left:auto;font-weight:700}
.player .res{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px;font-size:.85rem}
/* Daimyo-seal exchange (on your own panel; usable any time, even off-turn) */
.seal-exchange{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin:5px 0 2px;font-size:.62rem;color:var(--muted)}
.sx-cap{opacity:.85}
.seal-x{display:inline-flex;align-items:center;gap:1px;background:#fff;border:1px solid var(--line);border-radius:6px;padding:1px 5px;cursor:pointer}
.seal-x:hover:not(:disabled){background:#fffaf0;border-color:var(--ochre)}
.seal-x:disabled{opacity:.4;cursor:not-allowed}
.seal-x .ico{width:14px;height:14px;vertical-align:middle}
/* domain lines (coral=courtier, black=gardener, white=warrior) */
/* domain board = 3 lines (left) + the active action card (right, red area) */
.domain-board{display:flex;align-items:stretch;gap:6px;margin-top:7px}
.domain-lines{display:flex;flex-direction:column;gap:4px;flex:1 1 auto;min-width:0}
.dline{display:flex;align-items:center;gap:5px;background:#fff;border:1px solid var(--line);border-radius:7px;padding:3px 4px;flex:1}
.dline[data-type="courtier"]{border-left:4px solid var(--coral)}
.dline[data-type="gardener"]{border-left:4px solid #2b2b2f}
.dline[data-type="warrior"]{border-left:4px solid #cdbfa8}
.dline-slot{flex:0 0 auto;display:flex;align-items:center}
.dline-default{opacity:.55}
/* green area: the first reward gained on placing a die on the row */
.dline-first{flex:0 0 auto;display:inline-flex;align-items:center;gap:1px;font-size:.66rem;font-weight:700;
  background:#e7f6e4;border:1px solid #9cc993;border-radius:5px;padding:0 3px;min-height:19px}
.dline-spaces{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.dline-ben{display:inline-flex;align-items:center;font-size:.66rem;background:#fff6e2;border:1px solid var(--line);
  border-radius:4px;padding:0 2px;min-height:17px}
.dline-meeple{display:inline-flex}
/* red area: active action card with scrolls spanning the rows */
.domain-card{flex:0 0 86px;display:flex;flex-direction:column;background:#efe6d6;border:1px solid var(--line);
  border-radius:7px;overflow:hidden}
.domain-card.empty{align-items:center;justify-content:center;text-align:center;font-size:.6rem;color:var(--muted);
  border-style:dashed;padding:4px}
.dcard-head{font-size:.52rem;line-height:1.1;color:var(--muted);text-align:center;padding:2px 2px 1px;
  background:#2b2b2f;color:#e9e0cf;text-transform:capitalize;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcard-body{flex:1;display:flex;flex-direction:column;gap:2px;padding:2px}
.dcard-scroll{display:flex;align-items:center;gap:2px;border:1px solid #0001;border-radius:4px;padding:1px 3px;
  font-size:.62rem;min-height:0}
.dcard-eff{display:inline-flex;align-items:center;gap:1px;flex-wrap:wrap}
/* starting action card: one big centred action icon filling the card */
.dcard-single .dcard-body{padding:4px}
.dcard-single .dcard-scroll{flex:1;flex-direction:column;justify-content:center;align-items:center;gap:3px;padding:4px}
.dcard-single .scroll-dot{display:none}
.dcard-single .dcard-eff{justify-content:center;width:100%}
.dcard-single .dcard-eff .ico{width:66px;height:66px}
.sc-sep{opacity:.6;font-weight:700;padding:0 1px}
.res-glyph{color:#9a7b1c}
.ico{vertical-align:middle}
.meeple{vertical-align:middle}
.lantern{margin-left:auto}
/* player lantern area */
.player-lantern{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:7px;padding-top:6px;border-top:1px dashed var(--line)}
.pl-cap{font-size:.64rem;color:var(--gold);font-weight:700;text-transform:uppercase;letter-spacing:.04em;display:inline-flex;align-items:center;gap:3px}
.lant-n{background:var(--gold);color:#2b2b2f;border-radius:8px;padding:0 5px;font-weight:700}
.pl-base{display:inline-flex;align-items:center;gap:1px;font-size:.66rem;background:#fff6e2;border:1px dashed var(--gold);border-radius:5px;padding:0 3px}
.lant-card{display:inline-flex;align-items:center;gap:1px;font-size:.66rem;background:#efe6d6;border:1px solid var(--line);border-radius:5px;padding:0 3px}
.lant-empty{font-size:.64rem;color:var(--muted);font-style:italic}
.vp{font-size:.7rem;color:var(--accent)}
.log{background:var(--washi-deep);color:#5f5240;border-radius:12px;padding:10px;font-size:.78rem;min-height:40px;
  border:1px solid var(--line)}

/* action bar — a washi guidance strip (ink on paper), like a mokkan slip */
.actionbar{position:sticky;bottom:0;display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  background:linear-gradient(var(--washi),var(--washi-deep));padding:10px 16px;
  border-top:2px solid var(--kincha);box-shadow:0 -4px 16px -8px #3a2c1a66;z-index:20}
.actionbar .hint{color:var(--muted);font-size:.85rem;margin-right:6px}
.actionbar .guide{color:var(--ink);font-size:.95rem;margin-right:10px;width:100%;flex-basis:100%}
.actionbar .guide b{color:var(--kincha)}
.chip{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:.4em .9em;font-size:.85rem;
  box-shadow:0 1px 2px #0001}
.chip:hover{background:#fffaf0;border-color:var(--ochre)}
/* Confirm / Cancel turn controls — right-aligned in the action bar */
.turn-controls{margin-left:auto;display:inline-flex;align-items:center;gap:8px;padding-left:12px}
.confirm-chip{font-weight:700}
.confirm-chip:disabled,.confirm-chip[disabled]{background:#cabfa9;border-color:#cabfa9;color:#fff;cursor:not-allowed;opacity:.75}
.cancel-chip:disabled,.cancel-chip[disabled]{opacity:.45;cursor:not-allowed}
@media (max-width:820px){ .turn-controls{margin-left:0;width:100%;justify-content:flex-end;padding-left:0;padding-top:4px} }

/* modal */
.modal{position:fixed;inset:0;background:#0008;display:flex;align-items:center;justify-content:center;z-index:50}
/* active player's domain board, pinned above any input modal so it stays visible */
#pinned-domain{position:fixed;top:0;left:0;right:0;z-index:60;background:rgba(245,239,226,.985);
  border-bottom:3px solid var(--accent);box-shadow:0 6px 18px #0006;padding:7px 14px;
  display:flex;align-items:center;gap:16px;overflow-x:auto}
#pinned-domain .pin-cap{flex:0 0 auto;font-weight:800;color:var(--accent);font-size:.68rem;text-transform:uppercase;letter-spacing:.05em}
#pinned-domain .player{border:none;background:none;padding:0;margin:0;display:flex;flex-direction:row;
  align-items:center;gap:18px;flex:1 1 auto;min-width:max-content}
#pinned-domain .player-head,#pinned-domain .res,#pinned-domain .domain-board,#pinned-domain .player-lantern{margin:0}
#pinned-domain .player-lantern{padding-top:0;border-top:none}
/* the Well, pinned to the right of your board — compact, horizontal */
#pinned-domain .pin-well{flex:0 0 auto;margin-left:auto;padding:0 0 0 14px;border:none;background:none;
  border-left:2px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:2px;min-width:max-content}
#pinned-domain .pin-well h3{margin:0;font-size:.66rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
#pinned-domain .pin-well .well-body{display:flex;align-items:center;gap:8px}
#pinned-domain .pin-well .well-svg{width:42px;height:auto}
#pinned-domain .pin-well .well-info{display:flex;flex-direction:column;gap:2px}
#pinned-domain .pin-well .well-benefits{display:flex;align-items:center;gap:4px;flex-wrap:wrap;font-size:.66rem}
#pinned-domain .pin-well .wb-cap,#pinned-domain .pin-well .wb-note{font-size:.6rem;color:var(--muted)}
#pinned-domain .pin-well .dice-slot{margin:0}
body.has-pin .modal{align-items:flex-start;padding-top:170px}
.modal-box{background:var(--panel);padding:24px;border-radius:14px;text-align:center;max-height:92vh;overflow-y:auto}
/* when the active-player board is pinned at the top, leave room for it */
body.has-pin .modal-box{max-height:calc(100vh - 190px)}
.modal-box.wide{max-width:min(94vw,700px);text-align:left}
/* clickable player name → turn history */
/* End-of-round Garden Harvest banner */
.garden-harvest{background:linear-gradient(#f3efd9,#e7e2c2);border:2px solid #8aa35e;border-radius:12px}
.garden-harvest h3 .sec-ico{filter:none}
.garden-harvest .sec-sub{font-style:normal;opacity:1;color:#4a4330}
.gh-plan{display:flex;flex-direction:column;gap:5px;margin-top:8px}
.gh-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:4px 8px;border-radius:8px;background:#ffffff80;font-size:.86rem}
.gh-row.gh-active{background:#fff6d6;box-shadow:0 0 0 2px var(--gold) inset;font-weight:700}
.gh-row .dot{width:12px;height:12px;display:inline-block}
.gh-now{color:#9a6a00;font-size:.72rem;font-weight:800}
.gh-arrow{color:var(--muted)}
.gh-toks{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap}
.gh-tok .ico{width:18px;height:18px;vertical-align:middle}
.gh-none{color:var(--muted)}
/* per-garden harvest highlight */
.garden-harvesting{box-shadow:0 0 0 3px #7bbf53,0 0 12px #7bbf5388!important;z-index:2}
.garden-skipped{filter:grayscale(.5) brightness(.9);opacity:.75}
.garden-hbadge{position:absolute;top:3px;left:3px;z-index:3;font-size:.6rem;font-weight:800;border-radius:999px;padding:1px 6px;box-shadow:0 1px 3px #0004}
.garden-hbadge.ok{background:#3e7d4f;color:#fff}
.garden-hbadge.skip{background:#7a7064;color:#fff}
.pname-link{cursor:pointer;border-bottom:1px dotted currentColor}
.pname-link:hover{color:var(--accent)}
/* turn-history modal */
.history-modal .modal-box h3 .dot{width:12px;height:12px;display:inline-block;vertical-align:middle;margin-right:5px}
.hist-body{max-height:62vh;overflow-y:auto;margin:6px 0}
.hist-empty{color:var(--muted);padding:14px;text-align:center}
/* turn history as a grid: Round | Dice taken/placed | Actions | Costs/gains */
.hist-table{width:100%;border-collapse:collapse;font-size:.82rem}
.hist-table th{position:sticky;top:0;background:var(--panel);text-align:left;font-weight:800;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.03em;color:var(--kincha);border-bottom:2px solid var(--line);padding:6px 8px;z-index:1}
.hist-table td{padding:6px 8px;border-bottom:1px solid #00000010;vertical-align:top}
.hist-table .h-round{text-align:center;vertical-align:middle;font-weight:800;font-size:1.05rem;color:var(--kincha);
  background:#0000000a;border-right:1px solid var(--line)}
.h-dice{display:flex;align-items:center;gap:5px;flex-wrap:wrap;font-weight:700}
.h-dice .ico,.h-dice .die-svg{vertical-align:middle}
.h-lbl{font-weight:600;color:var(--muted)}
.h-arrow{color:var(--muted)}
.h-act{display:inline-flex;align-items:center;gap:3px;background:#efe6d6;border-radius:5px;padding:1px 6px;margin:1px 3px 1px 0;white-space:nowrap}
.h-act .ico,.h-act .meeple{width:15px;height:15px;vertical-align:middle}
.hist-table td:last-child{display:table-cell}
.h-gain{display:inline-flex;align-items:center;gap:1px;color:#2e7d32;font-weight:700;margin-right:5px}
.h-pay{display:inline-flex;align-items:center;gap:1px;color:var(--accent);font-weight:700;margin-right:5px}
.h-gain .ico,.h-pay .ico{width:15px;height:15px;vertical-align:middle}
.h-sep{color:#cbbfa6}
/* lantern reward acknowledgement */
.lantern-modal .lant-reward{font-size:1.05rem;margin:10px 0 2px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.lantern-modal .lant-reward .ico{width:24px;height:24px;vertical-align:middle}
.lant-reward-item{display:inline-flex;align-items:center;gap:3px;font-weight:700}
/* end-game scoreboard */
.confetti-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9999}
.endgame-winner{text-align:center;font-size:1.02rem;margin:2px 0 14px}
.endgame-winner .dot{width:12px;height:12px;vertical-align:middle;margin-right:4px}
/* keep the end-game modal within the viewport and let the score table scroll
   horizontally inside it (so no player column is ever clipped on mobile) */
.endgame .modal-box{max-width:min(760px,94vw)}
.score-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px}
.score-scroll .score-table{min-width:max-content}
/* the Source (row-label) column stays put while the player columns scroll */
.score-table td.sc-src,.score-table th.sc-src{position:sticky;left:0;background:var(--panel);z-index:1}
.score-table{width:100%;border-collapse:collapse;font-size:.84rem}
.score-table th,.score-table td{padding:5px 10px;text-align:center;border-bottom:1px solid var(--line)}
.score-table th .dot{width:10px;height:10px;display:inline-block;vertical-align:middle;margin-right:3px}
.score-table td.sc-src,.score-table th.sc-src{text-align:left;white-space:nowrap}
.score-table td.sc-src .ico{vertical-align:middle;margin-right:5px}
.score-table .sc-win{background:rgba(227,180,60,.18)}
.score-table td.sc-win{font-weight:700}
.score-table td.sc-zero{color:#b8ab93}
.score-table .total-row td{border-top:2px solid var(--ink);border-bottom:none;font-weight:800;font-size:.98rem;padding-top:8px}
.pick-row{display:flex;gap:12px;margin:12px 0}
.pick{display:flex;flex-direction:column;align-items:center;gap:4px;background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:12px 16px}
.pick:hover{background:#fffbe9}
.pick-count{color:var(--muted)}
/* choice modal (2-step die placement) — explicit width so the option grid can
   lay out in multiple columns (not collapse to one in the centering flexbox). */
.modal-box.choose{width:min(94vw,760px);max-width:none;text-align:left}
.modal-sub{color:var(--muted);margin:.2em 0 1em;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.modal-sub .die{vertical-align:middle}
.tag-lantern{background:var(--gold);color:#3a2d00;border-radius:999px;padding:.05em .6em;font-size:.72rem;font-weight:700}
.choose-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-bottom:12px}
.choose-opt{min-width:0}
.choose-opt{text-align:left;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px;
  cursor:pointer;display:flex;flex-direction:column;gap:3px;font:inherit;color:inherit}
.choose-opt:hover:not(:disabled){background:#fffbe9;border-color:var(--gold);transform:translateY(-2px)}
.choose-opt:disabled{opacity:.45;cursor:not-allowed}
/* options led by a big icon (e.g. Outside-the-Walls action chooser) centre it */
.choose-opt .opt-icon{display:flex;justify-content:center;margin-bottom:4px}
.choose-opt:has(.opt-icon){text-align:center;align-items:center}
.choose-opt b{font-size:.9rem}
.opt-sub{font-size:.7rem;color:var(--muted)}
.opt-cost{display:inline-flex;align-items:center;gap:1px;font-size:.72rem;color:#8a5a2b;font-weight:700}
.opt-no{font-size:.66rem;color:var(--accent);font-weight:600}
.opt-bens{display:flex;flex-wrap:wrap;gap:3px;margin:2px 0;align-items:center}
.opt-bens .ico{width:20px;height:20px;vertical-align:middle}
.opt-ben{background:#efe6d6;border-radius:4px;padding:1px 5px;font-size:.68rem}
/* option header: a clan meeple + the garden name + a side tag */
.opt-head{display:flex;align-items:center;gap:6px}
.opt-head .meeple{flex:0 0 auto}
.modal-box h3 .meeple{vertical-align:middle}
.opt-tag{font-size:.64rem;font-weight:700;text-transform:capitalize;padding:1px 7px;border-radius:999px;color:#4a3a2a}
.opt-tag-garden{background:#d7ebc9;border:1px solid #a9ca8c}
.opt-tag-river{background:#cfe0ea;border:1px solid #9cbdcf}
/* permitted-action icons shown on an "Outside the Walls" slot option */
.opt-acts{display:flex;gap:6px;align-items:center;margin:4px 0 2px}
.opt-act{display:inline-flex}
.opt-ben.vp{background:#f6dcd6;color:var(--accent);font-weight:700}
.opt-bad{color:#a9401f;font-style:italic}
.choose-opt:disabled .opt-sub{color:#b3a894}
.coin-gain{color:var(--green);font-weight:700}
.coin-pay{color:var(--accent);font-weight:700}
.coin-nil{color:var(--muted)}
.confirm-coin{text-align:center;margin:12px 0;font-size:1.1rem}
.confirm-coin .big-coin{font-size:1.5rem;display:inline-flex;align-items:center;gap:4px;vertical-align:middle}
.confirm-row{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}
.modal-cancel{align-self:flex-end}
/* clickable dice + drafted prompt */
.clickable-die{cursor:pointer;transition:transform .08s}
.clickable-die:hover{transform:translateY(-3px) scale(1.06)}
.chip.big{font-weight:700;background:var(--accent);border-color:#b23c22;color:#fff}
.act-hint{color:var(--kincha) !important;font-weight:700}
.chip.act-scroll{background:var(--ai);border-color:#1f2b45;color:#f1e8d4;box-shadow:0 0 0 2px rgba(44,58,84,.28);display:inline-flex;align-items:center;gap:3px}
.chip.act-scroll:hover{background:var(--ai-soft)}
.chip.act-scroll em{font-weight:400;font-size:.82em;opacity:.9}
/* an already-activated scroll this turn: greyed + unclickable (reset on cancel) */
.chip.act-scroll.done,.chip.act-scroll:disabled{background:#8a8577;border-color:#6f6a5d;color:#efe9db;
  box-shadow:none;opacity:.6;cursor:not-allowed;filter:grayscale(.3)}
.chip.act-scroll.done:hover{background:#8a8577}
.drafted-die{display:inline-flex;vertical-align:middle;margin:0 4px}
.pending-hint{color:#9a6a1c;font-weight:700}
.pending-item{display:inline-flex;align-items:center;gap:2px;margin:0 2px}
.pending-item .chip.big{background:var(--gold);color:#3a2d00;border-color:#b8922a;display:inline-flex;align-items:center;gap:3px}
.pending-item .chip.big .ico,.pending-item .chip.big .meeple{width:19px;height:19px;vertical-align:middle}
.pending-item .chip.big .sc-sep{font-weight:700}
.pending-item .chip.big .scroll-eff{display:inline-flex;align-items:center;gap:3px}
.pending-item .chip em{font-weight:400;font-size:.8em;opacity:.8}
.chip.skip{background:var(--washi-deep);color:#6a5a44;border-color:var(--line);padding:.4em .6em}
.actionbar .sep{width:1px;align-self:stretch;background:var(--line);margin:0 6px}

/* debug modal — raw game state + ledger dump */
.dbg-box{max-width:940px;width:94vw;max-height:88vh;display:flex;flex-direction:column;text-align:left}
.dbg-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dbg-head h3{margin:0;font-size:1.15rem}
.dbg-actions{display:flex;gap:6px}
.dbg-meta{font-size:.68rem;color:var(--muted);font-family:ui-monospace,monospace;margin:2px 0 8px}
/* tabs: States · Ledgers · Reference Data */
.dbg-tabs{display:flex;gap:4px;border-bottom:2px solid var(--line);margin-bottom:8px}
.dbg-tab{background:transparent;border:1px solid var(--line);border-bottom:none;border-radius:8px 8px 0 0;
  padding:.4em .9em;font-weight:700;color:var(--muted);font-size:.85rem}
.dbg-tab:hover{background:var(--washi)}
.dbg-tab.active{background:#fff;color:var(--ink);margin-bottom:-2px;border-bottom:2px solid #fff}
.dbg-panels{overflow:auto;flex:1 1 auto;min-height:0}  /* min-height:0 lets it scroll inside the flex box */
.dbg-panel{display:none}
.dbg-panel.active{display:block}
.dbg-table{border:1px solid var(--line);border-radius:8px;background:#fff;overflow:hidden;margin-bottom:6px}
.dbg-table:last-child{margin-bottom:0}
.dbg-table>summary{cursor:pointer;padding:6px 10px;font-weight:700;font-family:ui-monospace,monospace;font-size:.8rem;color:var(--ink)}
.dbg-table>summary:hover{background:var(--washi)}
.dbg-count{color:var(--muted);font-weight:400}
.dbg-pre{margin:0;padding:9px 11px;max-height:340px;overflow:auto;font-size:.72rem;line-height:1.4;
  background:#1c1814;color:#d7e4c4;white-space:pre;font-family:ui-monospace,monospace}
.dbg-empty{color:var(--muted);text-align:center;padding:20px}

/* toast */
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#1c1814;color:#fff;
  padding:.7em 1.2em;border-radius:999px;z-index:60;box-shadow:0 6px 20px #0007}
/* instant tooltip (no hover delay, no transition) */
.wc-tip{position:fixed;z-index:9999;pointer-events:none;background:#1c1814f2;color:#f3ece0;font-size:.72rem;
  line-height:1.3;padding:3px 8px;border-radius:6px;max-width:240px;box-shadow:0 4px 14px #0007;
  display:none;text-transform:none;letter-spacing:normal;font-weight:400}
.wc-tip.show{display:block}
/* callout bubble — used by the "How To Play" guided tour */
.callout{position:fixed;z-index:200;max-width:300px;background:#1c1814f5;color:#f3ece0;border:1px solid var(--gold);
  border-radius:10px;padding:12px 14px;box-shadow:0 10px 30px #0009;font-size:.84rem;line-height:1.45}
.callout-body{padding-right:12px}
.callout-x{position:absolute;top:3px;right:6px;background:none;border:none;color:#f3ece0;font-size:1rem;cursor:pointer;opacity:.75;line-height:1}
.callout-x:hover{opacity:1}
.callout-arrow{position:absolute;left:-10px;top:22px;width:0;height:0;border:10px solid transparent;border-right-color:var(--gold)}
/* when the bubble sits to the LEFT of its target, flip the arrow to the right edge */
.callout.flip .callout-arrow{left:auto;right:-10px;border-right-color:transparent;border-left-color:var(--gold)}
.hint-pulse{animation:hintpulse 1.3s ease-in-out infinite}
@keyframes hintpulse{0%,100%{box-shadow:0 0 0 0 rgba(226,181,60,0)}50%{box-shadow:0 0 0 5px rgba(226,181,60,.6)}}
/* tour-specific chrome: title + Back/Next nav */
.tour-callout{max-width:320px;padding-top:14px}
.callout-title{font-weight:800;font-size:.96rem;color:var(--gold);margin:0 16px 6px 0}
.callout-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.callout-step{font-size:.74rem;opacity:.7}
.callout-btns{display:flex;gap:8px}
.callout-nav button{font-size:.8rem;padding:4px 12px;border-radius:7px;cursor:pointer}
.callout-nav .callout-prev{background:none;border:1px solid #ffffff55;color:#f3ece0}
.callout-nav .callout-next{background:var(--gold);border:1px solid var(--gold);color:#1c1814;font-weight:700}
/* the board area the current tour step is pointing at */
.tour-target{outline:2px solid var(--gold);outline-offset:3px;border-radius:8px;transition:outline .15s}

/* zen-music toggle — lives in the top-bar button row */
#musicToggle.music-btn{width:36px;height:36px;padding:0;border-radius:50%;font-size:1rem;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;transition:transform .15s,box-shadow .15s}
#musicToggle:hover{transform:scale(1.08)}
#musicToggle.on{border-color:var(--gold);box-shadow:0 0 0 2px #e2b53c55}
/* fallback floating variant (screens without the top bar) */
#musicToggle.music-floating{position:fixed;top:10px;right:12px;z-index:70;width:38px;height:38px;border-radius:50%;
  border:1px solid #5a4e40;background:#1c1814cc;color:#f3ece0;font-size:1.05rem;cursor:pointer;
  box-shadow:0 3px 10px #0006;display:flex;align-items:center;justify-content:center;line-height:1;backdrop-filter:blur(3px)}

/* "Suggest A Move" modal — heuristic hint for the current player */
.suggest-modal .modal-box{max-width:520px;text-align:left}
.suggest-modal h3{text-align:left;display:flex;align-items:center;gap:8px}
.suggest-modal .sg-for{font-weight:400;color:var(--muted);font-size:.8rem}
.sg-best{font-size:1.02rem;background:#fff8ec;border:1px solid var(--gold);border-radius:10px;padding:11px 13px;margin:6px 0 10px}
.sg-lines .sg-line,.sg-alts .sg-line{font-size:.86rem;color:#4a3a2a;margin:2px 0}
.sg-score{font-size:.72rem;color:var(--muted)}
.sg-alts-cap{font-size:.8rem;font-weight:700;color:var(--muted);margin:10px 0 4px}
.sg-alts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.sg-alts li{border:1px solid var(--line);border-radius:8px;padding:7px 10px;background:#fffdf7}
.sg-alt-sum{font-size:.9rem;margin-bottom:2px}
.sg-note{font-size:.76rem;color:var(--muted);margin:12px 0 4px;font-style:italic}

/* Experimental turn animation: the drafted die flies to where it was placed. */
.fly-die{position:fixed;z-index:300;pointer-events:none;will-change:transform;
  transition:transform 1.5s cubic-bezier(.34,.9,.3,1);filter:drop-shadow(0 5px 10px #0008)}
.fly-die svg{display:block}
.anim-target{animation:anim-target-pulse 1.6s ease-out}
@keyframes anim-target-pulse{
  0%{box-shadow:0 0 0 0 rgba(226,181,60,.85)}
  100%{box-shadow:0 0 0 14px rgba(226,181,60,0)}}

/* Chained-effect animations: resources / meeples / cards flying to their spot. */
.fly-node{position:fixed;z-index:300;pointer-events:none;will-change:transform;transform:translate(-50%,-50%);
  transition:transform 1.1s cubic-bezier(.34,.9,.3,1);filter:drop-shadow(0 4px 8px #0007)}
.fly-node svg{display:block}
.fly-res-group{display:inline-flex;align-items:center;gap:3px;background:#fff8ec;border:1px solid var(--gold);
  border-radius:999px;padding:2px 8px;font-weight:800;color:#5a4a1a;font-size:.92rem;white-space:nowrap}
.fly-res{display:inline-flex;align-items:center;gap:1px}
.fly-res .ico{width:24px;height:24px;vertical-align:middle}
.fly-card{width:26px;height:36px;border-radius:4px;background:linear-gradient(#f7bd71,#ef9a3d);border:1px solid #cf8026}

/* ===== Cinematic game-start: ancient-scroll lore modal ===== */
.scroll-ov{position:fixed;inset:0;z-index:600;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at center,#0006,#000a);opacity:0;transition:opacity .6s ease;padding:20px}
.scroll-ov.shown{opacity:1}
.scroll-ov.closing{opacity:0}
.scroll-paper{position:relative;max-width:560px;width:100%;max-height:90vh;display:flex;flex-direction:column;
  transform:translateY(16px) scale(.97);transition:transform .6s cubic-bezier(.2,.8,.3,1);filter:drop-shadow(0 18px 40px #000a)}
.scroll-ov.shown .scroll-paper{transform:none}
.scroll-roll{height:22px;border-radius:11px/50%;flex:0 0 auto;
  background:linear-gradient(#6b4a28,#4a3015 45%,#3a260f 55%,#5a3c1e);box-shadow:inset 0 2px 4px #0005,0 2px 6px #0007}
.scroll-roll.top{margin-bottom:-6px}
.scroll-roll.bottom{margin-top:-6px}
.scroll-body{overflow-y:auto;padding:30px 34px;color:#3a2a14;line-height:1.65;font-size:1rem;
  background:
    radial-gradient(ellipse at 50% 0,#0000,#0000 70%,#00000014),
    linear-gradient(#f3e4c0,#ead3a3 55%,#e3c993);
  border-left:3px solid #c9a86a;border-right:3px solid #c9a86a;
  box-shadow:inset 0 0 50px #b98c4833,inset 0 0 12px #0000001a}
.scroll-title{font-family:"Shippori Mincho B1","Yu Mincho",serif;text-align:center;font-size:2rem;color:#5a3c1e;
  margin:0 0 4px;letter-spacing:.04em}
.scroll-title span{display:block;font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;color:#8a5a2b;margin-top:4px}
.scroll-body p{margin:.7em 0;text-align:justify;font-family:Georgia,"Times New Roman",serif}
.scroll-sign{text-align:center !important;font-size:1.08rem;margin-top:1.1em !important;color:#5a3c1e}
.scroll-close{display:block;margin:18px auto 2px;background:#5a3c1e;border:1px solid #3a260f;color:#f3e4c0;
  font-family:"Shippori Mincho B1",serif;font-size:1rem;padding:8px 26px;border-radius:8px;cursor:pointer}
.scroll-close:hover{background:#6b4a28}

/* "Not your turn" modal — whose turn + a line of Japanese patience wisdom */
.wait-modal .modal-box{max-width:420px}
.wait-modal h3{display:flex;align-items:center;gap:8px;justify-content:center}
.wait-modal h3 .dot{width:13px;height:13px;border-radius:50%;display:inline-block}
.wait-sub{color:var(--muted);margin:2px 0 14px;font-size:.9rem}
.wait-proverb{background:linear-gradient(#f3e4c0,#e6d2a4);border:1px solid #c9a86a;border-radius:12px;
  padding:16px 18px;box-shadow:inset 0 0 24px #b98c4826}
.wp-jp{font-family:"Shippori Mincho B1","Yu Mincho",serif;font-size:1.7rem;color:#5a3c1e;letter-spacing:.06em}
.wp-ro{font-style:italic;color:#8a5a2b;font-size:.86rem;margin-top:4px}
.wp-en{color:#3a2a14;font-family:Georgia,serif;font-size:.94rem;line-height:1.5;margin-top:9px}

/* elapsed-time clock in the top bar (dark navy bar → light text) */
.game-timer{font-variant-numeric:tabular-nums;font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-size:.92rem;font-weight:700;color:#f0e9d8;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.2);border-radius:7px;padding:4px 9px;letter-spacing:.03em;white-space:nowrap}

/* Enlarge all iconography inside the Castle (resources, dice, tiles, meeples) */
.castle .ico,
.castle .meeple,
.castle .die,
.castle .dietile-svg{zoom:1.3}

/* Larger clan meeples in the Gardens (gardeners) & Training Yards (warriors) */
.rivergarden .meeple,
.yards .meeple{zoom:1.3}

/* ===== Force landscape on phones: portrait "please rotate" overlay ===== */
#rotate-prompt{display:none}
@media (orientation: portrait) and (pointer: coarse) and (max-width: 900px){
  #rotate-prompt{display:flex;position:fixed;inset:0;z-index:10000;align-items:center;justify-content:center;
    padding:32px;text-align:center;color:#3a2a14;
    background:radial-gradient(ellipse at center,#f3e4c0,#e3c993)}
  .rotate-inner{max-width:420px}
  .rotate-icon{font-size:4.5rem;line-height:1;margin-bottom:10px;display:inline-block;
    animation:rotate-hint 2.4s ease-in-out infinite;transform-origin:50% 50%}
  #rotate-prompt h2{font-family:"Shippori Mincho B1","Yu Mincho",serif;font-size:1.7rem;color:#5a3c1e;margin:.2em 0 .4em}
  #rotate-prompt p{font-family:Georgia,serif;font-size:1.02rem;line-height:1.6;margin:0}
  /* keep the game from scrolling/rendering behind the opaque overlay */
  body{overflow:hidden}
}
@keyframes rotate-hint{0%,35%{transform:rotate(0)}55%,80%{transform:rotate(-90deg)}100%{transform:rotate(-90deg)}}

/* On mobile (touch) the "Xth Floor — Type" castle label is too wide — hide it,
   leaving just the rooms. Desktop keeps the descriptor. */
@media (pointer: coarse){
  .castle .floor-tag{display:none}
}

/* ===== Mobile medium-severity fixes (MOBILE_TEST.md #3,#4,#5) ===== */

/* #4 — stack the lobby Create/Join columns on narrow screens */
@media (max-width: 680px){
  .lobby-cols{grid-template-columns:1fr;gap:12px}
  .lobby-card{padding:22px}
  .divider{padding:2px 0}
  .divider::before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:var(--line)}
  .divider span{position:relative;z-index:1}
}

/* #5 — compact sticky top bar on touch devices (saves vertical space in landscape) */
@media (pointer: coarse){
  #topbar{padding:6px 10px;gap:5px 10px}
  #topbar .brand{font-size:.95rem;flex:0 1 auto}      /* don't force onto its own row */
  #topbar .turn{padding:.22em .6em}
  #topbar .turn,#topbar .round,#topbar .game-timer{font-size:.78rem}
  #topbar .game-timer{padding:3px 6px}
  #topbar .actions{gap:6px}
  #topbar .actions button{padding:.3em .55em;font-size:.72rem}
  #topbar .music-btn{width:30px;height:30px}

  /* #3 — compact the pinned "Your board" + Well strip so more fits (it already
     scrolls horizontally via overflow-x:auto for anything that doesn't). */
  #pinned-domain{padding:5px 9px;gap:10px}
  #pinned-domain .player{gap:10px}
  #pinned-domain .res{font-size:.8rem}
  /* omit the pinned Well on mobile — it pushed the strip off-screen; it stays on
     the main board. Your resources + domain board remain pinned (scroll if wide). */
  #pinned-domain .pin-well{display:none}
  #pinned-domain .pin-cap{font-size:.6rem}
}

/* ===== Mobile: players as a horizontal swipe carousel, own board first =====
   Desktop (mouse / no pointer:coarse) keeps the vertical stack unchanged. */
@media (pointer: coarse){
  #players{display:flex;flex-direction:row;flex-wrap:nowrap;gap:10px;overflow-x:auto;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:6px}
  #players > .player{flex:0 0 86%;max-width:380px;min-width:0;scroll-snap-align:start}
  #players > .player.me{order:-1}   /* your own domain board is always first */
}

/* ===== Mobile low-severity polish (MOBILE_TEST.md #6, #7) ===== */
/* #6 — bigger dice + clan meeples in the domain rows on touch (legibility + tap) */
@media (pointer: coarse){
  .domain-board .die,
  .domain-board .meeple{zoom:1.3}
  .dline{padding:4px 5px;gap:6px}
}
/* #7 — keep the (intentional) decree fade but shadow its text/icons so it stays
   legible over the transparent lower edge */
.offer-decree{text-shadow:0 1px 1px #0009}
.offer-decree .ico{filter:drop-shadow(0 1px 1px #0007)}