/* Three Feasts game screen — tokens from the design manual (art.js THEME). */
:root { --paper: #F6EEE4; --card: #FFFDF9; --ink: #2A211C; --muted: #7A6B60; --accent: #C97A00; --accent-dark: #8a5400; --wood: #E0C6AD; --me: #EA2508; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--wood); color: var(--ink); font: 15px/1.4 Rubik, system-ui, sans-serif; display: flex; flex-direction: column; overflow: hidden; }
button { font: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .42; }

/* top bar */
#top { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--ink); color: var(--paper); flex-wrap: wrap; }
#top .grow { flex: 1; }
#who { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
#who i { width: 14px; height: 14px; border-radius: 3px; display: inline-block; box-shadow: inset 0 -3px 0 #0003; }
.ghost { background: none; color: var(--paper); border: 1px solid #ffffff4d; border-radius: 8px; padding: 6px 10px; font-size: 14px; text-decoration: none; }
.primary { background: var(--accent); color: #fff; border: 0; border-radius: 9px; padding: 9px 16px; font-weight: 700; box-shadow: 0 3px 0 var(--accent-dark); min-height: 40px; }
.primary:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--accent-dark); }

/* layout */
#app { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 10px; padding: 10px; min-height: 0; }
#stage { position: relative; isolation: isolate; background: var(--paper); border-radius: 12px; overflow: hidden; min-height: 0; touch-action: none; }
#sea { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: -1; pointer-events: none; } /* the live sea (ambient.js), under the board */
#folk { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; } /* the folk (folk.js), over the board, under the effects */
#board { width: 100%; height: 100%; }
#board svg { width: 100%; height: 100%; display: block; user-select: none; overflow: visible; } /* the sea runs on past the board's frame */
#board [data-id] { cursor: pointer; }
#zoom { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; }
#zoom button { width: 40px; height: 40px; border-radius: 10px; border: 0; background: var(--card); box-shadow: 0 2px 6px #0002; font: 700 20px Rubik; color: var(--ink); }
.good svg, .pillar svg, .opt svg, .cost svg, .mk-head svg, .slot svg { flex: none; }
#end.warn { background: #b4232f; box-shadow: 0 3px 0 #7a1720; }

.panel { background: var(--card); border-radius: 12px; padding: 10px 12px; }
.panel h3 { font: 13px Bungee, sans-serif; letter-spacing: .5px; margin: 0 0 8px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.panel h3 .sub { font: 500 12px Rubik; color: var(--muted); margin-left: auto; letter-spacing: 0; }

/* storehouse + pillars */
.store { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.good { background: var(--paper); border-radius: 9px; padding: 4px 2px 6px; text-align: center; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: transform .15s; }
.good:hover { transform: translateY(-1px); }
.good:active { transform: scale(.97); }
.good svg { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.good b { font: 700 18px Rubik; font-variant-numeric: tabular-nums; display: inline-block; }
/* the hoard (play.js): cubes in flight, a count that bumps as each lands, a heap that jostles when tapped, gold that glints */
.flycube { position: fixed; z-index: 30; pointer-events: none; will-change: transform; filter: drop-shadow(0 5px 4px #2A211C40); }
.flycube svg { display: block; }
.good b.bump { animation: bump 240ms cubic-bezier(.2,1.7,.4,1); }
@keyframes bump { from { transform: scale(1.35); color: var(--accent-dark); } to { transform: none; } }
.heap .ck-drop { animation: hoardland 300ms cubic-bezier(.2,1.5,.4,1) both; }
@keyframes hoardland { from { transform: translateY(-7px) scale(1.06, .9); opacity: 0; } 50% { opacity: 1; } to { transform: none; } }
.good.jostle .heap svg > g { transform-box: fill-box; transform-origin: 50% 100%; animation: jostle 420ms cubic-bezier(.3,1.4,.5,1); }
.good.jostle .heap svg > g:nth-child(3n) { animation-delay: 40ms; }
.good.jostle .heap svg > g:nth-child(3n + 1) { animation-delay: 80ms; animation-duration: 380ms; }
@keyframes jostle { 0% { transform: none; } 30% { transform: translateY(-2.4px) rotate(-5deg); } 60% { transform: translateY(.4px) rotate(3deg); } 100% { transform: none; } }
.hoard-glint { animation: hoardglint 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes hoardglint { 0%, 70%, 100% { opacity: 0; transform: scale(.4); } 80% { opacity: 1; transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .good.jostle .heap svg > g, .heap .ck-drop, .hoard-glint, .good b.bump { animation: none; } }
.good small { display: block; color: var(--muted); font-size: 11px; }
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.pillar { background: var(--paper); border-radius: 9px; padding: 6px 4px; text-align: center; border: 2px solid transparent; }
.pillar.weak { border-color: var(--accent); }
.pillar b { font: 700 17px Rubik; }
.pillar small { display: block; color: var(--muted); font-size: 11px; }
.score { margin-top: 8px; font-size: 14px; }
/* the tracks: a ladder per pillar, every kingdom's cube on it (stacked where they tie), yours larger; your weakest outlined */
#tracks .trk { padding: 8px 0 6px; border-bottom: 1px solid #0000000f; }
#tracks .trk:last-child { border-bottom: 0; }
#tracks .trk.weak { background: #FFF4DE; border-radius: 10px; padding: 8px; margin: 4px -8px; box-shadow: inset 0 0 0 2px var(--accent); border-bottom: 0; }
#tracks .trk.total { margin-top: 4px; border-top: 2px solid #2A211C26; padding-top: 10px; }
.trk-h { display: flex; align-items: center; gap: 6px; font-size: 14px; min-height: 26px; }
.trk-h svg { flex: none; }
.trk-h .v { font: 700 18px Rubik; margin-left: 2px; }
.trk-h small { color: var(--muted); font-size: 12px; }
.trk-h em { margin-left: auto; font: 700 11px Rubik; text-transform: uppercase; letter-spacing: .5px; color: #8a5400; font-style: normal; white-space: nowrap; }
.trk-h em.pay { display: inline-flex; align-items: center; gap: 3px; font: 700 14px Rubik; text-transform: none; letter-spacing: 0; color: var(--ink); } /* the next Reckoning's pay for your place, were it now (0.56) */
.trk-h em.pay.none { color: var(--muted); font-weight: 600; font-size: 12px; }
.rkns { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 2px 0; } /* the Reckonings: held and to come */
.rkn { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px 3px 6px; border-radius: 999px; background: #2A211C0d; font: 600 12px Rubik; color: var(--muted); font-variant-numeric: tabular-nums; }
.rkn small { font-size: 11px; }
.rkn.soon { background: #F2B65538; color: #8A5400; }
.rkn.done { color: var(--ink); }
.rkn i { font-style: normal; font-weight: 700; margin-left: 2px; }
.ladder { position: relative; height: var(--h, 40px); margin: 2px 10px 0; }
.ladder::before { content: ''; position: absolute; left: 0; right: 0; bottom: 13px; height: 4px; border-radius: 2px; background: #2A211C1f; }
.ladder > span { position: absolute; bottom: 0; transform: translateX(-50%); font-size: 11px; line-height: 1; color: var(--muted); font-variant-numeric: tabular-nums; }
.ladder > span::before { content: ''; position: absolute; left: 50%; bottom: 12px; width: 1px; height: 6px; background: #2A211C40; }
.ladder .tmk { position: absolute; bottom: calc(15px + var(--j) * 10px); transform: translateX(-50%); line-height: 0; z-index: 1; }
.ladder .tmk.me { z-index: 3; }
.ladder .prog { position: absolute; bottom: 13px; height: 4px; border-radius: 2px; background: var(--accent); z-index: 0; }
.trk-n { font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.35; }
.trk-l { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); margin: 1px 0 0; }
.trk-l.mine { color: #8a5400; font-weight: 600; }
.ladder .goal { position: absolute; bottom: 9px; top: 0; border-left: 2px dashed var(--accent); transform: translateX(-1px); z-index: 0; }
.trk-n b { color: var(--ink); font-weight: 600; }
.mk-btn.sell small { display: block; font-size: 10px; font-weight: 500; opacity: .8; }
.mk-news { display: flex; align-items: center; gap: 8px; margin: 8px 0; padding: 8px 10px; border-radius: 9px; font-size: 13px; background: #FFF4DE; border-left: 4px solid var(--accent); }
.mk-news.ship { background: #E9F1F6; border-left-color: #3F6F8F; }
.mk-col.in-news { box-shadow: inset 0 0 0 2px var(--accent); }
.slot.normal { box-shadow: inset 0 -3px 0 #2A211C55; }
.score b { font: 700 20px Rubik; }

/* market */
.mk { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mk-col { background: var(--paper); border-radius: 9px; padding: 6px; display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.mk-head { text-align: center; font: 700 12px Rubik; text-transform: uppercase; letter-spacing: .4px; }
.mk-slots { display: grid; grid-template-columns: 1fr; gap: 2px; }
.slot { height: 17px; display: flex; align-items: center; justify-content: space-between; padding: 0 4px; border-radius: 4px; background: #fff; border: 1px solid #0000000f; font: 500 10px Rubik; color: var(--muted); }
.slot svg { height: 14px; width: 18px; }
.slot.next-sell { outline: 2px dashed var(--accent); outline-offset: -2px; }
.slot.next-buy { box-shadow: inset 0 0 0 2px var(--ink); }
.mk-btn { border: 0; border-radius: 8px; padding: 7px 2px; font: 700 12px Rubik; min-height: 34px; }
.mk-btn.sell { background: var(--accent); color: #fff; }
.mk-btn.buy { background: var(--ink); color: var(--paper); }
.mk-btn.guild { background: var(--card); color: var(--accent-dark); border: 2px solid var(--accent); }
.mk-note { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* kingdoms */
.kg { display: grid; grid-template-columns: 16px 1fr auto; gap: 4px 8px; align-items: center; font-size: 13px; padding: 4px 0; border-bottom: 1px solid #0000000d; }
.kg i { width: 14px; height: 14px; border-radius: 3px; box-shadow: inset 0 -3px 0 #0003; }
.kg .pl { color: var(--muted); font-variant-numeric: tabular-nums; }
.kg.now b { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }

#log .lines { font: 12.5px/1.45 Rubik; max-height: 180px; overflow-y: auto; color: #4a3f37; }
#log .lines div.ev { color: var(--muted); padding-left: 10px; }

/* verb bar */
#verbs { position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; gap: 6px; background: var(--ink); padding: 6px; border-radius: 14px; box-shadow: 0 6px 20px #0004; z-index: 4; }
#verbs button { min-width: 82px; min-height: 46px; border: 0; border-radius: 10px; background: #ffffff14; color: var(--paper); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
#verbs button b { font: 700 14px Rubik; }
#verbs button .n { font-size: 11px; opacity: .75; }
#verbs button[aria-pressed="true"] { background: var(--accent); }

/* sheet */
#sheet { position: fixed; inset: 0; background: transparent; pointer-events: none; display: flex; align-items: flex-end; justify-content: center; z-index: 8; }
#sheet .sheet-card { pointer-events: auto; box-shadow: 0 -6px 30px #0005; }
/* a wide screen: the card opens over the side panel, never over the board (the user, 10-19) */
@media (min-width: 821px) {
  #sheet { align-items: flex-start; justify-content: flex-end; padding: var(--top, 64px) 10px 10px; }
  #sheet .sheet-card { width: 360px; max-height: 100%; border-radius: 12px; animation: side .18s ease-out; }
}
@keyframes side { from { transform: translateX(30px); opacity: 0 } }
@media (max-width: 820px) { #sheet .sheet-card { max-height: 46vh; } }
#board svg, #fx { transform-origin: 0 0; will-change: transform; } /* zoom and pan move the drawn board; it is drawn again when they rest */
#board.cam .ck-flow, #board.cam .ck-fall, #board.cam .ck-ripple, #board.cam .ck-cloud { animation-play-state: paused; } /* while the camera moves (play.js camFrame): the flow repainted the whole board each frame */
#sheet[hidden] { display: none; }
.sheet-card { position: relative; background: var(--card); width: min(560px, 100%); max-height: 80vh; overflow-y: auto; border-radius: 16px 16px 0 0; padding: 16px 16px 24px; box-shadow: 0 -6px 24px #0003; animation: up .18s ease-out; }
@keyframes up { from { transform: translateY(30px); opacity: 0 } }
.sheet-card .close { position: absolute; right: 12px; top: 12px; width: 36px; height: 36px; border: 1px solid #0002; border-radius: 10px; background: none; padding: 0; font: 500 20px/1 Rubik; color: var(--muted); }
/* few words (10-20): the (i) opens the full sentence behind a card's signs */
.sheet-card .whybtn { display: none; position: absolute; right: 54px; top: 12px; width: 36px; height: 36px; border: 1px solid #0002; border-radius: 10px; background: none; font: italic 700 17px/1 Georgia, serif; color: var(--muted); }
.sheet-card.has-long .whybtn { display: block; }
.sheet-card .whybtn[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.sheet-card .long { display: none; } .sheet-card.long-open .long { display: block; }
.sheet-card .marks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 6px 0 12px; }
.sheet-card .marks .bn { font: 700 15px Rubik; }
.eff { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.sgrow { display: inline-flex; align-items: center; gap: 4px; }
.opt b .sg { vertical-align: -3px; }
.opt b .left { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: #2A211C14; font: 600 12px Rubik; text-align: center; }
.opt .later { display: flex; align-items: center; gap: 2px; margin-top: 3px; opacity: .7; }
.next .opt small .eff { gap: 2px 8px; }
.sheet-card h2 { font: 20px Bungee, sans-serif; margin: 0 0 8px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding-right: 48px; min-height: 36px; }
.sheet-card.has-long h2 { padding-right: 92px; }
.sheet-card h2 .xy { font: 600 12px Rubik; color: var(--muted); letter-spacing: .02em; }
.sheet-card h2 .vnote { font-family: Rubik, sans-serif; }
.sheet-card .info { color: var(--muted); font-size: 14px; margin-bottom: 12px; }
.opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.opt { display: grid; grid-template-columns: 44px 1fr; gap: 8px; align-items: center; text-align: left; background: var(--paper); border: 2px solid transparent; border-radius: 12px; padding: 8px; min-height: 64px; }
.opt:not(:disabled):hover { border-color: var(--accent); }
.opt b { display: block; font: 700 14px Rubik; }
.opt small { display: block; color: var(--muted); font-size: 12px; }
.opt .cost { display: flex; gap: 2px; margin-top: 3px; flex-wrap: wrap; }
.opt .why { color: #b4232f; font-size: 11px; }

/* overlays (setup, game over) */
#overlay { position: fixed; inset: 0; background: #2a211cee; color: var(--paper); z-index: 10; display: flex; align-items: center; justify-content: center; padding: 16px; }
#overlay[hidden] { display: none; }
.dialog { background: var(--card); color: var(--ink); border-radius: 18px; padding: 22px; width: min(520px, 100%); max-height: 92vh; overflow-y: auto; }
.dialog h1 { font: 34px/1 Bungee, sans-serif; margin: 0 0 6px; }
.dialog p { color: var(--muted); margin: 0 0 14px; }
.dialog .row { display: flex; gap: 8px; align-items: center; margin: 8px 0; flex-wrap: wrap; }
.dialog label { min-width: 90px; font-weight: 500; }
.dialog select, .dialog input { font: 16px Rubik; padding: 8px 10px; border-radius: 8px; border: 1px solid #0003; background: #fff; }
.dialog .seat i { width: 18px; height: 18px; border-radius: 4px; display: inline-block; box-shadow: inset 0 -4px 0 #0003; }
.dialog table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dialog td, .dialog th { padding: 5px 6px; border-bottom: 1px solid #0001; text-align: left; }

@media (max-width: 820px) {
  body { overflow: auto; }
  #app { display: flex; flex-direction: column; padding: 8px; }
  #stage { height: 58vh; flex: none; }
  .sheet-card { border-radius: 16px 16px 0 0; }
}

/* ---- v0.3 polish ---------------------------------------------------------------------- */
.ck-drop { animation: ckdrop 240ms cubic-bezier(.3,.7,.4,1) both; }
@keyframes ckdrop { from { transform: translateY(-14px); opacity: 0 } 72% { transform: translateY(.4px); opacity: 1 } to { transform: none } }

/* floating numbers that rise from a tile */
.floater { position: absolute; z-index: 6; pointer-events: none; font: 700 16px Rubik, sans-serif; color: var(--ink); background: var(--card); border-radius: 10px; padding: 3px 8px; box-shadow: 0 3px 10px #0003; display: flex; gap: 4px; align-items: center; transform: translate(-50%, -50%); animation: rise 1.4s ease-out forwards; }
.floater svg { flex: none; }
.floater.bad { color: #b4232f; }
@keyframes rise { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.8) } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1) } 100% { opacity: 0; transform: translate(-50%, -260%) } }

/* the action bar above the board (harvest all etc.) */

/* building tree panel */
#tree-fig svg { flex: none; }
.btree h4 { font: 700 11px Rubik; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin: 10px 0 2px; }
.btree ul { list-style: none; margin: 0; padding: 0; }
.btree ul ul { margin-left: 15px; padding-left: 12px; border-left: 2px solid #2A211C14; }
.btree li { position: relative; }
.btree ul ul > li::before { content: ''; position: absolute; left: -12px; top: 21px; width: 10px; border-top: 2px solid #2A211C14; }
.bt-row { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.bt-row b, .bt-note b { font: 700 13px Rubik; display: block; line-height: 1.15; }
.bt-row small, .bt-note small { display: block; font-size: 11.5px; line-height: 1.25; color: var(--muted); }
.bt-cube { display: inline-flex; width: 16px; justify-content: center; }
.bt-cost { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; padding: 0 6px 0 3px; border-radius: 8px; background: var(--paper); font: 600 11.5px Rubik; color: var(--ink); vertical-align: 1px; white-space: nowrap; } /* a step's gold */
.bt-note { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; padding-top: 8px; border-top: 1px solid #2A211C14; }
.tree-note { font-size: 12px; color: var(--muted); margin: 4px 0 0; }

/* the stacking sheet */
/* the Build card, tight (the user, 10-20: "the build popup menu takes up a lot of space and have a lot of white space"): the
   building as it stands in one row, each next step a short row with its cost at the right, walls and road as small buttons */
.stacker { display: block; }
.stacker .now { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 2px 0 10px; }
.stacker .now > svg { flex: none; }
.stacker .now b { font: 700 15px Rubik; }
.stacker .now .path { display: inline-flex; align-items: center; gap: 2px; margin: 0; }
.next { display: grid; gap: 6px; }
.next .opt { grid-template-columns: 36px 1fr; min-height: 0; padding: 6px 10px 6px 6px; gap: 10px; }
.next .opt > span { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; row-gap: 2px; align-items: center; }
.next .opt > span > .cost { grid-column: 2; grid-row: 1 / span 3; margin: 0; flex-wrap: nowrap; justify-content: flex-end; }
.next .opt small { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.next .opt .later { margin: 0; display: inline-flex; align-items: center; gap: 1px; opacity: .65; }
.opts.tight .opt small { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; color: var(--ink); }
.opt b .mute { font-style: normal; font-weight: 500; color: var(--muted); }
.next .opt > svg { width: 36px; height: auto; }
.opts.tight { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; margin-top: 8px; }
.opts.tight .opt { grid-template-columns: 26px 1fr; min-height: 0; padding: 6px 8px; gap: 6px; }
.opts.tight .opt b { font-size: 13px; }
.opts.tight .opt .cost { margin-top: 1px; }
.opts.tight > .info { margin: 0; align-self: center; }
.final { font-size: 12px; color: var(--muted); margin-top: 10px; }


/* end of game */
.podium { display: grid; gap: 10px; margin: 10px 0; }
.podium .row { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; background: var(--paper); border-radius: 12px; padding: 8px 10px; }
.podium .row.win { box-shadow: inset 0 0 0 2px var(--accent); }
.podium .towers { display: flex; gap: 10px; align-items: flex-end; }
.podium .tower { text-align: center; font-size: 11px; color: var(--muted); }
.podium .tower.weak b { color: var(--accent); }
.podium .score { font: 700 26px Rubik; }

/* ---- v0.7: war with dice ------------------------------------------------------------------- */
.who { font: 600 13px Rubik; min-width: 46px; }
.dline { display: flex; align-items: center; gap: 6px; font: 14px Rubik; min-height: 30px; }
.dline b { font: 700 17px Rubik; }
.dline small { color: var(--muted); }
.dice { display: inline-flex; gap: 1px; align-items: flex-end; }
.dice svg { flex: none; }
.rolls { margin: 4px 0 6px; }
#warpanel .wardice { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 13px Rubik; margin-bottom: 4px; }
#warpanel .wh { font: 700 12px Rubik; margin: 8px 0 2px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
#warpanel .wh.bad { color: #b4232f; }
#warpanel .wl { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font: 13px Rubik; padding: 2px 0; }
#warpanel .wl small, #warpanel .wnote { color: var(--muted); font-size: 12px; }
#warpanel .wnote { display: block; margin-top: 6px; }
.odds { display: flex; height: 10px; border-radius: 5px; overflow: hidden; margin-top: 5px; }
.odds i { display: block; height: 100%; }

.mk-col .short { font: 700 11px Rubik; color: #b4232f; text-align: center; background: #fbe4e4; border-radius: 5px; padding: 3px 2px; }

/* ---- v0.9: actions open verbs ------------------------------------------------------------- */
#acts { display: inline-flex; align-items: center; gap: 6px; font: 600 13px Rubik; color: var(--paper); }
#acts:empty { display: none; }
#acts .pips { display: inline-flex; gap: 3px; }
#acts .pips i { width: 11px; height: 11px; border-radius: 2px; background: var(--accent); box-shadow: inset 0 -2px 0 #0003; }
#acts .pips i.used { background: transparent; border: 1.5px solid #ffffff66; box-shadow: none; }
#verbs button.shut { opacity: .45; }
.vnote { display: inline-flex; align-items: center; gap: 4px; font: 600 13px Rubik; background: #F3E8D8; padding: 3px 10px; border-radius: 999px; vertical-align: middle; }
.vnote.shut { background: #F9E1E1; color: #7a1d24; }
@media (max-width: 520px) { #acts .ao { display: none; } }
.walls-h { font: 700 13px Rubik; margin: 12px 0 4px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }

/* ---- 0.26: tabs, rival cards, the Wonder row, tips, board effects ------------------------- */
/* the side panel: the storehouse stays on top, the rest are tabs (the one matching the chosen verb opens itself) */
#tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; position: sticky; top: 0; z-index: 3; background: var(--bg); padding: 2px 0 4px; }
#tabs::-webkit-scrollbar { display: none; }
#tabs button { flex: 1 0 auto; border: 0; border-radius: 9px; padding: 8px 7px; min-height: 40px; font: 600 12.5px Rubik, sans-serif; background: var(--card); color: var(--muted); cursor: pointer; position: relative; }
#tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
#tabs button .dot { position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: #b4232f; box-shadow: 0 0 0 2px var(--card); }
#tabs button .dot.warn { background: var(--accent); }
.panel.tab[hidden] { display: none; }
#log .lines { max-height: 60vh; }

/* rivals: a leaderboard, one row per kingdom (tap a row for its details) */
.lbt { display: grid; gap: 2px; }
.lb-h, .lb > summary { display: grid; grid-template-columns: 14px 18px minmax(0, 1fr) repeat(4, 40px) 28px; gap: 6px; align-items: center; }
.lb-h { font-size: 11px; color: var(--muted); padding: 0 6px 2px; }
.lb-h span { display: flex; justify-content: center; }
.lb-h span:last-child { justify-content: flex-end; }
.lb > summary { list-style: none; cursor: pointer; padding: 7px 6px; border-radius: 8px; }
.lb > summary::-webkit-details-marker { display: none; }
.lb > summary:hover { background: #2A211C0a; }
.lb.now > summary { background: #FFF3DA; }
.lb .rk { font: 600 12px Rubik; color: var(--muted); text-align: center; }
.lb .nm { font-size: 14px; font-weight: 600; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.lb .nm small { font-size: 11px; color: var(--muted); font-weight: 500; }
.lb .nm .fl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb .warn { color: #b4232f; }
.lb-v { font: 500 13px Rubik; text-align: center; color: var(--muted); }
.lb-v.top { color: var(--ink); font-weight: 700; }
.lb-v i { display: block; height: 4px; border-radius: 2px; background: #2A211C1a; margin-top: 3px; overflow: hidden; }
.lb-v i b { display: block; height: 100%; border-radius: 2px; }
.lb-best { font: 700 18px Rubik; text-align: right; }
.lb-more { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 10px; margin: 2px 6px 8px 44px; padding: 8px 10px; border-radius: 8px; background: var(--paper); }
.lb-more .lf small { display: block; font-size: 11.5px; color: var(--muted); letter-spacing: .2px; }
.lb-more .lf b { display: flex; align-items: center; gap: 3px; font: 600 13px Rubik; color: var(--ink); white-space: nowrap; }
@media (max-width: 420px) { .lb-more { margin-left: 6px; gap: 8px 6px; } }

/* the Harbour sheet: a row per kingdom with a Harbour, a button per thing to send */
.ship-row { border-top: 1px solid #0000000f; padding: 10px 0; }
.ship-to { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.ship-to small { color: var(--muted); }
.ship-goods { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.ship { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 58px; min-height: 52px; padding: 6px 8px; border: 1px solid #2A211C26; border-radius: 10px; background: var(--paper); cursor: pointer; font: 500 11px Rubik; color: var(--ink); }
.ship:disabled { opacity: .45; cursor: default; }
.ship:not(:disabled):hover { background: #FFF3DA; }

/* the Storehouse card (0.39): food in its slots, food over the keep in red, the other goods, a row per Pasture */
.sh-food { display: grid; gap: 4px; margin: 8px 0 6px; }
.sh-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.sh-slot { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px dashed #2A211C33; border-radius: 7px; background: #ffffff80; }
.sh-slot.on { border: 1.5px solid #2A211C1f; background: #F3E8D8; }
.sh-slot.over { border-color: #B4232F70; background: #FBE1DC; }
.sh-over { margin: 2px 0 6px; padding: 8px 10px; border-radius: 10px; background: #FBEDEA; }
.sh-over small { display: block; margin-top: 4px; color: #8E1F28; font-size: 12.5px; }
.sh-fate { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.sh-goods .nolimit { font: 600 18px Rubik; color: var(--muted); align-self: center; }
.sh-goods { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 8px; }
.sh-good { display: inline-flex; align-items: center; gap: 5px; }
.sh-good b { font: 700 16px Rubik; }
.sh-good small { color: var(--muted); font-size: 12px; }
.sh-herd { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #0000000f; }
.sh-name { flex: 1; min-width: 0; }
.sh-name small { display: block; color: var(--muted); font-size: 12px; }
.sh-btns { display: flex; gap: 6px; }
.sh-btns .ship { flex-direction: row; gap: 4px; min-width: 56px; min-height: 40px; font: 600 13.5px Rubik; }
@media (max-width: 420px) { .sh-slot { width: 27px; height: 27px; } }

/* the Wonder row in the storehouse */

/* board effects: a layer over the board with the same view, so the board can redraw under them */
/* a Feast round's herald (0.63): the front page's Bungee across the board, on a soft shadow; it takes no clicks */
#herald { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; pointer-events: none; text-align: center; color: var(--paper); opacity: 0;
  background: radial-gradient(ellipse 62% 30% at 50% 50%, rgba(42, 33, 28, .66), rgba(42, 33, 28, .3) 55%, rgba(42, 33, 28, 0) 100%); }
#herald[hidden] { display: none; }
#herald h2 { margin: 0; font: 400 clamp(34px, 8.6vw, 80px)/0.96 Bungee, Rubik, sans-serif; letter-spacing: .01em; text-shadow: 0 3px 0 rgba(42, 33, 28, .38), 0 10px 32px rgba(8, 28, 40, .45); }
#herald small { font: 400 15px/1 Bungee, Rubik, sans-serif; letter-spacing: .2em; color: #F2B655; text-shadow: 0 2px 0 rgba(42, 33, 28, .45); }
#herald p { margin: 2px 0 0; font: 500 15px Rubik, sans-serif; display: flex; align-items: center; gap: 4px; text-shadow: 0 1px 6px rgba(8, 28, 40, .6); }
#herald.go { animation: herald 4.2s ease both; }
#herald.go h2 { animation: herald-in 1s cubic-bezier(.2, .9, .3, 1.15) both; }
@keyframes herald { 0% { opacity: 0; } 9%, 76% { opacity: 1; } 100% { opacity: 0; } }
@keyframes herald-in { from { transform: scale(.84) translateY(10px); letter-spacing: .14em; } to { transform: none; letter-spacing: .01em; } }
@media (prefers-reduced-motion: reduce) { #herald.go h2 { animation: none; } }
#fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; overflow: visible; }
#fx .fx-ring, #fx .fx-cube, #fx .fx-flag, #fx .fx-die { transform-box: fill-box; transform-origin: center; }

/* tracks: a number that just changed, a lead that just changed hands, a race close to its end */
.trk-h .v.bump { animation: vbump .5s cubic-bezier(.3,1.6,.5,1); display: inline-block; }
@keyframes vbump { 0% { transform: scale(1.6); color: var(--accent); } 100% { transform: none; } }
.trk.lead-flash { animation: leadflash 1.4s ease-out; }
@keyframes leadflash { 0% { box-shadow: inset 0 0 0 3px var(--accent); background: #FFE3A6; } 100% { box-shadow: inset 0 0 0 0 transparent; } }
.ladder.near .goal { animation: goalpulse 1.2s ease-in-out infinite; }
@keyframes goalpulse { 50% { border-left-color: #b4232f; border-left-width: 3px; } }

/* the market: cubes that came in or went out since the last look, and a news card turning over */
.slot.mk-in svg { animation: mkin .55s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes mkin { 0% { transform: translateX(40px) scale(.4); opacity: 0; } 100% { transform: none; opacity: 1; } }
.slot .ghost { position: absolute; left: 4px; animation: mkout .7s ease-in forwards; pointer-events: none; }
@keyframes mkout { 0% { transform: none; opacity: 1; } 100% { transform: translate(-30px, -18px) scale(.5); opacity: 0; } }
.slot { position: relative; }
.mk-news.flip { animation: newsflip .7s cubic-bezier(.3,1.2,.5,1); transform-origin: top center; }
@keyframes newsflip { 0% { transform: perspective(500px) rotateX(-90deg); opacity: 0; } 100% { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) { .trk-h .v.bump, .trk.lead-flash, .ladder.near .goal, .slot.mk-in svg, .slot .ghost, .mk-news.flip { animation: none; } #fx * { animation: none !important; } } /* the effects layer stays: it carries the roll cards and stamps */

/* 0.26 continued: the toast under the hint, the peek sheet, the area note, upgrades, the guide, board effects */
#sheet.peek { background: transparent; pointer-events: none; }
#sheet.peek .sheet-card { pointer-events: auto; box-shadow: 0 -6px 30px #0005; }
.area-say { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; background: var(--paper); border-radius: 10px; padding: 8px 10px; margin: -4px 0 12px; color: var(--ink); }
.area-say i { flex: none; width: 12px; height: 12px; border-radius: 3px; margin-top: 3px; box-shadow: inset 0 -3px 0 #0003; }
.ups { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.ups small { width: 100%; color: var(--muted); }
.ups button { border: 1px solid #2A211C33; border-radius: 9px; background: var(--paper); padding: 7px 10px; min-height: 36px; font: 600 12.5px Rubik; color: var(--ink); cursor: pointer; }
.ups button:hover { filter: brightness(1.06); }
.slot.mk-in svg { animation-delay: var(--d, 0ms); }
#fx .fx-flash { transform-box: fill-box; transform-origin: center; animation: fxflash 1.2s ease-out both; }
@keyframes fxflash { 0% { opacity: 0; transform: scale(.5); } 25% { opacity: .85; transform: scale(1.12); } 100% { opacity: 0; transform: none; } }
#fx .fx-ring { transform-box: fill-box; transform-origin: center; animation: fxring 1s ease-out both; }
@keyframes fxring { from { opacity: 1; transform: scale(.3); } to { opacity: 0; transform: scale(1.8); } }
#fx .fx-flag { transform-box: fill-box; transform-origin: 0 100%; animation: fxflag 2.6s ease-out both; }
@keyframes fxflag { 0% { transform: translateY(-12px); opacity: 0; } 10% { opacity: 1; } 18% { transform: translateY(1px); } 24% { transform: none; } 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
#fx .fx-tag { animation: fxtag 2.4s ease-out both; }
@keyframes fxtag { 0% { opacity: 0; transform: translateY(3px); } 15% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-3px); } }
#fx .fx-pop { transform-box: fill-box; transform-origin: center; animation: fxpop 1s ease-in both; }
@keyframes fxpop { 0% { transform: none; opacity: 1; } 30% { transform: translateY(-5px) rotate(-20deg); opacity: 1; } 100% { transform: translateY(-9px) rotate(-60deg) scale(.3); opacity: 0; } }
#fx .fx-die { transform-box: fill-box; transform-origin: center; animation: fxdie 2s ease-out both; }
@keyframes fxdie { 0% { transform: translateY(-8px) rotate(0); opacity: 0; } 10% { opacity: 1; } 35% { transform: translateY(0) rotate(400deg); } 45% { transform: translateY(-1.5px) rotate(430deg); } 55% { transform: rotate(450deg); } 85% { opacity: 1; transform: rotate(450deg); } 100% { opacity: 0; transform: rotate(450deg); } }
#sheet .opts > .info { grid-column: 1 / -1; }
@media (max-width: 820px) { #sheet.peek .sheet-card { max-height: 42vh; } } /* a tile's facts leave the board (and its lit area) in view */

/* ---- 0.39 the screen (the user, 10-20: "perfectly the right tab window goes. And everything is controlled at the bottom.
   also the turn popups are really a painkiller", then "the current score and resources ... should be visiable at the top").
   Direction A of the design canvas (https://claude.ai/artifact/J9o3c9iY9jPZmP2HTRh33e): the score bar across the top, the
   board between, one line for every message above the dock, and the dock with every control; panels rise from the dock as
   a drawer. --top and --dock (play.js placeNotes) are the bars' heights. */
:root { --bar: #2A211C; --bar-2: #3A2F28; --bar-text: #F6EEE4; --bar-muted: #BFAE9F; --go: #D98E12; --top: 92px; --dock: 124px; }
body { overflow: hidden; }
#app { position: fixed; inset: 0; display: block; padding: 0; }
#stage { position: absolute; inset: 0; border-radius: 0; background: #1F5A7A; }
#board { position: absolute; left: 0; right: 0; top: var(--top); bottom: var(--dock); width: auto; height: auto; }
#fx { inset: auto; left: 0; top: var(--top); width: 100%; height: calc(100% - var(--top) - var(--dock)); }
#zoom { top: calc(var(--top) + 4px); right: 12px; flex-direction: column; gap: 2px; background: #2A211Cc7; border-radius: 14px; padding: 3px; z-index: 3; box-shadow: 0 4px 12px #1c140e40; }
#zoom button { width: 40px; height: 40px; border-radius: 11px; background: transparent; color: var(--bar-text); box-shadow: none; font: 700 20px Rubik; display: flex; align-items: center; justify-content: center; }
#zoom button:hover { background: #f6eee41a; }

/* the signs (signs.js; the user, 10-20: words as few as possible) */
.sg { display: inline-flex; align-items: center; gap: calc(var(--sg) * 0.16); vertical-align: middle; line-height: 1; }
.sg b { font: 700 max(11px, calc(var(--sg) * 0.82)) Rubik, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.signs { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.signs .sep { width: 1px; height: 22px; background: #ffffff2e; }
#line .frames { display: inline-flex; align-items: center; gap: 8px; margin-left: 12px; flex-wrap: wrap; }
#line .frame { display: inline-flex; align-items: center; gap: 6px; background: #FFFDF9; color: #2A211C; border-radius: 12px; padding: 6px 10px; }
#line .frame-next { width: 8px; height: 8px; border-top: 2.5px solid #F6EEE499; border-right: 2.5px solid #F6EEE499; transform: rotate(45deg); }
#line .ln.tip .frame { background: #F3E8D8; } #line .ln.tip .frame-next { border-color: #2A211C66; } /* a tip's line is light */
.signs .tx2 { font-size: 14px; opacity: .8; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pipsm { display: inline-flex; gap: 3px; } .pipsm i { width: 11px; height: 11px; border-radius: 3px; background: #F2B655; border: 1px solid #C97A00; box-sizing: border-box; }


/* the score bar: one line (the user, 10-20: "it is not alligned"). One 64 px row, every cell centred on one line, fixed-width
   cells so nothing moves when a number changes, a thin rule between groups. */
#top { position: fixed; left: 12px; right: 12px; top: 10px; z-index: 5; display: flex; align-items: center; gap: 0; flex-wrap: nowrap; height: 64px; box-sizing: border-box; padding: 0 8px; background: #2A211Cf0; color: var(--bar-text); border-radius: 18px; box-shadow: 0 6px 18px #1c140e4d; }
#top > section { display: flex; flex-direction: row; align-items: center; min-width: 0; height: 48px; }
#top .bar-sep { flex: none; width: 1px; height: 32px; background: #f6eee424; margin: 0 4px; }
#top b { font-variant-numeric: tabular-nums; }
#me .you { display: flex; align-items: center; gap: 6px; padding: 0 8px; height: 40px; color: var(--bar-muted); white-space: nowrap; }
#me .you b { font: 16px Bungee, sans-serif; min-width: 2ch; }
#me .store { display: flex; align-items: center; padding: 0 4px; }
#me .good { flex: none; width: 56px; height: 40px; box-sizing: border-box; padding: 0; display: flex; align-items: center; justify-content: center; gap: 4px; border-radius: 10px; background: none; cursor: pointer; }
#me .good:hover { background: #f6eee40f; }
#me .good .heap { width: 24px; line-height: 0; }
#me .good .heap svg { width: 24px; height: auto; }
#me .good b { font: 20px Bungee, sans-serif; color: var(--bar-text); min-width: 1.2ch; margin: 0; }
#me .good.none { opacity: .45; }
#me .good b.wide { font-size: 15px; letter-spacing: -0.5px; } /* three digits keep the cell's width */
#me .good.herd:not(.none) { background: #f6eee414; }
#me .good.over b { color: #F2B655; }
#me .krow { display: contents; }
#me .krow .rd { display: none; }
/* the Storehouse meter: a cell a cube in two rows, in the goods' colours; red-edged cells for what won't fit */
#me .keepbar { display: flex; align-items: center; gap: 8px; padding: 0 8px; height: 40px; }
#me .keepbar .cells { display: grid; grid-template-rows: repeat(2, 9px); grid-auto-flow: column; grid-auto-columns: 7px; gap: 2px; }
#me .keepbar i { display: block; border-radius: 2px; background: #f6eee424; }
#me .keepbar b { font: 600 14px Rubik; color: var(--bar-muted); white-space: nowrap; }
#me .keepbar.over b { color: #F2655F; }
#me .keepbar.over .cells { outline: 1.5px solid #F2655F; outline-offset: 2px; border-radius: 2px; }
#mine .pls { display: flex; align-items: center; padding: 0 4px; }
#mine .pl { flex: none; width: 58px; height: 40px; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 10px; }
#mine .pl b { font: 20px Bungee, sans-serif; }
#mine .pl { position: relative; }
#mine .pl.best { color: #F2B655; box-shadow: inset 0 0 0 1.5px #F2B655b3; } /* first on that ladder, were the Reckoning now (0.56) */
#mine .pl .md { position: absolute; top: -3px; right: -1px; display: flex; pointer-events: none; } /* the medal it would win */
#top .rd > span.due { color: #F2B655; } /* the Reckoning is this round */
#verbs .n .cost { display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: #E8A23A; margin-right: 5px; vertical-align: 0; }
#race { margin-left: auto; }
#top .rd { display: flex; align-items: center; gap: 14px; padding: 0 10px; height: 40px; color: var(--bar-muted); white-space: nowrap; }
#top .rd > span { display: inline-flex; align-items: center; gap: 5px; font: 600 14px Rubik; font-variant-numeric: tabular-nums; }
#race .rc { display: flex; align-items: center; gap: 4px; padding-left: 4px; min-width: 0; }
#race .rk { position: relative; flex: 0 1 auto; min-width: 0; height: 48px; display: flex; align-items: center; gap: 7px; border: 0; padding: 0 12px 0 10px; border-radius: 12px; background: none; color: var(--bar-text); }
#race .rk:hover { background: #f6eee414; }
#race .rk.now { background: #f6eee41f; box-shadow: inset 0 -3px 0 var(--k, var(--bar-text)); } /* who is playing: lit, with a bar in their colour */
#race .rk .v { font: 20px Bungee, sans-serif; min-width: 1.2ch; text-align: left; }
#race .rk.lead .v { color: #F2B655; }
#race .rk.out { opacity: .4; } /* out of the game: its capital fell (0.68) */
#race .rk .v.bump { animation: vbump .6s cubic-bezier(.3,1.6,.5,1); display: inline-block; } /* points paid at a Reckoning */
#race .rk .nm { font: 600 14px Rubik; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* a tight bar clips names, never the bar */
#race .rk .mk { display: inline-flex; margin-left: -2px; }
#race.tight .rk .nm { display: none; }

/* the line: every message, above the dock */
#line { position: fixed; left: 50%; transform: translateX(-50%); bottom: var(--dock); z-index: 6; width: max-content; max-width: min(880px, calc(100vw - 24px)); pointer-events: none; }
#line .ln { pointer-events: auto; display: flex; align-items: center; gap: 12px; background: #2A211Ceb; color: var(--bar-text); border-radius: 18px; padding: 8px 8px 8px 16px; min-height: 44px; box-shadow: 0 6px 18px #1c140e40; font-size: 15px; line-height: 1.35; animation: lnin .22s ease-out; }
#line .ln.hint { background: #2A211Cc7; font-size: 14px; padding-right: 16px; }
#line .ln.hint:has(.bt) { padding-right: 8px; }
#line .ln.bad::before, #line .ln.news::before { content: ''; flex: none; width: 10px; height: 10px; border-radius: 50%; background: #E0503A; }
#line .ln.news::before { background: #E8A23A; }
#line .ln.tip { background: var(--card); color: var(--ink); }
#line .ln.tip b.t { color: var(--accent-dark); }
#line .tx svg { vertical-align: -3px; }
#line .bt { display: flex; gap: 6px; flex: none; }
#line button { border: 0; border-radius: 10px; padding: 6px 12px; min-height: 36px; font: 600 13px Rubik, sans-serif; background: var(--bar-text); color: var(--ink); white-space: nowrap; }
#line button.ghost { background: transparent; color: inherit; border: 1px solid currentColor; opacity: .8; }
#line .ln.tip button { background: var(--ink); color: var(--paper); }
#line .ln.tip button.ghost { background: transparent; color: var(--ink); }
@keyframes lnin { from { transform: translateY(6px); opacity: 0; } }

/* the dock: the turn, the verbs, the drawers and the menu, End turn */
#dock { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 6; display: flex; gap: 12px; align-items: stretch; min-height: 92px; padding: 10px 10px 10px 18px; background: var(--bar); color: var(--bar-text); border-radius: 22px; box-shadow: 0 10px 30px #1c140e59, inset 0 1px 0 #ffffff14; }
#turnbox { display: flex; flex-direction: column; justify-content: center; gap: 7px; min-width: 176px; }
#who { display: flex; align-items: center; gap: 8px; font-weight: 400; }
#who > span { display: flex; flex-direction: column; line-height: 1.15; }
#who b { font: 16px Bungee, sans-serif; }
#who small { color: var(--bar-muted); font-size: 12px; }
#acts { color: #E7DACE; font: 500 13px Rubik; }
#acts .pips i { width: 13px; height: 13px; border-radius: 3px; background: #E8A23A; }
#verbs { position: static; transform: none; flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; background: none; padding: 0; box-shadow: none; border-radius: 0; z-index: auto; }
#verbs button { position: relative; min-width: 0; min-height: 0; border-radius: 14px; background: var(--bar-2); color: var(--bar-text); flex-direction: row; gap: 10px; padding: 6px 10px; box-shadow: inset 0 -3px 0 #00000040; }
#verbs button .ic { flex: none; }
#verbs button .vt { display: flex; flex-direction: column; align-items: flex-start; text-align: left; min-width: 0; }
#verbs button b { font: 700 17px Rubik, sans-serif; }
#verbs button .n { font-size: 12px; opacity: 1; color: var(--bar-muted); white-space: nowrap; overflow: hidden; max-width: 100%; display: inline-flex; align-items: center; gap: 6px; }
#verbs button[aria-pressed="true"] { background: var(--go); color: var(--ink); }
#verbs button[aria-pressed="true"] .n { color: #2A211Ccc; }
#drawers { display: flex; gap: 2px; }
#drawers button > span, #menubtn > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* icons only: the label is for screen readers */
#drawers button, #menubtn { position: relative; width: 56px; border: 0; border-radius: 12px; background: none; color: var(--bar-text); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font: 500 12px Rubik, sans-serif; }
#drawers button:hover, #menubtn:hover { background: #ffffff10; }
#drawers button[aria-pressed="true"], #menubtn[aria-expanded="true"] { background: var(--bar-2); }
#end { min-width: 176px; border: 0; border-radius: 16px; background: var(--go); color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; box-shadow: inset 0 -4px 0 #00000038; padding: 6px 14px; }
#end .lb { font: 20px Bungee, sans-serif; }
#end small { font: 500 12.5px Rubik, sans-serif; text-align: center; }
#end.warn { background: #b4232f; color: #fff; box-shadow: inset 0 -4px 0 #00000038; }
#end:active { transform: translateY(2px); }
#dock .dot { position: absolute; top: 6px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: #E0503A; box-shadow: 0 0 0 2px var(--bar); }
#dock .dot.warn { background: #E8A23A; }

/* the drawer, the menu, the sheets and the roll card: above the dock, at the right, the board left free beside them */
#drawer { position: fixed; right: 12px; bottom: var(--dock); z-index: 7; width: min(480px, calc(100vw - 24px)); max-height: calc(100dvh - var(--top) - var(--dock) - 4px); overflow-y: auto; background: var(--card); border-radius: 20px; box-shadow: 0 14px 40px #1c140e66; padding: 0 14px 14px; animation: up .18s ease-out; display: flex; flex-direction: column; gap: 4px; }
#drawer[hidden] { display: none; }
#drawer #tabs { position: sticky; top: 0; background: var(--card); padding: 10px 0 6px; z-index: 3; align-items: center; }
#drawer #tabs button { flex: 0 0 auto; background: var(--paper); color: var(--muted); }
#drawer #tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
#drawer #tabs .grow { flex: 1; }
#drawer #tabs .lower { width: 44px; min-height: 40px; display: flex; align-items: center; justify-content: center; color: var(--ink); }
#drawer .panel { padding: 4px 2px; background: none; }
#help .howto { margin: 0 0 8px; padding-left: 20px; } #help .howto li { margin: 6px 0; }
#menu { position: fixed; right: 12px; bottom: var(--dock); z-index: 8; display: flex; flex-direction: column; gap: 2px; background: var(--card); border-radius: 16px; padding: 8px; box-shadow: 0 14px 40px #1c140e66; min-width: 210px; }
#menu[hidden] { display: none; }
#menu button, #menu a { text-align: left; border: 0; background: none; padding: 10px 12px; min-height: 44px; border-radius: 10px; font: 500 15px Rubik, sans-serif; color: var(--ink); text-decoration: none; display: flex; align-items: center; }
#menu button:hover, #menu a:hover { background: var(--paper); }
#sheet { inset: 0; padding: var(--top) 12px var(--dock); align-items: flex-end; justify-content: flex-end; }
#sheet .sheet-card { width: min(480px, 100%); max-height: 100%; border-radius: 20px; animation: up .18s ease-out; }

@media (max-width: 820px) {
  body { overflow: hidden; }
  #app { display: block; padding: 0; }
  #stage { height: auto; }
  #top { left: 8px; right: 8px; top: 8px; height: auto; padding: 6px 8px 6px; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr); grid-template-areas: "me me" "mine race"; gap: 2px 0; align-items: center; border-radius: 16px; }
  #top > section { height: auto; }
  #top .bar-sep { display: none; }
  #top > #me { grid-area: me; flex-direction: column; align-items: stretch; padding-bottom: 4px; border-bottom: 1px solid #ffffff1a; }
  #me .you { display: none; }
  #me .store { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) minmax(0, 1.35fr); padding: 0; height: 40px; } /* 0.47: eight goods in one row; gold, the one that runs to three digits, a little wider */
  #me .good { width: auto; gap: 4px; }
  #me .good .heap, #me .good .heap svg { width: 17px; }
  #me .good b { font-size: 14px; }
  #me .good { gap: 2px; }
  #me .good b.wide { font-size: 12px; }
  #me .krow { display: flex; align-items: center; gap: 8px; height: 24px; padding: 0 4px; }
  #me .krow .rd { display: flex; gap: 8px; padding: 0; height: auto; }
  #me .krow .rd > span { font-size: 12px; gap: 3px; }
  #me .krow .rd svg { width: 12px; height: 12px; }
  #me .keepbar { flex: 1; min-width: 0; height: auto; padding: 0; gap: 8px; }
  #me .keepbar > .sg svg { width: 16px; height: 16px; }
  #me .keepbar .cells { flex: 1; grid-template-rows: 8px; grid-auto-columns: minmax(0, 1fr); }
  #me .keepbar b { font-size: 12px; }
  #mine { grid-area: mine; border-right: 1px solid #ffffff1a; }
  #mine .pls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; padding: 0 4px 0 0; }
  #mine .pl { width: auto; height: 36px; gap: 3px; }
  #mine .pl svg { width: 17px; height: 17px; }
  #mine .pl b { font-size: 15px; }
  #race { grid-area: race; margin-left: 0; }
  #race .rd { display: none; }
  #race .rc { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); width: 100%; gap: 2px; padding-left: 4px; }
  #race .rk { height: 44px; padding: 0; justify-content: center; gap: 3px; } /* a finger's width (the review, 10-21: 36 px) */
  #race .rk svg { width: 18px; height: auto; }
  #race .rk .nm, #race .rk .mk { display: none; }
  #race .rk .v { font-size: 15px; }
  #zoom { right: 8px; }
  #dock { left: 8px; right: 8px; bottom: 8px; display: grid; grid-template-columns: minmax(0, 1fr) auto 96px; grid-template-areas: "turn drawers drawers" "verbs verbs end"; gap: 8px; min-height: 0; padding: 8px; border-radius: 20px; }
  #turnbox { grid-area: turn; min-width: 0; gap: 3px; }
  #who small .of { display: none; }
  #who > span { min-width: 0; }
  #who b { white-space: nowrap; }
  #who b { font-size: 13px; }
  #who small { font-size: 11px; }
  #acts .al { display: none; }
  #verbs { grid-area: verbs; gap: 5px; }
  #verbs button { flex-direction: column; gap: 2px; min-height: 58px; padding: 4px 0; }
  #verbs button .vt { align-items: center; }
  #verbs button b { font-size: 12px; }
  #verbs button .n { display: none; }
  #drawers { grid-area: drawers; }
  #drawers button, #menubtn { width: 42px; min-height: 44px; }
  #drawers button > span, #menubtn > span { display: none; }
  #end { grid-area: end; min-width: 0; padding: 4px 6px; }
  #end .lb { font-size: 14px; }
  #end small { display: block; line-height: 1; margin-top: 2px; } /* signs only now: short enough for a phone */
  #line { left: 8px; right: 8px; transform: none; width: auto; max-width: none; }
  #line .ln { font-size: 13.5px; flex-wrap: wrap; padding: 7px 8px 7px 12px; gap: 6px 10px; }
  #drawer { left: 8px; right: 8px; width: auto; max-height: min(62dvh, calc(100dvh - var(--top) - var(--dock) - 4px)); }
  #sheet { padding: var(--top) 8px var(--dock); }
  #sheet .sheet-card { width: 100%; max-height: 52dvh; }
}
/* the line steps aside for a card at the right (desktop) and waits under it on a phone */
@media (min-width: 821px) {
  body:has(#drawer:not([hidden])) #line, body:has(#sheet:not([hidden]):not(.pin)) #line { left: 12px; transform: none; max-width: calc(100vw - 528px); }
}
@media (max-width: 820px) {
  body:has(#drawer:not([hidden])) #line, body:has(#sheet:not([hidden])) #line { display: none; }
  #turnbox, #who { min-width: 0; }
  #who b { overflow: hidden; text-overflow: ellipsis; }
}
/* the roll on its tile (play.js rollCard; Root's battle stamps, moodboard card 6): the card rises from the tile, the dice
   tumble onto it, the totals land, the verdict is stamped, and after HOLD it fades to leave the small stamp */
#fx .bs { transform-box: fill-box; transform-origin: 50% 100%; animation: bsin .4s cubic-bezier(.2,1.4,.4,1) both, bsout .45s ease-in forwards; filter: drop-shadow(0 .6px .8px #1c140e55); }
@keyframes bsin { from { transform: translateY(2px) scale(.6); opacity: 0; } }
@keyframes bsout { to { transform: scale(.85); opacity: 0; } }
#fx .bs-die { transform-box: fill-box; transform-origin: center; animation: bsdie .8s cubic-bezier(.3,.5,.4,1) both; }
@keyframes bsdie { 0% { transform: translate(-14px, -12px) rotate(-280deg) scale(.5); opacity: 0; } 15% { opacity: 1; } 55% { transform: translate(-2px, 1px) rotate(-60deg) scale(1.08); } 80% { transform: translate(0, -1.5px) rotate(-8deg); } 100% { transform: none; } }
#fx .bs-tot { animation: bstot .3s cubic-bezier(.2,1.6,.4,1) both; transform-box: fill-box; transform-origin: right center; }
@keyframes bstot { from { opacity: 0; transform: scale(1.7); } }
#fx .bs-verdict { transform-box: fill-box; transform-origin: 50% 50%; animation: bsstamp .45s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes bsstamp { 0% { transform: scale(1.6) rotate(-4deg); opacity: 0; } 55% { opacity: 1; } 100% { transform: none; } }
#fx text { font-family: Rubik, sans-serif; }
/* mercenaries (0.43): in the Market drawer and on the War card */
.mk-mercs { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; padding: 8px 10px; border-radius: 12px; background: var(--paper); }
.mk-merc-h { display: inline-flex; align-items: center; gap: 4px; margin-right: 4px; }
.mk-merc, .opt.merc { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #2A211C26; border-radius: 10px; background: var(--card); padding: 6px 10px; font: 600 14px Rubik; color: var(--ink); min-height: 44px; }
.mk-merc:disabled, .opt.merc:disabled { opacity: .55; }
.mk-merc .price, .opt.merc .price { display: inline-flex; align-items: center; gap: 2px; font-weight: 500; color: var(--muted); }
.mk-merc .why, .opt.merc .why { display: inline-flex; align-items: center; }
.mk-merc .price.up, .opt.merc .price.up { color: #B4232F; }
.mk-merc .price.up > :first-child, .opt.merc .price.up > :first-child { transform: rotate(180deg); } /* the chevron points up: dearer */
.merc-in-card { display: flex; gap: 8px; grid-column: 1 / -1; }
.opt.merc { grid-template-columns: none; min-height: 44px; }
#fx .stamp-fade { animation-name: stampfade; animation-timing-function: ease-in; animation-fill-mode: forwards; }
@keyframes stampfade { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #fx .stamp-fade { animation-duration: 1ms !important; } }
/* a middle-sized screen (a small laptop, a tablet on its side): the bars keep one row each, with fewer words */
@media (min-width: 821px) and (max-width: 1180px) {
  #me .you { display: none; }
  #me .you + .bar-sep { display: none; }
  #me .good { width: 50px; }
  #race .rk .nm { display: none; }
  #race .rk { padding: 0 9px 0 8px; }
  #dock { gap: 8px; padding-left: 12px; }
  #turnbox { min-width: 124px; }
  #who b { font-size: 14px; }
  #verbs { gap: 6px; }
  #verbs button { flex-direction: column; gap: 2px; padding: 6px 4px; }
  #verbs button .vt { align-items: center; text-align: center; }
  #verbs button b { font-size: 14px; }
  #drawers button, #menubtn { width: 44px; }
  #drawers button > span, #menubtn > span { display: none; }
  #end { min-width: 124px; padding: 6px 10px; }
  #end .lb { font-size: 17px; }
}
@media (min-width: 821px) and (max-width: 959px) { #race .rd, #race .rd + .bar-sep { display: none; } }
@media (min-width: 821px) and (max-width: 1000px) { #top .rd { gap: 8px; padding: 0 6px; } #me .good { width: 46px; gap: 4px; } #me .good .heap, #me .good .heap svg { width: 18px; } #me .good b { font-size: 16px; } #me .good b.wide { font-size: 12px; } #mine .pl { width: 48px; gap: 4px; } #me .keepbar > .sg { display: none; } #race .rk { padding: 0 6px; gap: 5px; } #race .rk .mk { display: none; } }
@media (prefers-reduced-motion: reduce) { #line .ln, #drawer, #sheet .sheet-card { animation: none; } }

.next .opt small .warn { display: inline-flex; align-items: center; gap: 4px; }



/* The market as ladders (the user, 10-20: "A ladder is much better. Remember to think space saving and visual noise"): one slim
   column a good, a seven-rung window on its price ladder that rolls like a drum (past 8 into red rungs), Sell and Buy under it. */
#market .mk-top { display: flex; align-items: center; gap: 10px; margin: 2px 0 10px; }
#market .mk-top h3 { margin: 0; font: 18px Bungee, sans-serif; }
#market .mk-top .vnote { margin: 0; padding: 3px 10px; border-radius: 999px; }
#market .mk-closed { display: inline-flex; align-items: center; gap: 5px; background: #FBE1DC; color: #8E1F28; border-radius: 999px; padding: 3px 10px; font: 600 13px Rubik, sans-serif; }
#market .grow { flex: 1; }
#market .mk-why { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #2A211C29; background: var(--card); display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
#market .mk-why[aria-pressed="true"] { background: var(--paper); }
#market .mk-note { margin: 0 0 10px; padding: 10px 12px; background: var(--paper); border-radius: 12px; font-size: 13px; line-height: 1.45; color: var(--ink); }
#market .mk-ladders { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } /* 0.47: iron the fifth */
#market .mk-c { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 8px 8px 8px; background: var(--paper); border-radius: 12px; }
#market .mk-h { display: flex; align-items: center; justify-content: center; gap: 6px; height: 22px; }
#market .mk-nb { display: inline-flex; align-items: center; gap: 2px; padding: 1px 6px 1px 3px; border-radius: 999px; font: 600 12px Rubik, sans-serif; background: #FFF1D6; color: #8A5400; }
#market .mk-nb.n-ship { background: #E7EEF8; color: #2F4F86; }
#market .mk-ask { border: 1.5px dashed #2F4F86; cursor: pointer; } /* the round's ship: ask it for this good (0.54) */
#market .mk-ask:hover { background: #D6E2F3; }
#market .mk-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-left: 1px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
#market .mk-nb.flip { animation: newsflip .7s cubic-bezier(.3,1.2,.5,1); }
#market .lad { position: relative; height: calc(18px * 7); overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent); }
#market .lad .strip { transition: transform .5s cubic-bezier(.3, 1.25, .5, 1); }
#market .lad i { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 5px; height: 18px; padding-right: 7px; font-style: normal; }
#market .lad i span { font: 600 11px Rubik, sans-serif; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
#market .lad i em { display: block; height: 12px; border-radius: 3px; background: #2A211C0f; }
#market .lad i.full em { background: var(--c); }
#market .lad i.buy em { box-shadow: 0 0 0 2px var(--ink); }
#market .lad i.buy span, #market .lad i.sell span { color: var(--ink); font-weight: 700; }
#market .lad i.sell em { background: transparent; outline: 1.5px dashed var(--accent); outline-offset: -1.5px; }
#market .lad i.short span { color: #B4232F; }
#market .lad i.short em { background: #B4232F12; }
#market .lad i.short.buy em { box-shadow: 0 0 0 2px #B4232F; }
#market .lad i.none span, #market .lad i.none em { visibility: hidden; }
#market .lad i.normal::after { content: ''; position: absolute; right: 0; top: 5px; border: 4px solid transparent; border-right: 5px solid #C99A2E; border-left: 0; } /* the normal level: a gold tick */
#market .mk-c .mk-btn { min-height: 36px; padding: 0 4px; border-radius: 9px; font: 600 13px Rubik, sans-serif; }
#market .mk-c .mk-btn b { font: 14px Bungee, sans-serif; }
#market .mk-c .mk-btn:disabled { opacity: .4; }
#market .mk-mercs { margin-top: 10px; }
@media (max-width: 820px) {
  #market .mk-ladders { gap: 6px; }
  #market .mk-c { padding: 6px 5px; }
  #market .lad i { grid-template-columns: 16px minmax(0, 1fr); gap: 3px; padding-right: 6px; }
  #market .mk-c .mk-btn { font-size: 12px; min-height: 42px; }
}
@media (prefers-reduced-motion: reduce) { #market .lad .strip { transition: none; } #market .mk-nb.flip { animation: none; } }
/* the turn's recap (10-21): a rival's chip and what they did to you, in signs */
#line .recap { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px 2px 6px; margin-left: 4px; border-radius: 999px; background: #f6eee41a; }
/* the end (10-21): the board stays in sight; the result comes in at the side (below on a phone) and the winner's cubes rain on
   their capital */
#overlay.end { background: linear-gradient(90deg, transparent 35%, #2a211c99); justify-content: flex-end; padding: 16px 24px; }
#overlay.end .dialog { width: min(440px, 100%); animation: endin .6s cubic-bezier(.2,1.2,.4,1) both; box-shadow: 0 10px 40px #0006; }
@keyframes endin { from { transform: translateX(40px); opacity: 0; } }
.end-card h1 { font-size: 30px; }
.end-card .end-how { display: flex; align-items: center; gap: 6px; font: 600 14px Rubik; color: var(--muted); }
.end-card .end-how span { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; }
#fx .fx-fall { animation: fxfall 1.6s cubic-bezier(.5,0,.6,1.3) both; }
@keyframes fxfall { 0% { transform: translateY(-46px); opacity: 0; } 12% { opacity: 1; } 55% { transform: none; } 85% { opacity: 1; } 100% { opacity: 0; transform: none; } }
@media (max-width: 820px) {
  #overlay.end { background: linear-gradient(transparent 30%, #2a211c99); align-items: flex-end; justify-content: center; padding: 12px; }
  #overlay.end .dialog { max-height: 58vh; animation-name: endup; }
  @keyframes endup { from { transform: translateY(40px); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) { #overlay.end .dialog { animation: none; } }
/* the start (10-21): the dialog over the island you are about to play, not over a dark screen */
#overlay.intro { background: radial-gradient(ellipse at 50% 50%, #2a211cb3 0, #2a211c66 55%, #2a211c33 100%); }
#overlay.intro .dialog { box-shadow: 0 12px 48px #0007; }
/* few words (10-21): the Tracks' and War's lines as signs */
.trk-n.signs, #warpanel .wl.signs { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.trk-n.signs b { display: inline-flex; align-items: center; gap: 3px; }
#warpanel .wt small, #warpanel .wardice small { color: var(--muted); font-size: 11px; }
#warpanel .wl { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
#warpanel .wh { display: flex; align-items: center; gap: 4px; }
/* comfort (the review, 10-21) */
.opt:disabled { opacity: 1; background: #EFE7DD; color: #7A6A5E; } /* a greyed option still reads; its picture fades */
.opt:disabled > svg, .opt:disabled > .sg { opacity: .5; filter: grayscale(.5); }
body.zoom-aside #zoom { right: calc(min(480px, 100vw - 24px) + 24px); } /* a tall drawer never covers the zoom (placeNotes) */
@media (max-width: 820px) {
  .sheet-card .close, .sheet-card .whybtn { width: 44px; height: 44px; top: 8px; }
  .sheet-card .close { right: 8px; } .sheet-card .whybtn { right: 58px; }
  .sheet-card h2 { padding-right: 52px; } .sheet-card.has-long h2 { padding-right: 104px; }
}
@media (max-width: 820px) { #drawer #tabs button, #drawer #tabs .lower { min-height: 44px; min-width: 44px; } }
/* the Metalshop's smelter (0.47): a stepper a metal, the batch and its wood on one card */
.opt.smelt { cursor: default; }
.smelt small { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.sm-foot { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.sm-go { min-height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--accent); color: #fff; font: 700 14px Rubik; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.sm-go:disabled { background: #CBBFB2; cursor: default; }
.sm-row { display: inline-flex; align-items: center; gap: 6px; }
.sm-step { width: 32px; height: 32px; border-radius: 9px; border: 1px solid #2A211C33; background: var(--card); font: 700 16px Rubik; color: var(--ink); padding: 0; cursor: pointer; }
.sm-step:disabled { opacity: .35; }
@media (max-width: 820px) { .sm-step { width: 44px; height: 44px; } }
@media (max-width: 370px) { #me .good .heap, #me .good .heap svg { width: 15px; } #me .good b { font-size: 13px; } #me .good b.wide { font-size: 11px; } } /* the smallest phones: eight goods still in one row */
/* the Harbour's card (0.54): the ship's vote, the boats, cargo; few words, the sentences behind (i) */
.harbour .hb-sec { border-top: 1px solid #0000000f; padding: 8px 0 6px; }
.harbour .hb-h { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.harbour .hb-h small { color: var(--muted); font: 600 13px Rubik, sans-serif; }
.harbour .hb-tag { display: inline-flex; align-items: center; gap: 2px; padding: 1px 6px; border-radius: 999px; background: #E7EEF8; color: #2F4F86; font: 600 12px Rubik, sans-serif; }
.harbour .grow { flex: 1; }
.harbour .mute { color: var(--muted); font-size: 13px; }
.harbour .votes { display: flex; flex-wrap: wrap; gap: 6px; }
.harbour .vote { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 48px; min-height: 48px; padding: 4px 6px; border: 1.5px dashed #2F4F86; border-radius: 10px; background: var(--paper); cursor: pointer; }
.harbour .vote:not(:disabled):hover { background: #D6E2F3; }
.harbour .vote:disabled { border: 1.5px solid #2A211C1a; cursor: default; }
.harbour .vote:disabled > svg, .harbour .vote:disabled > img { opacity: .5; }
.harbour .vote.on { border: 2px solid var(--ink); background: #E7EEF8; }
.harbour .vote.on > svg, .harbour .vote.on > img { opacity: 1; }
.harbour .vote .x, #market .mk-x { color: #B4232F; font: 700 15px Rubik, sans-serif; line-height: 1; }
.harbour .vote .x { position: absolute; top: 3px; right: 6px; }
.harbour .dots { display: flex; gap: 2px; min-height: 8px; }
.harbour .dots i { width: 8px; height: 8px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.harbour .hb-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.harbour .hb-boat { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 4px 10px; border: 1px solid #2A211C26; border-radius: 10px; background: var(--paper); cursor: pointer; font: 600 14px Rubik, sans-serif; }
.harbour .hb-boat:disabled { opacity: .5; cursor: default; }
.harbour .hb-boat:not(:disabled):hover { background: #FFF3DA; }
.harbour .ship-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: none; }
.harbour .ship-goods { margin: 0; gap: 5px; }
.harbour .ship { min-width: 44px; min-height: 44px; padding: 4px; }


/* the Feast and faith (0.57) */
#me .good.faith:not(.none) { background: #f6eee414; }
#mine .pl.due { color: #F2B655; box-shadow: inset 0 0 0 1.5px #F2B655b3; cursor: pointer; } /* a Feast round: give */
#mine .pl.none b { opacity: .5; }
.trk-last { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--muted); }
.trk-go { margin-left: auto; min-height: 30px; padding: 0 12px; border: 0; border-radius: 9px; background: var(--accent); color: #fff; font: 700 13px Rubik; cursor: pointer; }
.gift .sm-row { gap: 8px; }
.gift .sm-row > .sg { min-width: 58px; }
.sm-step.all { width: auto; min-width: 40px; padding: 0 8px; font-size: 13px; }
.sm-foot .mute { display: inline-flex; align-items: center; gap: 3px; color: var(--muted); font: 600 13px Rubik; }
.pr { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.pr-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font: 14px Rubik; }
.pr-row .wt small { color: var(--muted); }
.pr-row .dice { display: inline-flex; gap: 4px; }
.pr-row b { font: 700 18px Rubik; }
.pr-row > small { color: var(--muted); }
.pr-die { display: inline-flex; padding: 3px; border-radius: 8px; border: 0; background: none; line-height: 0; }
button.pr-die { cursor: pointer; box-shadow: 0 0 0 1.5px #C9A44C88; background: #FFF7E0; }
button.pr-die:hover { box-shadow: 0 0 0 2px #C9A44C; }
.pr-die.blessed { box-shadow: 0 0 0 2px #F2B655, 0 0 10px #F2B655aa; background: #FFF4D6; }
.opt.pr-done { justify-content: center; min-height: 44px; }
@media (max-width: 820px) { button.pr-die { padding: 6px; } }
.opts > .opt.gift, .opts > .opt.pr-done { grid-column: 1 / -1; } /* the gift's steppers and Done take the card's width */
@media (max-width: 820px) {
  #me .store { display: flex; } /* 0.57: eight goods, and faith once you keep it: every cell an equal share, gold a little more */
  #me .store .good { flex: 1 1 0; min-width: 0; }
  #me .store .good[data-good="gold"] { flex-grow: 1.35; }
}

/* the Feast's reveal (0.57): what rises over the capitals stays until the crown; the cloche lifts; the crown comes down */
#fx .fx-hold { animation: fxhold 6s ease-out both; }
@keyframes fxhold { 0% { opacity: 0; transform: translateY(3px); } 4% { opacity: 1; transform: none; } 94% { opacity: 1; } 100% { opacity: 0; } }
#fx .fx-lift { transform-box: fill-box; transform-origin: center; animation: fxlift .7s ease-in both; }
@keyframes fxlift { 0% { transform: none; opacity: 1; } 35% { transform: translateY(-1.5px) rotate(-6deg); opacity: 1; } 100% { transform: translateY(-8px) rotate(-16deg); opacity: 0; } }
#fx .fx-crown { transform-box: fill-box; transform-origin: 50% 100%; animation: fxcrown 1.1s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes fxcrown { 0% { transform: translateY(-16px) scale(.5); opacity: 0; } 40% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #fx .fx-hold, #fx .fx-lift, #fx .fx-crown { animation: none; } }
/* the Feast's result card */
.fcard { display: flex; flex-direction: column; gap: 10px; }
.podium-f { display: flex; justify-content: center; align-items: flex-end; gap: 8px; padding-top: 4px; }
.podium-f .pd { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 74px; }
.podium-f .pd-who { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.podium-f .pd b { font: 700 17px Rubik; }
.podium-f .pd i { display: flex; align-items: flex-start; justify-content: center; width: 100%; border-radius: 6px 6px 2px 2px; font: 700 12px Rubik; font-style: normal; padding-top: 4px; box-sizing: border-box; box-shadow: inset 0 -3px 0 #0002; }
.podium-f .pd.win b { color: #8A5400; }
.fc-t { border-collapse: collapse; width: 100%; font: 14px Rubik; }
.fc-t th { font-weight: 400; color: var(--muted); padding: 2px 4px; }
.fc-t th .sg { margin: 0 auto; }
.fc-t td { text-align: center; padding: 3px 4px; border-top: 1px solid #2A211C14; }
.fc-t td:first-child { text-align: left; }
.fc-t .mute { color: var(--muted); }
/* 0.59-0.60: nine goods (faith) and four ladders: on a laptop's width the cells give up a little room so the bar fits on one line */
@media (min-width: 1001px) and (max-width: 1640px) {
  #me .good { width: 46px; gap: 3px; }
  #me .good .heap, #me .good .heap svg { width: 19px; }
  #me .good b { font-size: 17px; }
  #mine .pl { width: 50px; gap: 4px; }
  #mine .pl svg { width: 19px; height: 19px; }
  #mine .pl b { font-size: 17px; }
  #me .keepbar { gap: 6px; padding: 0 6px; }
  #top .rd { gap: 10px; padding: 0 8px; }
}
@media (min-width: 821px) and (max-width: 1240px) {
  #me .keepbar .cells { display: none; } /* the count stays: 3/8 */
  #me .good { width: 41px; gap: 2px; }
  #me .good .heap, #me .good .heap svg { width: 17px; }
  #me .good b { font-size: 15px; }
  #me .you { padding: 0 4px; gap: 4px; }
  #mine .pl { width: 44px; gap: 3px; }
  #mine .pl svg { width: 17px; height: 17px; }
  #mine .pl b { font-size: 15px; }
}
@media (min-width: 821px) { /* the storehouse and the ladders keep their width; the race gives way (its names drop when they don't fit) */
  #top > #me, #top > #mine { flex: none; }
  #top > #race { flex: 1 1 auto; min-width: 0; }
}

/* 0.61 (the user, 10-22: the cards were "a bit annoying" to close, and "you cannot see the map when you open them"): a tile's card
   stands beside its tile, a nib pointing at it, and follows it as the map moves (play.js pinSheet); tap the tile again, the sea
   or Esc and it goes, so there is no close button. A resting mouse shows the tile in signs (#peek), nothing to close. */
#sheet.pin { display: block; padding: 0; }
#sheet.pin .sheet-card { position: fixed; z-index: 1; margin: 0; border-radius: 16px; padding: 14px 14px 16px; box-shadow: 0 10px 34px #0006; animation: pinin .16s ease-out; }
#sheet.pin .close { display: none; }
#sheet.pin .whybtn { right: 12px; }
#sheet .nib { position: fixed; z-index: 0; width: 20px; height: 20px; margin: -10px 0 0 -10px; background: var(--card); transform: rotate(45deg); border-radius: 3px; box-shadow: 0 0 12px #0005; pointer-events: none; }
#sheet:not(.pin) .nib { display: none; }
@keyframes pinin { from { transform: scale(.95); opacity: 0 } }
#peek { position: fixed; z-index: 7; pointer-events: none; max-width: 300px; background: var(--card); color: var(--ink); border-radius: 12px; padding: 7px 11px 3px; box-shadow: 0 6px 20px #0005; font: 13px Rubik, sans-serif; animation: pinin .12s ease-out; }
#peek[hidden] { display: none; }
#peek > b { display: flex; align-items: center; gap: 6px; font: 700 14px Rubik, sans-serif; }
#peek > b .xy { font-weight: 500; color: var(--muted); }
#peek .marks { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 4px 0; }
#peek .marks .bn { font: 600 13px Rubik, sans-serif; }
@media (prefers-reduced-motion: reduce) { #sheet.pin .sheet-card, #peek { animation: none; } }
/* the market stands alone (the user, 10-22): no tab row over it; Market again, Esc or the map put it away */
#drawer.solo #tabs { display: none; }
#drawer.solo #market { padding-top: 14px; }
/* rations (0.62): a military building's food switch on its cards: on, it eats as the turn ends; off, its dice next turn are hungry */
.opt.ration { grid-template-columns: 30px 1fr 36px; }
.opts.tight .opt.ration { grid-template-columns: 26px 1fr 36px; }
.opt.ration b, .opt.ration small { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.opt.ration .switch { position: relative; width: 34px; height: 20px; border-radius: 10px; background: #CFC4B8; transition: background .18s; }
.opt.ration .switch i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #FFFDF9; box-shadow: 0 1px 2px #0003; transition: transform .18s; }
.opt.ration .switch.on { background: #1D7A3A; }
.opt.ration .switch.on.short { background: #B8862B; }
.opt.ration .switch.on i { transform: translateX(14px); }
@media (prefers-reduced-motion: reduce) { .opt.ration .switch, .opt.ration .switch i { transition: none; } }