/* Wireframe styles: the cheerful Machi Koro palette (sky blue, sunny yellow, orange, green, purple on white),
   the game's card colors, and one picture per card so the small print can stay small. */
:root {
  --ink: #23324a; --mute: #6b7a90; --line: #dbe4ee; --page: #fffdf7; --bg: #dff1fb;
  --sky: #2fa6e6; --sky2: #67c7f2; --sun: #ffd23f; --sun2: #ffb703; --orange: #ff8c32; --grass: #5bbf4e;
  --alert: #e5383b;
  --blue: #2f86d6; --green: #3aa655; --red: #e24a3b; --purple: #8a4fc2; --landmark: #f2b705;
  --blue-l: #e3f0fc; --green-l: #e4f5e6; --red-l: #fde6e3; --purple-l: #f0e6fa; --landmark-l: #fff4cc;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.35 -apple-system, "Segoe UI", system-ui, sans-serif; }

/* one phone viewport: the whole window on a phone; a 390 x 660 frame (what Safari leaves on an iPhone 12)
   on the design pages */
.phone { position: relative; width: 390px; height: 660px; background: var(--page); border: 1px solid #9fb6c9;
  border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 6px 20px rgba(30,80,120,.15); }

/* players: each seat has a color */
.pname { color: var(--seat); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--seat); margin-right: 5px;
  box-shadow: 0 0 0 1.5px #fff; }

/* coins and dice */
.coin { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 10px;
  background: radial-gradient(circle at 35% 30%, #fff3a8, var(--sun) 45%, var(--sun2)); color: #6b4a00;
  font-weight: 800; font-size: 11px; border: 1px solid #d99a00; }
.coin.big { min-width: 34px; height: 34px; border-radius: 17px; font-size: 17px; }
.die rect { fill: #fff; stroke: var(--ink); stroke-width: 1.5; }
.die circle { fill: var(--ink); }
.die.seat rect { fill: var(--seat); stroke: color-mix(in srgb, var(--seat) 60%, #000); }  /* the roller's color */
.die.seat circle { fill: #fff; }
.dice { display: inline-flex; gap: 3px; align-items: center; }
.dice.empty { font-size: 11px; opacity: .8; }
.dice i { font-style: normal; font-size: 12px; font-weight: 700; }
.dice.stale { opacity: .5; }
.dice.stale i:first-child { font-size: 10px; text-transform: uppercase; margin-right: 1px; }

/* A status */
.A { padding: 7px 12px 7px; background: linear-gradient(180deg, var(--sky), var(--sky2)); color: #fff;
  border-bottom: 4px solid var(--seat); }
.A1 { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; opacity: .95; }
.A2 { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.phase { font-weight: 800; flex: 1; font-size: 16px; text-shadow: 0 1px 0 rgba(0,0,0,.15); }
.clock { font-weight: 800; background: #fff; color: var(--ink); border-radius: 8px; padding: 0 6px; }
.clock.shame { background: var(--alert); color: #fff; }
.pulse { animation: pulse 1s infinite; }
@keyframes pulse { 50% { box-shadow: inset 0 0 0 4px var(--sun); } }

/* B opponents */
.B { display: flex; gap: 6px; padding: 6px 8px; background: #eef7fd; border-bottom: 1px solid var(--line); }
.chip { flex: 1; border: 1.5px solid var(--line); border-left: 5px solid var(--seat); border-radius: 9px;
  padding: 3px 6px; background: #fff; min-width: 0; }
.chip.active { background: color-mix(in srgb, var(--seat) 18%, #fff); border-color: var(--seat); box-shadow: 0 0 0 2px var(--seat); }
.chip.picked { box-shadow: 0 0 0 3px var(--ink); }
.chip.shamed { background: var(--alert); border-color: var(--alert); color: #fff; }
.chip.shamed .chip-name { color: #fff; }
.chip.left { opacity: .5; border-style: dashed; background: #f3f5f8; }
.pname.gone { opacity: .6; }
.chip-name { font-weight: 800; font-size: 13px; color: var(--seat); display: flex; justify-content: space-between; }
.now { font-size: 11px; }
.chip-stats { display: flex; gap: 5px; align-items: center; font-size: 11px; white-space: nowrap; margin-top: 1px; }
.ncards { font-weight: 700; color: var(--mute); display: inline-flex; align-items: center; gap: 2px; }
.ncards::before { content: ""; width: 9px; height: 12px; border: 1.5px solid var(--mute); border-radius: 2px;
  box-shadow: 2px -2px 0 -0.5px #fff, 2px -2px 0 1px var(--mute); }
.slots { display: inline-flex; gap: 2px; }
.slot { width: 16px; height: 16px; border: 1.5px dashed #c7cfdb; border-radius: 4px; font-size: 10px; display: grid; place-items: center; }
.slot.on { border: 1.5px solid var(--landmark); background: var(--landmark-l); }

/* tabs and C panel */
.tabs { display: flex; background: #fff; border-bottom: 1px solid var(--line); }
.tabs span { flex: 1; text-align: center; padding: 6px 0; font-size: 13px; color: var(--mute); font-weight: 600; }
.tabs span.on { color: var(--ink); box-shadow: inset 0 -3px 0 var(--orange); }
.C { flex: 1; overflow: hidden; padding: 0 8px 6px; }
.sec { font-size: 11px; font-weight: 800; letter-spacing: .04em; margin: 6px 0 3px; display: flex; gap: 6px; align-items: baseline; }
.sec small { font-weight: 500; color: var(--mute); letter-spacing: 0; }
.note { font-size: 11px; color: var(--mute); font-weight: 500; }

/* full cards */
.row5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.row4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.card { position: relative; height: 76px; border-radius: 7px; background: var(--cl); border: 2px solid var(--cc);
  overflow: hidden; text-align: center; filter: saturate(.35) opacity(.6); }
.card.ok, .card.built { filter: none; }
.card.ok { box-shadow: 0 2px 0 var(--cc), 0 3px 8px rgba(0,0,0,.15); }
.cband { background: var(--cc); color: #fff; font-weight: 800; font-size: 12px; line-height: 17px; }
.c-landmark .cband { color: #4a3500; }
.cart { font-size: 24px; line-height: 30px; }
.cname { font-size: 8.5px; line-height: 1.1; font-weight: 700; padding: 0 2px; }
.ccost { position: absolute; left: 2px; top: 19px; min-width: 17px; height: 17px; font-size: 10px; }
.ctype { position: absolute; right: 2px; top: 20px; font-size: 10px; }
.ccheck { position: absolute; left: 3px; top: 19px; font-weight: 900; color: var(--grass); }
.stack { position: absolute; right: 2px; bottom: 1px; font-size: 9px; font-weight: 800; background: #fff; border-radius: 6px; padding: 0 3px; }
.card.lmk { height: 50px; }
.card.lmk .cband { font-size: 10px; line-height: 14px; }
.card.lmk .cart { font-size: 17px; line-height: 21px; }
.card.lmk .ccost, .card.lmk .ccheck { top: 15px; }
.row4.locked .card { filter: saturate(.2) opacity(.45); }
.c-blue { --cc: var(--blue); --cl: var(--blue-l); } .c-green { --cc: var(--green); --cl: var(--green-l); }
.c-red { --cc: var(--red); --cl: var(--red-l); } .c-purple { --cc: var(--purple); --cl: var(--purple-l); }
.c-landmark { --cc: var(--landmark); --cl: var(--landmark-l); }

/* mini cards; extra copies show as cards stacked behind */
.mini { position: relative; display: inline-grid; place-items: center; width: 30px; height: 36px; border-radius: 5px;
  background: var(--cl); border: 2px solid var(--cc); font-size: 17px; flex: none; }
.mini.deep1 { box-shadow: 3px 3px 0 -1px var(--cl), 3px 3px 0 1px var(--cc); margin-right: 3px; }
.mini.deep2 { box-shadow: 3px 3px 0 -1px var(--cl), 3px 3px 0 1px var(--cc), 6px 6px 0 -1px var(--cl), 6px 6px 0 1px var(--cc); margin-right: 6px; }
.mini i { position: absolute; right: -6px; bottom: -6px; font-style: normal; font-size: 9px; font-weight: 800; background: var(--ink);
  color: #fff; border-radius: 6px; padding: 0 3px; }
.mini.sel { box-shadow: 0 0 0 3px var(--orange); }
.mini.pickable { cursor: pointer; }

/* town: two columns of the 1-12 track */
.lms { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 4px; }
.lmsec { align-items: center; min-height: 28px; margin-bottom: 0; }
.lms .mini { width: 24px; height: 28px; font-size: 14px; }
.track { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.thead { display: flex; align-items: center; gap: 2px; font-size: 10.5px; font-weight: 700; color: var(--mute); margin-bottom: 2px; }
.trow { display: flex; align-items: center; gap: 5px; min-height: 44px; border-bottom: 1px dashed var(--line); }
.tcards .mini { width: 33px; height: 40px; font-size: 19px; }  /* town cards fill most of the row */
.trow.none .tnum { color: #c2cbd6; background: none; }
.trow.hit { background: #fff3b0; border-radius: 6px; }
.tnum { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 12px;
  background: var(--ink); color: #fff; flex: none; }
.tcards { display: flex; flex-wrap: wrap; gap: 4px 5px; }

/* log: one tinted block per turn */
.log { font-size: 12px; }
.lturn { border-left: 4px solid var(--seat, #ccc); background: color-mix(in srgb, var(--seat, #ccc) 9%, #fff); border-radius: 6px;
  margin-bottom: 4px; padding: 2px 6px; }
.lturn.mine { background: color-mix(in srgb, var(--seat) 20%, #fff); }
.lhead { font-weight: 800; color: color-mix(in srgb, var(--seat, #555) 70%, #000); }
.lline { padding-left: 6px; }
.lline.bad { color: var(--alert); font-weight: 700; }

/* D action bar */
.D { display: flex; gap: 8px; align-items: center; padding: 8px 10px 12px; border-top: 1px solid var(--line); background: #fff; }
.btn { flex: 1; min-height: 46px; border: 2px solid var(--sky); background: #fff; color: var(--ink); border-radius: 12px;
  font: inherit; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.btn.primary { background: var(--orange); border-color: var(--orange); color: #fff; box-shadow: 0 3px 0 #d96a12; }
.btn.roll .die rect { stroke-width: 1.8; }
.btn[disabled] { opacity: .4; box-shadow: none; }
.btn.ghost { border-color: transparent; color: var(--mute); background: none; box-shadow: none; }
.btn.big { width: 100%; margin-top: 8px; }
.wait, .hint { flex: 1; color: var(--mute); font-size: 13px; text-align: center; }
.hint { flex: 2; text-align: left; }

/* overlays */
.sheet { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 18px 18px 0 0;
  padding: 6px 14px 14px; box-shadow: 0 -8px 24px rgba(0,0,0,.2); }
.sheet.tall { top: 110px; overflow: hidden; display: flex; flex-direction: column; }
.sheet .panel-in { flex: 1; overflow: hidden; }
.grab { width: 40px; height: 4px; background: #c2cbd6; border-radius: 2px; margin: 0 auto 8px; }
.sheet-title { font-size: 17px; font-weight: 800; padding: 4px 2px; }
.sheet-title.seat { color: var(--seat); }
.sheet-facts { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--mute); margin-top: 8px; }
.sheet-facts b { color: var(--ink); font-size: 15px; }
.step { font-size: 12px; font-weight: 800; margin: 10px 0 5px; }
.grid5 { display: grid; grid-template-columns: repeat(5, 36px); gap: 8px; }
.grid5 .mini { width: 36px; height: 42px; font-size: 20px; }
.swap-opp { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.swap-opp .who { width: 34px; font-size: 13px; }
.bigcard { border: 3px solid var(--cc); background: var(--cl); border-radius: 12px; overflow: hidden; text-align: center; }
.bigcard .cband { font-size: 15px; line-height: 26px; }
.bart { font-size: 54px; line-height: 70px; }
.bname { font-size: 20px; font-weight: 800; }
.bkind { font-size: 12px; color: var(--mute); margin-top: 2px; }
.btext { font-size: 14px; margin: 8px 14px; }
.bcost { display: flex; gap: 6px; justify-content: center; align-items: center; font-size: 12px; color: var(--mute); padding-bottom: 10px; }
.zoom { position: absolute; inset: 0; background: rgba(20,40,70,.55); display: flex; flex-direction: column; justify-content: center;
  padding: 0 36px; gap: 10px; text-align: center; }
.zoom .bigcard { box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.note.light { color: #fff; }
/* the roll panel: docked above the action bar (in the layout, so it covers no cards); .big lifts it
   over the lower half of the screen */
.dock { flex: none; height: 104px; overflow: hidden; background: #fff; border-top: 3px solid var(--sun2);
  padding: 5px 12px 4px; position: relative; }
.dock::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  background: linear-gradient(transparent, #fff); }
.dock.big { position: absolute; left: 0; right: 0; bottom: 66px; height: 52%; z-index: 5; overflow-y: auto;
  border: 3px solid var(--sun2); border-radius: 16px 16px 0 0; box-shadow: 0 -10px 28px rgba(0,0,0,.2); }
.dock.big::after, .dock.slim::after { display: none; }
.dock.slim { height: auto; padding: 5px 12px; }
.dock .coin { min-width: 14px; height: 14px; font-size: 0; padding: 0; margin-left: 2px; }
.dock-title { font-weight: 800; display: flex; gap: 4px; align-items: center; font-size: 13.5px; }
.dock-title .note { margin-left: auto; font-size: 10.5px; }
.fsec { font-size: 11px; font-weight: 800; color: var(--orange); margin-top: 3px; }
.fsec.other { color: var(--mute); }
.dock ol { margin: 0; padding-left: 18px; font-size: 12.5px; }
.dock ol.other { color: #9aa5b4; font-size: 12px; }
.dock li.later { opacity: .25; }
.dock li.none { list-style: none; margin-left: -18px; color: var(--mute); }
.banner { padding: 8px 12px; font-weight: 800; text-align: center; }
.banner.nag { background: var(--sun); color: #5a3d00; animation: flash .8s steps(1) infinite; font-size: 17px; }
@keyframes flash { 50% { background: #fff6c2; } }
.banner.shame { background: var(--alert); color: #fff; }
.banner.toast { background: var(--ink); color: #fff; font-weight: 600; }
.banner.setup { background: var(--grass); color: #fff; font-weight: 700; }
.reconnect { background: var(--ink); color: #fff; font-size: 12px; text-align: center; padding: 3px; }

/* full screens */
.full { position: absolute; inset: 0; background: linear-gradient(180deg, #bfe7fb, var(--page) 45%); padding: 28px 22px;
  display: flex; flex-direction: column; gap: 10px; }
.full h3 { margin: 0; font-size: 24px; font-weight: 900; }
.full h3.logo { color: var(--orange); text-shadow: 0 2px 0 #fff; }
.full .lead { color: #44546a; margin: 0 0 6px; }
.field { border: 2px solid var(--line); border-radius: 12px; padding: 11px 12px; background: #fff; color: var(--mute); }
.seg { display: flex; gap: 6px; } .seg .btn { min-height: 42px; }
.seg .btn.on { background: var(--sky); color: #fff; }
.divider { display: flex; align-items: center; gap: 10px; color: var(--mute); font-size: 12px; margin: 10px 0 4px; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1.5px solid #b9c7d6; }
.big-key { font-size: 18px; font-weight: 800; text-align: center; padding: 12px; border: 2px dashed var(--sky);
  border-radius: 12px; background: #fff; }
.seats { margin: 0; padding: 0; list-style: none; }
.seats li { padding: 10px 6px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.seats li .pname { font-weight: 600; } .seats li.me .pname { font-weight: 900; }
.seats li.open { color: var(--mute); font-style: italic; }
.host { font-size: 11px; color: var(--mute); }
.standings { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.standings th, .standings td { text-align: left; padding: 5px 4px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.standings th { font-size: 11px; color: var(--mute); }
.standings tr.win { background: var(--landmark-l); }
.standings tr.win td { font-weight: 800; }
.standings .mini { width: 24px; height: 28px; font-size: 14px; margin-right: 2px; }
.ended { justify-content: center; text-align: center; }
.ended h3 { font-size: 26px; }
.spacer { flex: 1; }

/* buttons in column layouts keep their own height */
.full .btn, .sheet .btn { flex: none; }
.full .seg .btn { flex: 1; }

/* the live app: the phone frame fills a phone; on a computer it is a phone-sized column */
html, body.app-page { height: 100%; }
body.app-page { display: flex; justify-content: center; overflow: hidden; }
.phone.app { width: 100%; max-width: 440px; height: 100dvh; border: none; border-radius: 0; box-shadow: none; }
.app .C, .app .sheet .panel-in, .app .full { overflow-y: auto; }
.app .D { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.app [data-tab], .app .chip, .app .card, .app .mini, .app [data-dock] { cursor: pointer; }
.app { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.app input { font: inherit; color: var(--ink); width: 100%; outline: none; }
.app input:focus { border-color: var(--sky); }
.msg { color: var(--alert); font-weight: 700; min-height: 18px; font-size: 13px; }
.info { color: var(--mute); font-size: 12.5px; min-height: 17px; }
.btn.leave { width: 100%; margin: 12px 0 4px; border-color: var(--alert); color: var(--alert); flex: none; }
.btn.busy { opacity: .6; pointer-events: none; }
@media (min-width: 600px) {
  .phone.app { height: min(calc(100dvh - 32px), 860px); margin-top: 16px; border: 1px solid #9fb6c9; border-radius: 18px;
    box-shadow: 0 6px 20px rgba(30,80,120,.15); }
}