:root {
  --sea: #1d6aa3; --sea-deep: #123f63;
  --parch: #f6eedb; --panel: #fffaf0; --panel-2: #f3e8cf;
  --ink: #3b2a1a; --muted: #8a7556; --line: #e1d1ac;
  --gold: #e7b736; --gold-ink: #7a4f12; --good: #3f8a3a; --bad: #c4412c;
  --radius: 14px;
  --shadow: 0 6px 20px rgba(8, 30, 50, .28);
  --font-d: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --font-b: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html, body, #app { margin: 0; height: 100%; }
body {
  font-family: var(--font-b); color: var(--ink);
  background: radial-gradient(ellipse at 50% 30%, #2a7fbd 0%, var(--sea) 45%, var(--sea-deep) 100%) fixed;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; }
.hidden { display: none !important; }

/* ---------- buttons ---------- */
.btn {
  appearance: none; border: 0; cursor: pointer; font-weight: 800; font-size: 15px;
  padding: 10px 16px; border-radius: 11px; color: var(--ink);
  background: linear-gradient(#fff8e6, #f1e2bd); box-shadow: 0 3px 0 #c9b384, 0 4px 10px rgba(0,0,0,.12);
  transition: transform .06s, filter .15s; display: inline-flex; align-items: center; gap: 7px; justify-content: center;
}
.btn:hover:not(:disabled) { filter: brightness(1.04); }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #c9b384; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: linear-gradient(#f7cf55, #e0a526); box-shadow: 0 3px 0 #a3700f, 0 4px 10px rgba(0,0,0,.15); color: #4a2e05; }
.btn.go { background: linear-gradient(#5fb14f, #3f8a3a); box-shadow: 0 3px 0 #2a5f27; color: #fff; }
.btn.danger { background: linear-gradient(#e1644d, #c4412c); box-shadow: 0 3px 0 #87281a; color: #fff; }
.btn.small { padding: 6px 10px; font-size: 13px; border-radius: 9px; }
.btn.active { outline: 3px solid #fff; outline-offset: 1px; background: linear-gradient(#fff, #fde9a8); }
input[type=text], input[type=password] {
  font: inherit; font-size: 16px; padding: 11px 13px; border-radius: 10px; border: 2px solid var(--line);
  background: #fff; color: var(--ink); width: 100%; outline: none;
}
input[type=text]:focus, input[type=password]:focus { border-color: var(--gold); }

/* ---------- home & lobby ---------- */
.home { min-height: 100%; display: grid; place-items: center; padding: 24px 16px; position: relative; overflow: hidden; }
.home .deco { position: absolute; inset: 0; opacity: .35; pointer-events: none; }
.home .deco svg { width: 100%; height: 100%; }
.card {
  position: relative; background: var(--panel); border-radius: 20px; box-shadow: var(--shadow), inset 0 0 0 3px #f0e2bf;
  padding: 28px; width: 100%; max-width: 440px;
}
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.brand h1 { font-family: var(--font-d); font-size: 40px; margin: 0; letter-spacing: .5px; color: var(--ink); }
.brand svg { width: 58px; height: 58px; }
.tag { color: var(--muted); margin: 0 0 22px; font-weight: 700; }
.field label { display: block; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 6px; }
.row { display: flex; gap: 10px; align-items: center; }
.or { text-align: center; color: var(--muted); font-weight: 800; margin: 18px 0; font-size: 13px; letter-spacing: .1em; }
.codebox { text-transform: uppercase; letter-spacing: .3em; font-family: var(--font-d); font-weight: 600; text-align: center; }
.lobby-code { font-family: var(--font-d); font-size: 54px; letter-spacing: .18em; text-align: center; margin: 4px 0 2px; color: var(--gold-ink); }
.plist { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 8px; }
.plist li { display: flex; align-items: center; gap: 10px; background: var(--panel-2); padding: 9px 12px; border-radius: 11px; font-weight: 800; }
.plist .grow { flex: 1; }
.swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #3b2a1a; flex: none; }
.colors { display: flex; gap: 6px; }
.colors button { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #3b2a1a; cursor: pointer; padding: 0; }
.colors button.taken { opacity: .45; cursor: default; background-image: linear-gradient(135deg, transparent 44%, #3b2a1a 44%, #3b2a1a 56%, transparent 56%) !important; } /* (taken: crossed out, still its own colour) */
.muted { color: var(--muted); }
.small-note { font-size: 13px; color: var(--muted); font-weight: 700; }

/* ---------- game layout ---------- */
.game { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.topbar {
  display: flex; align-items: center; gap: 12px; padding: 8px 14px; color: #fff;
  background: rgba(8, 30, 50, .35); backdrop-filter: blur(6px);
}
.topbar .logo { font-family: var(--font-d); font-size: 22px; font-weight: 700; display: flex; align-items: center; gap: 7px; cursor: pointer; }
.topbar .logo svg { width: 34px; height: 34px; margin: -5px 0; } /* (bigger than the bar's text, without making the bar taller) */
.chip { white-space: nowrap; background: rgba(255,255,255,.14); border-radius: 999px; padding: 5px 12px; font-weight: 800; font-size: 13px; cursor: pointer; border: 0; color: #fff; }
.status { flex: 1; text-align: center; font-weight: 800; font-size: 16px; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.status.mine { color: #ffe08a; }
.main { display: grid; grid-template-columns: minmax(0, 1fr) 350px; min-height: 0; overflow: hidden; }
.boardwrap { position: relative; min-height: 0; overflow: hidden; }
#board { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-select: none; }

/* cream panels floating on the sea */
.panel { background: linear-gradient(#fffaf0, #f3e7cb); border-radius: 12px; box-shadow: 0 2px 0 #c9b384, 0 6px 14px rgba(5, 25, 45, .28); }
.av { width: 34px; height: 34px; flex: none; border-radius: 50%; border: 2.5px solid #3b2a1a; display: inline-grid; place-items: center; font-family: var(--font-d); font-weight: 700; font-size: 16px; }
.av.big { width: 56px; height: 56px; font-size: 25px; border-width: 3px; }

/* side column: log, chat, bank, players */
.side { display: flex; flex-direction: column; gap: 8px; padding: 8px 8px 8px 0; min-height: 0; overflow: hidden; }
.logpanel { flex: 1; min-height: 90px; display: flex; overflow: hidden; }
.log { flex: 1; overflow-y: auto; padding: 10px 12px; font-size: 15px; line-height: 1.6; }
.log > div { padding: 1px 0; }
.log hr { border: 0; border-top: 1.5px solid #dccb9f; margin: 7px 0; }
.log .welcome { color: var(--muted); font-weight: 700; }
.log .private { color: #6b4fa3; }
.lp { white-space: nowrap; }
.lp i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #3b2a1a; margin-right: 4px; vertical-align: 0; }
.lp b { font-weight: 800; }
.lc { display: inline-grid; place-items: center; width: 19px; height: 25px; border-radius: 3.5px; border: 1.5px solid #fffaf0; box-shadow: 0 0 0 1px rgba(0,0,0,.18); vertical-align: -5px; margin: 0 1px; font-style: normal; }
.lc svg { width: 17px; height: 17px; }
.lc.devc { background: linear-gradient(#7a5cb5, #523a8a); color: #fff; font-family: var(--font-d); font-weight: 700; font-size: 14px; }
.ld svg { width: 22px; height: 22px; vertical-align: -5px; margin: 0 1px; }
.lpiece { width: 24px; height: 24px; vertical-align: -6px; }
.chatpanel { flex: none; overflow: hidden; }
.panelhead { width: 100%; display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 10px 12px; font: 800 17px var(--font-b); color: var(--ink); cursor: pointer; }
.panelhead .chev { width: 18px; height: 18px; margin-left: auto; transition: transform .2s; }
.chatpanel.closed .chev { transform: rotate(180deg); }
.chatpanel.closed .chatbody { display: none; }
.unread { background: var(--bad); color: #fff; border-radius: 99px; font-size: 11px; padding: 1px 7px; }
.chatlog { max-height: 150px; overflow-y: auto; padding: 6px 12px; font-size: 15px; line-height: 1.5; border-top: 1.5px solid #e3d5b5; }
.chatform { display: flex; gap: 6px; padding: 4px 8px 8px; }
.chatform input { padding: 9px 11px; font-size: 15px; }
.bankpanel { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px 8px; }
.bankicon svg { width: 36px; height: 36px; display: block; }
.bankcards { display: flex; gap: 6px; flex: 1; }
.bpile { position: relative; flex: 1; max-width: 40px; aspect-ratio: 40 / 62; }
.bpile .bcard { position: absolute; left: 0; right: 0; height: calc(100% - 8px); }
.bpile.zero { opacity: .35; }
.bcard { border-radius: 7px; display: grid; place-items: center; border: 2.5px solid #fffaf0; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.bcard svg { width: 80%; height: auto; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.bcard.devback { background: linear-gradient(#7a5cb5, #523a8a); }
.bcard.zero { opacity: .4; }
.players { flex: none; padding: 8px; display: grid; gap: 8px; }
.pstats { display: flex; align-items: center; gap: 16px; }
.pcard { position: relative; width: 40px; height: 54px; margin-right: 6px; }
.pcard > span { width: 40px; height: 54px; }
.devcard, .rescard { display: grid; place-items: center; border: 2.5px solid #fffaf0; border-radius: 7px; box-shadow: 0 1px 3px rgba(0,0,0,.3); box-sizing: border-box; }
.devcard { background: linear-gradient(#7a5cb5, #523a8a); }
.rescard { background: linear-gradient(#b5834a, #8a5c2c); }
.rescard svg { width: 33px; height: 33px; display: block; }
.devcard { display: block !important; overflow: hidden; }
.devcard svg { width: 100%; height: 100%; display: block; }
.ibtn .devcard.btn { height: 54px; width: 40px; padding: 0; }
.ibtn .devcard svg { width: 100%; height: 100%; display: block; }
.devcard.lcdev { display: inline-grid; width: 19px; height: 25px; border-width: 1.5px; border-radius: 3.5px; vertical-align: -6px; margin: 0 1px; }
.devcard.lcdev svg { width: 100%; height: 100%; }
.pico { display: grid; justify-items: center; align-content: center; height: 54px; gap: 2px; font: 700 15.5px var(--font-d); color: #5b4a33; }
.pico svg { width: 30px; height: 24px; display: block; }
.pico.on { color: #9a6d12; }
.pico.on svg { filter: drop-shadow(0 0 3px rgba(231,183,54,.9)); }
.mini { display: inline-block; width: 12px; height: 16px; border-radius: 3px; border: 1.5px solid #6b5636; background: #fff; vertical-align: -3px; }
.mini.dev { background: #6b4fa3; border-color: #3f2d66; }
.badge { font-size: 10.5px; font-weight: 800; background: var(--gold); color: #4a2e05; padding: 1px 6px; border-radius: 99px; }
.off { font-size: 11px; color: var(--bad); font-weight: 800; }

/* bottom bar: hand | turn box + timer over the build buttons | your player box */
.dock { display: grid; grid-template-columns: minmax(0, 1fr) auto 342px; grid-template-rows: auto auto; gap: 7px 8px; padding: 0 8px 8px; align-items: stretch; }
.controls { display: contents; }
.turnrow { grid-column: 2; grid-row: 1; }
.actions { grid-column: 2; grid-row: 2; }
.handpanel { grid-column: 1; grid-row: 2; }
.mebox { grid-column: 3; grid-row: 1 / 3; }
.handpanel { min-width: 0; display: flex; gap: 14px; align-items: center; padding: 4px 14px; overflow-x: auto; overflow-y: visible; min-height: 74px; }
.emptyhand { color: var(--muted); font-weight: 700; font-size: 13px; }
.stack { position: relative; height: 66px; flex: none; }
.stack .scard { position: absolute; top: 0; }
.stack .scard .rcard { width: 48px; height: 66px; }
.stack .scard .rcard svg { width: 34px; height: 34px; }
.stack .scard + .scard .rcard { box-shadow: -3px 0 5px rgba(0,0,0,.22); }
#devs .stack { cursor: pointer; }
.flycard { position: fixed; z-index: 80; width: 44px; height: 60px; border-radius: 8px; border: 2.5px solid #fffaf0; box-shadow: 0 6px 16px rgba(0,0,0,.4); display: grid; place-items: center; pointer-events: none; }
.flycard svg { width: 32px; height: 32px; }
.hand { display: flex; gap: 6px; align-items: center; flex: none; }
#devs:empty { display: none; }
#devs { padding-left: 12px; border-left: 2px solid #e2cf9f; }
.rcard {
  width: 52px; height: 72px; border-radius: 9px; position: relative; display: grid; place-items: center;
  border: 2.5px solid #fffaf0; box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.rcard svg { width: 38px; height: 38px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
/* lift the picture clear of the label at the bottom of each card */
.rcard > svg { transform: translateY(-8px); }
.rcard.zero { opacity: .32; }
.rcard .lbl { position: absolute; bottom: 2px; font-size: 9.5px; font-weight: 800; color: rgba(255,255,255,.92); text-transform: uppercase; letter-spacing: .04em; text-shadow: 0 1px 1px rgba(0,0,0,.4); }
.dcard { background: linear-gradient(#7a5cb5, #523a8a); cursor: default; }
.dcard.playable { cursor: pointer; outline: 3px solid #ffe08a; animation: pulse 1.6s infinite; }
.turnrow { display: flex; gap: 7px; }
.turnbox { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 5px; font-weight: 800; font-size: 14.5px; }
.turnbox .av { width: 30px; height: 30px; font-size: 14px; }
.turnbox .tbtext { flex: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.turnbox.mine { background: linear-gradient(#fff6d6, #f7dd8a); }
.clock { flex: none; width: 92px; display: grid; place-items: center; font: 700 20px var(--font-d); letter-spacing: .05em; padding: 4px 0; }
.clock.low { color: var(--bad); animation: beat 1s ease-in-out infinite; }
.actions { display: flex; gap: 7px; align-items: stretch; }
.ibtn {
  width: 78px; height: 74px; padding: 0; border: 0; border-radius: 12px; cursor: pointer; display: grid; place-items: center; position: relative;
  background: linear-gradient(#a8f0ea, #3dbdc0 55%, #2a9ea6); border: 3px solid #fff !important; box-shadow: 0 3px 0 rgba(10,60,80,.35), 0 5px 12px rgba(5,25,45,.3); transition: transform .06s, filter .15s, opacity .15s;
}
.ibtn svg { width: 46px; height: 46px; display: block; }
.ibtn:hover:not(:disabled):not(.off) { filter: brightness(1.05); }
.ibtn:active:not(:disabled):not(.off) { transform: translateY(2px); box-shadow: 0 1px 0 rgba(10,60,80,.35); }
.ibtn:disabled, .ibtn.off { cursor: not-allowed; }
.ibtn:disabled, .ibtn.off { background: linear-gradient(#c9ecea, #8ccfd1); }
.ibtn:disabled > svg, .ibtn:disabled > .dicepair, .ibtn:disabled > .devcard, .ibtn.off > svg, .ibtn.off > .dicepair, .ibtn.off > .devcard { opacity: .45; filter: grayscale(.5); }
.ibtn .cnt { position: absolute; top: 0; right: 0; background: rgba(255,255,255,.55); color: #12555b; font: 700 13px var(--font-d); min-width: 26px; height: 22px; padding: 0 5px 0 7px; border-radius: 0 12px 0 12px; display: grid; place-items: center; }
.ibtn.waitbtn:disabled > svg, .ibtn.waitbtn.off > svg { opacity: .9; filter: none; }


.ibtn.go svg { width: 40px; height: 40px; }
.ibtn.active { box-shadow: 0 0 0 5px rgba(255,214,90,.85), 0 5px 12px rgba(5,25,45,.3); background: linear-gradient(#e6fffb, #8de3df); }
.ibtn.primary.ready { animation: glow 1.4s ease-in-out infinite; }
.dicepair { display: flex; gap: 2px; }
.dicepair svg { width: 24px; height: 24px; }
.mebox { padding: 8px; display: grid; align-content: center; }


.zoomctl { position: absolute; left: 12px; bottom: 12px; display: grid; gap: 6px; z-index: 3; }
.zoomctl button { width: 36px; height: 36px; border: 0; border-radius: 10px; background: rgba(255,250,240,.92); color: var(--ink); font-size: 20px; font-weight: 800; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.zoomctl button:hover { background: #fff; }
#board { cursor: grab; }
#board.zoomed { touch-action: none; }
#board.panning { cursor: grabbing; }
.dice { position: absolute; right: 16px; bottom: 16px; display: flex; gap: 10px; z-index: 3; }
.dice svg { width: 66px; height: 66px; filter: drop-shadow(0 4px 5px rgba(0,0,0,.35)); }
.dice.idle svg { opacity: .9; filter: grayscale(.3) drop-shadow(0 4px 5px rgba(0,0,0,.35)); }
.dice.canroll { cursor: pointer; }
.dice.canroll svg { animation: bob 1.3s ease-in-out infinite; filter: drop-shadow(0 0 10px rgba(255,224,138,.95)); }
.dice.canroll svg:nth-child(2) { animation-delay: .15s; }
.dice.roll svg { animation: roll .6s ease-out; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* trade panel (opened from your hand) */
.tradepanel { position: absolute; left: 10px; bottom: 10px; z-index: 6; display: flex; gap: 8px; align-items: stretch; width: min(700px, calc(100% - 20px)); }
.tmain { flex: 1; min-width: 0; display: grid; gap: 6px; }
.trow { display: flex; align-items: center; gap: 6px; padding: 8px 10px; min-height: 64px; }
.trow .rcard { width: 42px; height: 58px; cursor: pointer; }
.trow .rcard svg { width: 30px; height: 30px; }
.trow .stack { height: 58px; cursor: pointer; }
.trow .stack .scard .rcard { width: 42px; height: 58px; }
.trow.want .tpick:hover .rcard, .trow.mine .stack:hover .rcard { transform: translateY(-3px); }
.trow .tlabel { margin-left: auto; }
.trow .tlabel svg { width: 30px; height: 30px; display: block; opacity: .8; }
.trow.deal { display: grid; gap: 8px; align-items: center; }
.tline { display: flex; align-items: center; gap: 12px; min-height: 58px; }
.tside { display: flex; align-items: center; gap: 4px; width: 66px; flex: none; }
.tside > svg:first-child { width: 32px; height: 26px; }
.tside .av { width: 30px; height: 30px; font-size: 14px; }
.tside .arr { width: 18px; height: 22px; }
.tcards { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tempty { color: var(--muted); font-weight: 700; font-size: 13px; }
.thint { font-size: 12.5px; font-weight: 800; color: var(--muted); }
.tbtns { display: grid; gap: 6px; align-content: stretch; }
.tbtns .ibtn { width: 70px; height: auto; min-height: 64px; }
.tbtns .ibtn svg { width: 38px; height: 38px; }
.tbtns .ibtn .tick { position: absolute; top: 4px; right: 4px; width: 16px; height: 16px; }

/* board interactivity */
.hit { cursor: pointer; }
.buildspot .pulse { fill: rgba(255, 236, 160, .5); stroke: #3b2a1a; stroke-width: 2.2; transform-box: fill-box; transform-origin: center; animation: spotpulse 2.2s ease-in-out infinite; }
.buildspot:hover .pulse { fill: rgba(255, 224, 120, .8); }
.buildspot.hoveronly .pulse { opacity: 0; transition: opacity .15s; }
.buildspot.hoveronly:hover .pulse { opacity: 1; }
.buildspot.sel .pulse { fill: rgba(255, 214, 90, .95); stroke: #3b2a1a; animation-duration: 1.4s; }
.preview .bob { animation: bob 1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.rollflash { fill: #000; opacity: 0; pointer-events: none; animation: rollflash 1.2s ease-out forwards; }
@keyframes spotpulse { 0%,100% { transform: scale(.78); } 50% { transform: scale(1.12); } }
@keyframes rollflash { 0% { opacity: 0; } 15% { opacity: .38; } 70% { opacity: .3; } 100% { opacity: 0; } }
.spot { fill: #fff; stroke: #3b2a1a; stroke-width: 2.5; animation: blink 1.2s ease-in-out infinite; }
.espot { stroke: #fff; stroke-width: 9; stroke-linecap: round; stroke-dasharray: 2 6; animation: blink 1.2s ease-in-out infinite; }
.hspot { fill: #fff; animation: blinkSoft 1.2s ease-in-out infinite; }
.hit:hover .spot { fill: #ffe08a; }
.hit:hover .espot { stroke: #ffe08a; stroke-dasharray: none; }
.hit:hover .hspot { fill: #ffe08a; }
.city-target { fill: none; stroke: #ffe08a; stroke-width: 3; animation: blink 1.2s infinite; }
.piece-new { animation: pop .5s cubic-bezier(.3,1.4,.5,1); transform-box: fill-box; transform-origin: 50% 90%; }
@keyframes pop { 0% { opacity: 0; translate: 0 -16px; scale: 1.3; } 45% { opacity: 1; translate: 0 2px; scale: .93; } 100% { translate: 0 0; scale: 1; } }
.puffc { fill: #f7efdb; stroke: rgba(90,70,40,.4); stroke-width: .8; opacity: 0; transform-box: fill-box; transform-origin: center; animation: puff .65s ease-out forwards; }
@keyframes puff { 0% { opacity: .9; transform: translate(0,0) scale(.4); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.7); } }
.roadglow { stroke: #ffe27a; stroke-width: 20; opacity: .9; animation: roadglow .9s ease-in-out infinite; filter: drop-shadow(0 0 7px #ffd23a); }
@keyframes roadglow { 0%,100% { opacity: .35; } 50% { opacity: .95; } }
.token.hot circle:nth-child(2) { filter: drop-shadow(0 0 6px #ffcf3a); }

/* trade offer panel */
.offer {
  position: absolute; top: 12px; right: 12px; background: var(--panel); border-radius: 14px; box-shadow: var(--shadow);
  padding: 12px 14px; max-width: 330px; font-weight: 700; font-size: 14px; z-index: 5;
}
.offer h4 { margin: 0 0 6px; font-family: var(--font-d); font-size: 17px; }
.offer .cards { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; margin: 4px 0; }
.chipcard { display: inline-flex; align-items: center; gap: 2px; background: var(--panel-2); border-radius: 7px; padding: 2px 6px 2px 2px; font-weight: 800; }
.chipcard svg { width: 22px; height: 22px; }
.offer .resp { display: flex; align-items: center; gap: 8px; margin-top: 6px; }

/* modal */
#modal { position: fixed; inset: 0; background: rgba(8, 20, 34, .55); display: grid; place-items: center; z-index: 50; padding: 16px; }
.mbox { background: var(--panel); border-radius: 18px; box-shadow: var(--shadow); padding: 20px; width: 100%; max-width: 480px; max-height: 92vh; overflow: auto; }
.mbox h3 { margin: 0 0 4px; font-family: var(--font-d); font-size: 24px; }
.mbox p { margin: 4px 0 14px; color: var(--muted); font-weight: 700; }
.steppers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 8px 0; }
.stepper { display: grid; justify-items: center; gap: 4px; }
.stepper .rcard { width: 48px; height: 64px; cursor: pointer; }
.stepper .ctl { display: flex; gap: 4px; align-items: center; font-family: var(--font-d); font-weight: 600; }
.stepper .ctl button { width: 26px; height: 26px; border-radius: 8px; border: 0; background: var(--panel-2); font-weight: 800; cursor: pointer; font-size: 16px; }
.stepper .have { font-size: 11px; color: var(--muted); font-weight: 800; }
.tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.tabs button { flex: 1; }
.pickrow { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 8px 0 14px; }
.pickrow .rcard { cursor: pointer; }
.pickrow .rcard.sel { outline: 3px solid var(--gold); outline-offset: 2px; transform: translateY(-4px); }
.pickrow .rcard .rate { position: absolute; bottom: -18px; font-size: 12px; font-weight: 800; color: var(--ink); }
.mfoot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }
.sub-h { font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 10px; }
.winner { text-align: center; }
.winner .trophy { font-size: 56px; }
.rank { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 6px; text-align: left; }
.rank li { display: flex; align-items: center; gap: 10px; background: var(--panel-2); padding: 8px 12px; border-radius: 10px; font-weight: 800; }

#toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(30px); background: #1d1a17; color: #fff; padding: 10px 18px; border-radius: 99px; font-weight: 800; opacity: 0; transition: .25s; z-index: 60; pointer-events: none; max-width: calc(100vw - 32px); text-align: center; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@keyframes glow { 0%,100% { box-shadow: 0 3px 0 #a3700f, 0 0 0 0 rgba(255,214,90,.0); } 50% { box-shadow: 0 3px 0 #a3700f, 0 0 0 7px rgba(255,214,90,.45); } }
@keyframes beat { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes blink { 0%,100% { opacity: .95; } 50% { opacity: .35; } }
@keyframes blinkSoft { 0%,100% { opacity: .32; } 50% { opacity: .08; } }
@keyframes pulse { 0%,100% { outline-color: #ffe08a; } 50% { outline-color: rgba(255,224,138,.3); } }
@keyframes roll { 0% { transform: rotate(-200deg) scale(.6); } 70% { transform: rotate(15deg) scale(1.08); } 100% { transform: none; } }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

@media (max-width: 900px) {
  .game { display: flex; flex-direction: column; height: auto; min-height: 100%; overflow: visible; }
  .main { display: contents; }
  .topbar { order: 0; position: sticky; top: 0; z-index: 6; gap: 8px; padding: 8px 10px; }
  .topbar .logo span { display: none; }
  .status { font-size: 14px; }
  .boardwrap { order: 1; }
  #board { position: static; height: auto; }
  .dock { order: 2; padding: 8px; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .turnrow { min-width: 0; }
  .turnrow, .actions, .handpanel, .mebox { grid-column: 1; grid-row: auto; }
  .ibtn { height: 56px; }
  .handpanel { flex-wrap: wrap; padding: 12px 10px 8px; gap: 10px; }
  .hand { flex-wrap: wrap; min-width: 0; flex: 0 1 auto; }
  .actions { justify-content: space-between; }
  .ibtn { width: auto; flex: 1; height: 52px; }
  .ibtn .devcard.btn { height: 38px; width: 28px; border-width: 2px; border-radius: 5px; }
  .ibtn svg { width: 32px; height: 32px; }
  .side { order: 3; padding: 0 8px 8px; overflow: visible; }
  .logpanel { max-height: 260px; min-height: 140px; }
  .rcard { width: 44px; height: 62px; }
  .rcard svg { width: 32px; height: 32px; }
  .offer { left: 8px; right: 8px; max-width: none; top: auto; bottom: 8px; }
  .tradepanel { left: 6px; right: 6px; bottom: 6px; width: auto; }
  .trow .rcard, .trow .stack .scard .rcard { width: 36px; height: 50px; }
  .trow .stack { height: 50px; }
  .tbtns .ibtn { width: 52px; min-height: 52px; }
  .dice svg { width: 44px; height: 44px; }
  .dice { right: 10px; top: 10px; bottom: auto; }
  .wideboard .zoomctl { grid-auto-flow: column; left: 10px; bottom: 8px; }
  .mebox .av.big { width: 42px; height: 42px; font-size: 19px; }
  .mebox { padding: 6px 10px; }
}
.stack .scard:not(:last-of-type) .lbl { display: none; }
#hand .stack { cursor: pointer; }

.dcard .lbl { font-size: 8.5px; letter-spacing: 0; white-space: nowrap; }

.bcard.devback { display: block; overflow: hidden; }
.bcard.devback svg { width: 100%; height: 100%; display: block; filter: none; }

/* development card faces fill the whole card (art includes the inner border) */
.rcard.devface { display: block; overflow: hidden; }
.rcard.devface > svg { width: 100% !important; height: 100% !important; transform: none; filter: none; display: block; }

/* ---------- lobby ---------- */
.lobby { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.lobbygrid { display: grid; grid-template-columns: 330px minmax(0, 1fr) 320px; gap: 10px; padding: 10px; min-height: 0; max-width: 1400px; width: 100%; margin: 0 auto; }
.lcol { padding: 14px 16px; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.lcol h3 { font-family: var(--font-d); font-size: 19px; margin: 4px 0 10px; display: flex; gap: 8px; align-items: baseline; }
.lsettings h3 { margin-top: 18px; }
.lbl { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.seats { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.seats li { display: flex; align-items: center; gap: 10px; background: var(--panel-2); padding: 9px 10px; border-radius: 12px; min-height: 58px; }
.seats li.me { box-shadow: inset 0 0 0 2px var(--gold); }
.seats li.open { background: transparent; border: 2px dashed var(--line); }
.seats .grow { flex: 1; min-width: 0; }
.seats .nm { font-weight: 800; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seats .av.empty { background: #eadcb8; color: var(--muted); border-color: #c9b384; border-style: dashed; }
.seats .colors { margin-top: 5px; }
.colors button.sel { outline: 3px solid var(--gold); outline-offset: 1px; }
.badge.bot { background: #cfc3a6; }
.rdy { display: inline-block; margin-top: 3px; font-size: 12.5px; font-weight: 800; color: var(--muted); background: #eadcb8; padding: 2px 9px; border-radius: 99px; white-space: nowrap; }
.rdy.on { color: #fff; background: var(--good); }
.seats .x { border: 0; background: none; color: var(--muted); font-size: 16px; cursor: pointer; padding: 4px 6px; border-radius: 8px; }
.seats .x:hover { background: #eadcb8; color: var(--bad); }
.roombox { display: flex; gap: 22px; align-items: flex-end; flex-wrap: wrap; }
.roombox .lobby-code { text-align: left; font-size: 44px; margin: 0; line-height: 1; }
.roombox .invite { flex: 1; min-width: 220px; }
.roombox .invite .row { margin-top: 5px; }
.roombox .invite input { font-size: 14px; padding: 8px 10px; color: var(--muted); }
.maps { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px; }
/* map gallery cards: picture, name with an ⓘ, players and points, one line on what's special */
.maptile { position: relative; text-align: left; background: #fff; border: 2.5px solid var(--line); border-radius: 14px; padding: 8px 8px 10px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; color: var(--ink); transition: border-color .15s, transform .1s, box-shadow .15s; outline: none; }
.maptile:hover:not(.locked) { border-color: #d9bf7a; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(60,40,10,.12); }
.maptile:focus-visible { box-shadow: 0 0 0 3px #7fb6e6; }
.maptile.sel { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); background: #fff8e2; }
.maptile.locked { cursor: default; }
.maptile.locked:not(.sel) { opacity: .75; }
.maptile .mprev, .mapinfo .mprev { position: relative; background: radial-gradient(circle at 50% 40%, #3592d2, #1d6aa3 75%); border-radius: 10px; height: 108px; display: grid; place-items: center; overflow: hidden; }
.maptile .mprev svg, .mapinfo .mprev svg { height: 96px; width: 92%; }
.maptile .mtag { position: absolute; left: 6px; top: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .02em; color: #fff; background: rgba(8, 40, 70, .55); padding: 2px 7px; border-radius: 99px; }
.maptile .mhead { display: flex; align-items: center; gap: 6px; margin-top: 3px; padding: 0 2px; }
.maptile b { font-size: 15.5px; line-height: 1.2; }
.minfo { flex: none; width: 21px; height: 21px; border-radius: 50%; border: 2px solid #b48a3c; background: #fff; color: #8a6420; font: 800 12.5px/1 Georgia, 'Times New Roman', serif; font-style: italic; cursor: pointer; display: grid; place-items: center; padding: 0; }
.minfo:hover, .minfo:focus-visible { background: #b48a3c; color: #fff; outline: none; }
.mmeta { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 2px; }
.mmeta span { font-size: 11.5px; font-weight: 800; color: var(--gold-ink); background: #f6ead0; border-radius: 99px; padding: 2px 8px; white-space: nowrap; }
.mmeta span.sea { color: #fff; background: #2a7fbd; }
.maptile .md { font-size: 12.5px; color: var(--muted); font-weight: 700; line-height: 1.3; padding: 0 2px; }
@media (pointer: coarse) { .minfo { width: 30px; height: 30px; font-size: 15px; } }
/* the ⓘ box */
.mapinfo { position: fixed; inset: 0; z-index: 60; background: rgba(5, 20, 35, .55); display: grid; place-items: center; padding: 16px; animation: fadein .15s ease-out; }
.mapinfo .mibox { position: relative; width: min(520px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--paper, #fffaf0); border-radius: 18px; padding: 18px 20px 16px; box-shadow: 0 18px 50px rgba(0,0,0,.4); color: var(--ink); }
.mapinfo .x { position: absolute; right: 10px; top: 10px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #f1e4c6; color: var(--ink); font-size: 16px; font-weight: 800; cursor: pointer; }
.mapinfo .mihead { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: center; margin-right: 30px; }
.mapinfo .mihead .mprev { height: 104px; }
.mapinfo h3 { margin: 0 0 6px; font-size: 22px; }
.mapinfo .mmeta { padding: 0; }
.mapinfo p.md { margin: 8px 0 0; font-weight: 700; color: var(--muted); font-size: 14px; }
.mapinfo dl { margin: 14px 0 4px; }
.mapinfo dt { font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--gold-ink); margin-top: 10px; }
.mapinfo dd { margin: 2px 0 0; font-size: 14.5px; line-height: 1.45; }
.mapinfo .mifoot { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 14px; }
.mapinfo .mifoot .small-note { margin-right: auto; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 520px) { .mapinfo .mihead { grid-template-columns: 1fr; margin-right: 0; } .mapinfo .mihead .mprev { margin-right: 36px; } }
.rules { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.rule { display: flex; gap: 11px; align-items: flex-start; text-align: left; background: #fff; border: 2px solid var(--line); border-radius: 12px; padding: 10px 12px; cursor: pointer; font: inherit; color: var(--ink); }
.rule:disabled { cursor: default; }
.rule b { display: block; font-size: 15px; }
.rule span span { display: block; font-size: 12.5px; color: var(--muted); font-weight: 700; line-height: 1.3; margin-top: 2px; }
.rule.on { border-color: #8cc47f; background: #f4fbef; }
.tg { flex: none; width: 40px; height: 23px; border-radius: 99px; background: #d8ccae; position: relative; margin-top: 1px; transition: background .15s; }
.tg i { position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: left .15s; }
.rule.on .tg { background: var(--good); }
.rule.on .tg i { left: 20px; }
.adv { display: grid; gap: 8px; }
.advrow { display: flex; align-items: center; gap: 14px; background: #fff; border: 2px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.advrow > div:first-child { flex: 1; min-width: 0; }
.advrow b { font-size: 15px; }
.advrow span { display: block; font-size: 12.5px; color: var(--muted); font-weight: 700; line-height: 1.3; }
.advrow.slide { flex-wrap: wrap; }
.advrow.slide > div:first-child { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
.advrow.slide > div:first-child span { order: 3; flex-basis: 100%; }
.advrow.slide output { font-family: var(--font-d); font-weight: 700; font-size: 20px; color: var(--gold-ink); margin-left: auto; }
.stepper { display: flex; align-items: center; gap: 4px; background: var(--panel-2); border-radius: 11px; padding: 3px; }
.stepper button { width: 34px; height: 34px; border-radius: 9px; border: 0; background: #fff; font: 800 20px var(--font-b); color: var(--ink); cursor: pointer; box-shadow: 0 2px 0 #c9b384; }
.stepper button:disabled { opacity: .4; cursor: default; }
.stepper output { min-width: 52px; text-align: center; font-family: var(--font-d); font-weight: 700; font-size: 19px; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 99px; outline: none; margin: 6px 0 2px;
  background: linear-gradient(90deg, var(--gold) var(--pct, 50%), #e2d5b4 var(--pct, 50%)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--gold-ink); cursor: pointer; }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--gold-ink); cursor: pointer; }
input[type=range]:disabled { opacity: .6; }
.lchat .chatlog { flex: 1; min-height: 120px; max-height: none; border-top: 0; overflow-y: auto; font-size: 15px; line-height: 1.55; padding: 4px 2px 8px; }
.lchat .chatform { display: flex; gap: 6px; }
.lchat .chatform input { padding: 8px 10px; font-size: 15px; }
.lobbyfoot { display: flex; justify-content: flex-end; align-items: center; gap: 16px; padding: 10px 18px 14px; color: #fff; max-width: 1400px; width: 100%; margin: 0 auto; }
.lobbyfoot .fnote { font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.btn.big { font-size: 19px; padding: 13px 34px; border-radius: 13px; min-width: 200px; }
@media (max-width: 1100px) { .lobbygrid { grid-template-columns: 300px minmax(0, 1fr); } .lchat { grid-column: 1 / -1; max-height: 320px; } }
@media (max-width: 760px) {
  .lobby { height: auto; min-height: 100%; overflow: visible; }
  .lobbygrid { grid-template-columns: 1fr; padding: 8px; }
  .lcol { overflow: visible; }
  .lchat { max-height: none; } .lchat .chatlog { max-height: 220px; }
  .lobbyfoot { position: sticky; bottom: 0; background: rgba(8, 30, 50, .7); backdrop-filter: blur(6px); justify-content: space-between; padding: 10px 12px; }
  .lobbyfoot .fnote { font-size: 13px; }
  .btn.big { min-width: 0; padding: 12px 22px; font-size: 17px; }
  .maps { grid-template-columns: 1fr 1fr; gap: 8px; }
  .maptile .mprev { height: 88px; } .maptile .mprev svg { height: 78px; }
  .roombox .lobby-code { font-size: 38px; }
}

/* ---------- end-of-game stats ---------- */
.statsview { position: absolute; inset: 0; z-index: 20; overflow-y: auto; padding: 18px; background: rgba(8, 30, 50, .45); backdrop-filter: blur(2px); }
.statsbox { max-width: 900px; margin: 0 auto; padding: 18px 20px 20px; }
.statshead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.statshead .trophy { font-size: 42px; }
.statshead h2 { font-family: var(--font-d); font-size: 30px; margin: 0; }
.statsbtns { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.rmwait { font-size: 13px; font-weight: 700; color: var(--muted); max-width: 180px; text-align: right; }
.statstabs { display: flex; gap: 4px; margin: 16px 0 12px; border-bottom: 2px solid var(--line); overflow-x: auto; }
.statstabs button { border: 0; background: none; font: 800 15px var(--font-b); color: var(--muted); padding: 9px 14px; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.statstabs button.on { color: var(--ink); border-bottom-color: var(--gold); }
.statsbody { overflow-x: auto; }
.sub-h { font-weight: 800; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; margin: 14px 0 6px; }
.stattable { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.stattable th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 800; text-align: center; padding: 6px 8px; border-bottom: 2px solid var(--line); white-space: nowrap; }
.stattable td { text-align: center; padding: 8px; border-bottom: 1px solid #ecdfbf; font-weight: 700; white-space: nowrap; }
.stattable td:has(.sname) { text-align: left; }
.stattable tr.win td { background: #fff4cc; }
.stattable td.big { font-family: var(--font-d); font-size: 20px; font-weight: 700; }
.stattable small { color: var(--muted); font-weight: 700; }
.stattable.small { margin-top: 10px; font-size: 14px; }
.stattable.small td, .stattable.small th { padding: 5px 4px; text-align: center; }
.stattable.small td:first-child, .stattable.small th:first-child { text-align: left; color: var(--muted); }
.sname { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; }
.sname .av { width: 28px; height: 28px; font-size: 14px; }
.dicechart { width: 100%; max-width: 640px; display: block; margin: 0 auto; }
.dicechart .grid { stroke: #e6d9b8; stroke-width: 1; }
.dicechart .axis { fill: var(--muted); font: 700 12px var(--font-b); }
.dicechart .axis.num { fill: var(--ink); font-size: 14px; font-weight: 800; }
.dicechart .fill { fill: #d0902b; }
.dicechart .seven { fill: #a59c8c; }
.dicechart .exp { stroke: #3b2a1a; stroke-width: 2; stroke-dasharray: 4 3; }
.dicechart .val { fill: var(--ink); font: 800 12.5px var(--font-b); }
.dicechart .bar:hover .fill { fill: #b87818; }
.dicechart .bar:hover .seven { fill: #8d8474; }
.chartnote { text-align: center; color: var(--muted); font-weight: 700; font-size: 13px; margin-top: 4px; }
.expkey { display: inline-block; width: 18px; border-top: 2px dashed #3b2a1a; vertical-align: 4px; margin-right: 4px; }
/* centred with `translate` (not `transform`) so the button's :active press effect can't knock it sideways */
.statsbtn { position: absolute; top: 12px; left: 50%; translate: -50% 0; z-index: 15; }
@media (max-width: 900px) {
  .statsview { position: fixed; z-index: 40; padding: 10px; }
  .statsbox { padding: 14px; }
  .statshead h2 { font-size: 24px; }
  .statsbtns { margin-left: 0; width: 100%; }
  .statsbtns .btn { flex: 1; }
  .rmwait { max-width: none; width: 100%; text-align: center; }
  .statsbtn { position: fixed; top: auto; bottom: 14px; z-index: 30; }
}
.stattable th { white-space: normal; line-height: 1.2; vertical-align: bottom; }
.stattable th.pl { text-align: left; }
.stattable th .lc { width: 24px; height: 32px; vertical-align: middle; }
.stattable th .lc svg { width: 21px; height: 21px; }
.stattable.small { max-width: 640px; margin-left: auto; margin-right: auto; }



/* ---------- player boxes: name over the token, points on a ribbon ---------- */
.players { min-height: 0; overflow-y: auto; flex: 0 1 auto; }
/* one flat colour behind the player boxes; whoever's turn it is keeps the light shade, everyone else is darker */
.players, .mebox { background: #dfcd9f; box-shadow: none; } /* all one darker colour; only the active player's box is lit */
.pl { background: #dfcd9f; border-radius: 10px; padding: 3px 10px 4px 4px; display: flex; align-items: center; gap: 6px; transition: background-color .25s; }
.pl.turn { background: #fffaf0; }
.pid { width: 82px; flex: none; display: flex; flex-direction: column; align-items: center; }
.pid .nm { font-weight: 800; font-size: 14.5px; max-width: 82px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.25; text-align: center; }
.pav { position: relative; display: flex; flex-direction: column; align-items: center; height: auto; }
.pav .av { width: 42px; height: 42px; }
.pav .crown { position: absolute; top: -6px; right: 8px; width: 18px; left: auto; transform: rotate(18deg); z-index: 3; }
.ribbon { position: relative; width: 54px; height: 18px; margin-top: -8px; z-index: 2; }
.ribbon svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ribbon b { position: relative; display: block; text-align: center; font: 700 13px/15.5px var(--font-d); color: var(--ink); }
.pside { flex: 1; min-width: 0; }
.pflags { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 2px 4px; }
.pl .pstats { justify-content: space-around; gap: 10px; }
.pl.self .pid { width: 96px; }
.pl.self .pid .nm { font-size: 16.5px; max-width: 96px; }
.pl.self .pav .av { width: 54px; height: 54px; border-width: 3px; }
.pl.self .ribbon { width: 62px; height: 20px; }
.pl.self .ribbon b { font-size: 14.5px; line-height: 17px; }
.mebox { display: flex; align-items: center; }
.mebox .pl { flex: 1; background: transparent; }
.mebox { transition: background-color .25s; }
.mebox:not(:has(.pl.turn)) { background: #dfcd9f; }
.mebox:has(.pl.turn) { background: #fffaf0; }
.players.many { gap: 6px; padding: 6px; }
.players.many .pcard, .players.many .pcard > span { width: 32px; height: 44px; }
.players.many .pico { height: 44px; }
.players.many .pav .av { width: 36px; height: 36px; }

/* person / robot inside the colour token */
.av { overflow: hidden; }
.av .avi { width: 80%; height: 80%; transform: translateY(9%); display: block; }

.rescard, .devcard { position: relative; }
.pcard { margin-right: 0; }
.pcard > span { display: block !important; overflow: hidden; }
.rescard { background: linear-gradient(#3f86e0, #1f56ad); }
.rescard svg { width: 100% !important; height: 100% !important; display: block; }
.bcard { position: relative; }
.bpile .bcard { position: absolute; }
.av .avi { width: 84%; height: 84%; transform: translateY(6%); }
.pav .av .avi { transform: translateY(-2%); }
.pav .crown { top: 0; right: -10px; transform: rotate(22deg); }
.dicechart .fill { fill: #2f6bd6; }
.dicechart .seven { fill: #a9b0ba; }
.dicechart .bar:hover .fill { fill: #2156b4; }
.dicechart .bar:hover .seven { fill: #8f97a3; }

/* player boxes: regular weight text, every column lined up box to box */
.pl { padding: 3px 8px 3px 4px; position: relative; }
.pid, .pl.self .pid { width: 88px; }
.pid .nm, .pl.self .pid .nm { font-weight: 400; font-size: 15px; max-width: 86px; font-family: var(--font-b); }
.pl.self .pid .nm { font-size: 16px; }
.pav .av { width: 42px; height: 42px; }
.pl.self .pav .av { width: 50px; height: 50px; border-width: 3px; }
.ribbon { width: 54px; height: 22px; margin-top: -7px; }
.ribbon b { font-weight: 400; font-size: 13.5px; line-height: 19.3px; height: 19.3px; }
.pl.self .ribbon { width: 60px; height: 24px; }
.pl.self .ribbon b { font-size: 14.5px; line-height: 21px; height: 21px; }
.pl .pstats { display: grid; grid-template-columns: 40px 40px 34px 34px; justify-content: space-between; align-items: center; gap: 0; }
.pl .pcard { margin: 0; }
.pl .pico { font-weight: 400; }
.pflags { position: absolute; top: 2px; right: 8px; margin: 0; z-index: 4; }
.pflags .off, .pflags .badge { font-weight: 600; }
.mebox.many { padding: 6px; }
.mebox.many .pcard, .mebox.many .pcard > span { width: 32px; height: 44px; }
.mebox.many .pico { height: 44px; }
.players.many .pl .pstats, .mebox.many .pl .pstats { grid-template-columns: 32px 32px 34px 34px; }

/* discarding on a 7 */
.discardpanel { position: absolute; left: 10px; bottom: 10px; z-index: 7; display: flex; gap: 8px; align-items: stretch; width: min(560px, calc(100% - 20px)); }
.discardpanel .dmain { flex: 1; display: grid; gap: 6px; align-items: center; }
.dhead b { font-family: var(--font-d); font-size: 18px; margin-right: 10px; }
.dhead span { font-size: 13px; font-weight: 700; color: var(--muted); }
.discardpanel .stack { cursor: pointer; }
.discardpanel .ibtn { width: 70px; height: auto; min-height: 64px; }
.discardpanel .ibtn svg { width: 38px; height: 38px; }
#hand.discarding .stack { cursor: pointer; }
#hand.discarding .stack:hover .rcard { transform: translateY(-4px); }
.handpanel:has(#hand.discarding) { box-shadow: 0 0 0 3px #ffe08a, 0 2px 0 #c9b384, 0 6px 14px rgba(5,25,45,.28); }
@media (max-width: 900px) { .discardpanel { left: 6px; right: 6px; bottom: 6px; width: auto; } }

/* award banner (Longest Road / Largest Army) */
.award { position: absolute; top: 14px; left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 12px; background: #fffaf0; border: 3px solid var(--ac, #e7b736); border-radius: 16px; padding: 10px 18px 10px 12px; box-shadow: 0 0 0 4px rgba(255,255,255,.35), 0 10px 26px rgba(5,25,45,.4); z-index: 20; pointer-events: none; width: max-content; max-width: 92%; }
.award.go { animation: awardin .55s cubic-bezier(.3,1.5,.5,1); }
.award b { display: block; font-family: var(--font-d); font-size: 19px; }
.award small { display: block; color: var(--muted); font-weight: 800; font-size: 13px; }
.awico { font-size: 34px; line-height: 1; }
@keyframes awardin { 0% { opacity: 0; transform: translateY(-30px) scale(.8); } 100% { opacity: 1; transform: none; } }
.pl.awardpulse { animation: plpulse .8s ease-in-out 5; }
@keyframes plpulse { 0%,100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 6px var(--ac), 0 0 22px 6px var(--ac); } }

/* "You received" chips */
.gain { position: fixed; z-index: 30; display: flex; align-items: center; gap: 6px; background: rgba(29,26,23,.88); color: #fff; padding: 6px 12px; border-radius: 99px; font-weight: 800; font-size: 14px; opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; pointer-events: none; }
.gain.show { opacity: 1; transform: none; }
.gain .glbl.dim { opacity: .75; }
.gchip { display: inline-flex; align-items: center; gap: 1px; border-radius: 8px; padding: 1px 6px 1px 7px; border: 1.5px solid rgba(255,255,255,.75); font-family: var(--font-d); font-size: 16px; }
.gchip svg { width: 20px; height: 20px; }

/* buttons you can afford glow a little */
.ibtn.can.ready:not(.active) { animation: canglow 1.8s ease-in-out infinite; }
@keyframes canglow { 0%,100% { box-shadow: 0 0 0 0 rgba(255,214,90,0); } 50% { box-shadow: 0 0 0 5px rgba(255,214,90,.7); } }
.chip.off { opacity: .45; }

/* victory */
.victory { position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; padding: 16px; background: rgba(8,20,34,.5); }
.victory.hidden { display: none; }
.victory canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.vcard { position: relative; text-align: center; padding: 22px 28px 24px; max-width: 460px; width: 100%; animation: awardin .6s cubic-bezier(.3,1.4,.5,1); display: grid; justify-items: center; gap: 6px; max-height: 94vh; overflow: auto; }
.vcard h2 { margin: 2px 0 0; font-family: var(--font-d); font-size: 34px; }
.vtrophy { font-size: 52px; line-height: 1; animation: beat 1.2s ease-in-out infinite; }
.vsub { color: var(--muted); font-weight: 800; margin-bottom: 4px; }
.vfinal { width: 100%; text-align: left; background: var(--panel-2); border-radius: 12px; padding: 10px 14px; margin: 6px 0 10px; }
.vh { font-family: var(--font-d); font-weight: 600; margin-bottom: 4px; }
.vfinal ol { list-style: none; margin: 0; padding: 0; font-size: 15px; line-height: 1.7; }
.vfinal li { opacity: 0; animation: vline .5s ease-out forwards; }
@keyframes vline { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vtrophy, .award.go, .vcard, .pl.awardpulse, .ibtn.can.ready, .puffc, .roadglow { animation: none; } .puffc { display: none; } .vfinal li { animation-duration: .01s; } }
@media (max-width: 900px) { .chip .cl { display: none; } .topbar { gap: 6px; padding: 8px 8px; } .chip { padding: 5px 9px; font-size: 12.5px; } }

.mebox { position: relative; }

/* watching, pausing, handing a seat to a bot */
.chip.watch { cursor: default; }
.pausebanner { position: absolute; inset: 0; z-index: 25; display: grid; place-items: center; background: rgba(8, 20, 34, .5); }
.pausebanner.hidden { display: none; }
.pausebox { text-align: center; padding: 22px 30px; max-width: 360px; display: grid; gap: 6px; justify-items: center; }
.pausebox h3 { margin: 0; font-family: var(--font-d); font-size: 26px; }
.pausebox p { margin: 0 0 6px; font-weight: 700; }
.pico2 { font-size: 40px; line-height: 1; }
.clock.paused { color: #8a6a1a; }
.botify { position: absolute; top: -6px; right: 4px; z-index: 5; width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 0; background: #fffaf0; box-shadow: 0 1px 0 #c9b384, 0 2px 5px rgba(0,0,0,.25); font-size: 15px; line-height: 1; cursor: pointer; opacity: .75; }
.pl:hover .botify, .pl.gone .botify, .botify:focus-visible { opacity: 1; }
.pl.gone { opacity: .8; }
.specbox { display: grid; gap: 4px; align-content: center; text-align: center; padding: 6px 10px; font-weight: 700; color: var(--muted); font-size: 13px; }
.specbox b { color: var(--ink); font-family: var(--font-d); font-size: 17px; }

/* bot difficulty in the lobby */
.lvl { display: inline-flex; gap: 0; margin-top: 4px; border-radius: 9px; overflow: hidden; border: 2px solid #c9b384; }
.lvl button { border: 0; background: #fffaf0; color: var(--muted); font: 800 11.5px var(--font-b, inherit); padding: 3px 7px; cursor: pointer; }
.lvl button + button { border-left: 2px solid #c9b384; }
.lvl button.on { background: #e7b736; color: #4a2e05; }
.lvl button:disabled { cursor: default; }
.lvl button:disabled:not(.on) { opacity: .55; }



/* colour picker: four colours and a spectrum button that opens the rest */
.colors button.spectrum { background: conic-gradient(#e0453a, #f2a21f, #f2d52f, #4fb04a, #2fa8c9, #3a6fd8, #8a4fc8, #d9479a, #e0453a); position: relative; }
.colors button.spectrum i { position: absolute; inset: 4px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #1d1a17; }
.colormenu { position: fixed; z-index: 40; display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 10px; max-width: 190px; }
.colormenu button { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #3b2a1a; cursor: pointer; padding: 0; }
.colormenu button.sel { outline: 3px solid var(--gold); outline-offset: 1px; }
.colormenu button.taken { opacity: .45; cursor: default; background-image: linear-gradient(135deg, transparent 44%, #3b2a1a 44%, #3b2a1a 56%, transparent 56%) !important; } /* (taken: crossed out, still its own colour) */

/* stats: icon column heads, medals, name ribbons */
.stile { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 9px; background: linear-gradient(#e6fffb, #9fdad9); box-shadow: 0 2px 0 #5aa7ad, inset 0 0 0 1.5px rgba(255,255,255,.7); }
.stile .sico { width: 30px; height: 30px; display: block; }
.stattable.ovw th { vertical-align: middle; padding: 6px 4px; }
.stattable.ovw td { padding: 7px 4px; }
.stattable.ovw td, .stattable.ovw th { min-width: 46px; }
.stattable.ovw td:nth-child(2), .stattable.ovw th:nth-child(2) { text-align: left; min-width: 0; }
.stick { position: sticky; left: 0; z-index: 1; background: #f8efd9; }
.stattable tr.win .stick { background: #fff4cc; }
.sv { display: inline-grid; place-items: center; min-width: 30px; height: 30px; border-radius: 50%; font-size: 17px; }
.sv.pts { font-family: var(--font-d); font-size: 22px; }
.sv.hl { background: #f6d85a; box-shadow: 0 0 0 2px #e7b736, 0 0 10px rgba(231,183,54,.6); }
.medal { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 700 14px var(--font-d); color: #4a2e05; border: 2px solid #8a6a1a; background: #d9cfb6; }
.medal.m0 { background: linear-gradient(#ffe27a, #e7b736); }
.medal.m1 { background: linear-gradient(#f4f6f8, #b4bdc6); border-color: #6c7680; }
.medal.m2 { background: linear-gradient(#f0b27a, #c4793a); border-color: #7a4a1c; }
.medal.m3 { color: var(--muted); border-color: #c9b384; background: #eadcb8; }
.rname { display: inline-block; min-width: 110px; padding: 5px 22px 5px 10px; background: var(--c); font-weight: 800; font-size: 15px; text-align: left; border: 2px solid #1d1a17; border-right: 0; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%); max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; }
.stattable td.pos { color: #2b7a33; } .stattable td.neg { color: #c4412c; }
@media (max-width: 900px) { .stile { width: 34px; height: 34px; } .stile .sico { width: 25px; height: 25px; } .stattable.ovw td, .stattable.ovw th { min-width: 40px; } }

/* hover description for the stats column icons */
#stip { position: fixed; z-index: 70; display: none; max-width: 260px; padding: 6px 11px; border-radius: 9px; background: rgba(29,26,23,.94); color: #fff; font: 700 13px/1.35 var(--font-b); pointer-events: none; text-align: center; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.stile { cursor: help; }

/* trade offer: the same size whatever the answers are */
.offer { width: 320px; box-sizing: border-box; }
.offer .resp { min-height: 34px; margin-top: 4px; }
.offer .resp .slot { width: 76px; flex: none; display: flex; justify-content: flex-end; align-items: center; }
.offer .ofoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 38px; margin-top: 8px; }
.offer .ofoot .note { font-size: 13px; color: var(--muted); font-weight: 700; line-height: 1.25; }
@media (max-width: 900px) { .offer { width: auto; } }

/* card counts: a small dark-blue tab in the card's top-right corner (rounded bottom-left, top-right follows the card).
   Fredoka regular weight, the number pushed right into the corner. */
.qn, .rcard .n { position: absolute; top: 0; right: 0; width: auto; aspect-ratio: auto; min-width: 21px; height: 18px; padding: 2px 3px 0 0;
  border-radius: 0 5px 0 10px; background: #2858b8; color: #fff; font: 400 13px/1 var(--font-d); display: grid; justify-items: end; align-items: start; z-index: 3; pointer-events: none; }
.scard > .qn, .rcard .n { top: 1.5px; right: 1.5px; border-radius: 0 6px 0 10px; }

/* every other player's box is its own panel, so the whole box (not just an inner part) lights up on their turn */
.players, .players.many { background: none; box-shadow: none; padding: 0; gap: 8px; }
.players .pl { padding: 11px 16px 11px 12px; border-radius: 12px; }
.players.many { gap: 5px; }
.players.many .pl { padding: 4px 10px 4px 8px; }
.botify { top: 6px; right: 6px; }

/* optional blank side margins on a wide screen (top-bar button) */
.game.narrow { max-width: 1440px; margin: 0 auto; box-shadow: 0 0 60px rgba(0, 0, 0, .35); }
body:has(.game.narrow) { background: #0d3351; } /* the margins: their own darker colour */
.game.narrow { background: radial-gradient(ellipse at 50% 30%, #2a7fbd 0%, var(--sea) 45%, var(--sea-deep) 100%); } /* inside, the same ocean as the full-width layout */
.wideonly { display: none; }
@media (min-width: 1441px) { .wideonly { display: inline-block; } } /* only matters (and shows) when the screen is wider than the narrow layout */
#narrowBtn, #narrowBtn.off { opacity: 1; color: #fff; }
#narrowBtn.on { background: rgba(255,255,255,.3); }

/* build costs cheat sheet: a name, the cards it costs, and what it does */
.cost { display: inline-flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.cost .lc { margin: 0; }
.crow { display: grid; grid-template-columns: 92px auto 1fr; align-items: center; gap: 4px 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.crow b { font-size: 16px; }
.crow .small-note { text-align: right; }
@media (max-width: 520px) { .crow { grid-template-columns: 84px 1fr; } .crow .small-note { grid-column: 2; text-align: left; } }

/* pause / resume vote */
.votepanel { position: fixed; top: 54px; left: 50%; translate: -50% 0; z-index: 60; width: min(360px, calc(100% - 20px)); padding: 10px 14px; display: grid; gap: 8px; box-shadow: 0 8px 24px rgba(5,25,45,.4); }
.votepanel .vhead { display: grid; gap: 2px; }
.votepanel .vhead b { font-family: var(--font-d); font-size: 16px; }
.votepanel .vhead span { color: var(--muted); font-weight: 700; font-size: 13px; }
.votepanel .vfoot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-height: 34px; }
.votepanel .note { margin-right: auto; color: var(--muted); font-weight: 700; font-size: 13px; }

/* the hand row keeps the height of a row of cards even when it is empty, so the layout doesn't jump when the first cards arrive */
.handpanel .hand { min-height: 66px; }

/* the margin toggle is always plain white; its arrows show what pressing it will do */
#narrowBtn svg { width: 26px; height: 14px; display: block; }

/* counter-offers and the "no player trading" rule */
.offer .respc { margin-top: 4px; }
.offer .respc .resp { margin-top: 0; }
.offer .resp .slot.wide { width: auto; gap: 6px; }
.offer .cline { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 13px; color: var(--muted); padding: 2px 0 4px 24px; }
.ibtn.nope { position: relative; overflow: hidden; }
.ibtn.nope::after { content: ''; position: absolute; left: 50%; top: 50%; width: 54px; height: 4px; margin: -2px 0 0 -27px; border-radius: 2px; background: #c4412c; transform: rotate(-38deg); box-shadow: 0 0 0 1.5px rgba(255,255,255,.7); }

/* dice that tumble, cards that fly, the start of a turn */
.dice .die { display: block; line-height: 0; will-change: transform; }
.dice.tumbling { cursor: default; }
.dice.tumbling svg { animation: none; filter: drop-shadow(0 8px 8px rgba(0,0,0,.35)); }
.flycard.back { background: none; border: 0; box-shadow: none; width: 44px; height: 60px; }
.flycard.back svg { width: 44px; height: 60px; filter: drop-shadow(0 5px 7px rgba(0,0,0,.4)); }
.pl { position: relative; }
.pl .sweep { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 4; }
.pl .sweep::before { content: ''; position: absolute; top: 0; bottom: 0; left: -45%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent); animation: sweep 1.1s ease-out var(--d, 0ms) both; }
@keyframes sweep { from { transform: translateX(0); } to { transform: translateX(330%); } }
.turnflash { position: absolute; left: 50%; top: 18%; translate: -50% 0; z-index: 7; pointer-events: none; opacity: 0; padding: 10px 26px; border-radius: 99px; background: rgba(255,250,240,.94); color: var(--ink); font: 700 26px var(--font-d); box-shadow: var(--shadow); border: 3px solid #3b2a1a; }
.turnflash.go { animation: turnflash 1.5s ease-out; }
@keyframes turnflash { 0% { opacity: 0; transform: translateY(14px) scale(.8); } 14% { opacity: 1; transform: translateY(0) scale(1.08); } 24% { transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }

/* ----- polish round: feedback, hints, sound panel, connection banner, help ----- */
.shake { animation: shake .4s ease-in-out; }
@keyframes shake { 0%,100% { translate: 0 0; } 20% { translate: -6px 0; } 40% { translate: 5px 0; } 60% { translate: -4px 0; } 80% { translate: 2px 0; } }
.pl.robbed { animation: robbed .95s ease-out both; animation-delay: var(--rd, 0ms); }
@keyframes robbed { 0% { box-shadow: 0 0 0 0 rgba(214,60,47,.0); background-color: #f7c6bf; } 25% { box-shadow: 0 0 0 4px rgba(214,60,47,.75); background-color: #f4b0a6; } 100% { box-shadow: 0 0 0 0 rgba(214,60,47,0); } }
.cityring { fill: none; stroke: #ffd23a; stroke-width: 5; opacity: 0; transform-box: fill-box; transform-origin: center; animation: cityring 1.05s ease-out both; filter: drop-shadow(0 0 6px #ffcf3a); }
@keyframes cityring { 0% { opacity: .95; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.7); } }
#htip { position: fixed; z-index: 75; display: none; max-width: 270px; padding: 7px 11px 8px; border-radius: 10px; background: rgba(29,26,23,.94); color: #f4efe2; font: 600 12.5px/1.4 var(--font-b); pointer-events: none; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
#htip b { display: block; font: 700 14px/1.3 var(--font-d); color: #fff; margin-bottom: 2px; }
.turnbox.hurry { animation: hurry 1s ease-in-out infinite; }
@keyframes hurry { 0%,100% { box-shadow: 0 0 0 0 rgba(214,60,47,.0), var(--shadow); } 50% { box-shadow: 0 0 0 4px rgba(214,60,47,.7), var(--shadow); } }
#netbanner { position: fixed; top: 54px; left: 50%; translate: -50% 0; z-index: 90; display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 99px; background: #fffaf0; color: var(--ink); font-weight: 800; box-shadow: 0 6px 18px rgba(0,0,0,.35); border: 2px solid #d63c2f; }
#netbanner .spin { width: 16px; height: 16px; border-radius: 50%; border: 3px solid #e6d9b8; border-top-color: #d63c2f; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.soundmenu { position: fixed; z-index: 60; width: 240px; padding: 12px 14px; display: grid; gap: 10px; }
.soundmenu .vrow { display: grid; grid-template-columns: 62px 1fr 40px; align-items: center; gap: 8px; font-weight: 800; font-size: 13.5px; }
.soundmenu output { text-align: right; font-size: 12.5px; color: var(--muted); }
.soundmenu.muted .vrow { opacity: .5; }
.soundmenu input[type=range] { width: 100%; accent-color: #2a9ea6; }
.startbanner { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 8; width: min(520px, calc(100% - 32px)); padding: 16px 20px; border-radius: 16px; background: #fffaf0; border: 3px solid #3b2a1a; box-shadow: var(--shadow); text-align: center; cursor: pointer; animation: startin .5s cubic-bezier(.3,1.4,.5,1); transition: opacity .5s; }
.startbanner b { display: block; font: 700 26px var(--font-d); }
.startbanner span { display: block; margin-top: 6px; font-weight: 800; font-size: 14.5px; line-height: 1.45; }
.startbanner small { display: block; margin-top: 8px; color: var(--muted); font-weight: 700; }
.startbanner.out { opacity: 0; }
@keyframes startin { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
.helpbox { max-width: 640px; width: calc(100vw - 32px); }
.helpscroll { max-height: min(62vh, 560px); overflow-y: auto; padding-right: 6px; }
.helpscroll h4 { margin: 14px 0 4px; font: 700 16px var(--font-d); }
.helpscroll h4:first-child { margin-top: 0; }
.helpscroll p, .helpscroll li { font-size: 14px; line-height: 1.5; margin: 3px 0; }
.helpscroll p:not(.small-note) { color: inherit; font-weight: 400; }
.helpscroll ol, .helpscroll ul { margin: 4px 0; padding-left: 20px; }
.helpscroll .crow { margin: 4px 0; }
.lobbyfoot .lsum { flex: 1; min-width: 0; color: #fff; font-weight: 700; font-size: 13.5px; text-shadow: 0 1px 2px rgba(0,0,0,.35); opacity: .92; }
@media (max-width: 900px) { .lobbyfoot { flex-wrap: wrap; } .lobbyfoot .lsum { flex-basis: 100%; font-size: 12px; } }
/* finger-sized controls on phones and tablets */
@media (pointer: coarse) {
  .chip { min-height: 36px; padding: 7px 12px; }
  .btn.small { min-height: 38px; padding: 8px 14px; }
  .zoomctl button { width: 44px; height: 44px; font-size: 22px; }
  .tpick .rcard, .trow .stack .scard .rcard { min-width: 40px; }
  .seats .x, .botify { min-width: 36px; min-height: 36px; }
  .statstabs button { min-height: 40px; }
}
@media (max-width: 900px) and (pointer: coarse) {
  .dice svg { width: 52px; height: 52px; }
  .ibtn { height: 58px; }
}

/* the other players' boxes: name above a small picture, then the cards and awards in four columns */
.players .pl { padding: 4px 12px 5px 12px; min-width: 0; }
.players .pl .pid { flex: none; width: 88px; flex-direction: column; align-items: center; gap: 1px; }
.players .pl .pid .nm { order: 0; flex: none; width: 88px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; font-size: 14.5px; line-height: 1.2; } /* (the full name is in its title) */
.players .pl .pside { flex: 1; }
.players .pl .pav .av { width: 40px; height: 40px; border-width: 2.5px; }
.players .pl .ribbon { width: 50px; height: 20px; margin-top: -7px; }
.players .pl .ribbon b { font-size: 13px; line-height: 17.5px; height: 17.5px; }
/* the cards and awards: the same size and the same four columns on every box, mine included (the tight / crowd squeeze further down shrinks them for big games) */
.players .pl .pstats, .mebox .pl.self .pstats { grid-template-columns: 46px 46px 38px 38px; gap: 0 16px; justify-content: end; justify-items: center; }
.players .pl .pcard, .players .pl .pcard > span, .mebox .pl.self .pcard, .mebox .pl.self .pcard > span { width: 46px; height: 62px; }
.players .pl .pico, .mebox .pl.self .pico { height: 62px; font-size: 17px; }
.players .pl .pico svg, .mebox .pl.self .pico svg { width: 34px; height: 27px; }
.players .pl .qn, .mebox .pl.self .qn { font-size: 13px; }
/* my own box: my name larger, centred along the top; my (bigger) picture below it, centred on the same line as the others' */
.mebox .pl.self { padding: 27px 4px 3px 4px; min-height: 93px; }
.mebox .pl.self .pid { flex: none; width: 88px; flex-direction: column; align-items: center; }
.mebox .pl.self .pid .nm { position: absolute; top: 4px; left: 0; right: 0; width: auto; max-width: none; text-align: center; font-size: 19px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 12px; }
.mebox .pl.self .pside { flex: 1; }
.mebox .pl.self .pav .av { width: 58px; height: 58px; border-width: 3px; }
.mebox .pl.self .ribbon { width: 68px; height: 26px; margin-top: -8px; }
.mebox .pl.self .ribbon b { font-size: 15.5px; line-height: 23px; height: 23px; }
.players, .players.many { gap: 4px; }
@media (min-width: 901px) { .side { padding-bottom: 4px; } } /* (less space between the other players' boxes and mine) */
.players .pl .botify { top: 1px; right: auto; left: 4px; width: 24px; height: 24px; min-width: 0; min-height: 0; font-size: 13px; } /* (over the picture's corner, not the counters) */
.bankicon { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.banklbl { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; line-height: 1; color: var(--gold-ink); } /* (the hand's card label, in brown) */

/* 5+ other players on a short screen: first tighter boxes, then slim one-line boxes */
.players.tight { gap: 4px; }
.players.tight .pl { padding: 2px 10px 2px 12px; }
.players.tight .pav .av { width: 32px; height: 32px; }
.players.tight .pid .nm { font-size: 13.5px; }
.players.tight .pcard, .players.tight .pcard > span { width: 38px; height: 52px; }
.players.tight .pico { height: 52px; font-size: 16px; }
.players.tight .ribbon { width: 46px; height: 19px; margin-top: -7px; }
.players.tight .ribbon b { font-size: 12.5px; line-height: 16.5px; height: 16.5px; }
.players.tight .pico svg { width: 31px; height: 25px; }
.players.tight .pl .pstats { grid-template-columns: 40px 40px 36px 36px; gap: 0 12px; }
.players.tight .pl { padding-right: 8px; }
.players.tight .qn { font-size: 12px; }
.players.crowd .pid { width: 120px; flex-direction: row; align-items: center; gap: 6px; }
.players.crowd .pid .nm { order: 1; flex: 1; min-width: 0; max-width: none; text-align: left; }
.players.crowd .pav .av { width: 28px; height: 28px; border-width: 2px; }
.players.crowd .ribbon { width: 40px; height: 18px; margin-top: -7px; }
.players.crowd .ribbon b { font-size: 12px; line-height: 15px; height: 15px; }
.players.crowd .pl .pstats { grid-template-columns: 26px 26px 30px 30px; gap: 0 6px; }
.players.crowd .pcard, .players.crowd .pcard > span { width: 24px; height: 33px; }
.players.crowd .pico { height: 33px; }
.players.crowd .pico svg { width: 22px; height: 18px; }
.players.crowd .qn { min-width: 16px; height: 14px; font-size: 10.5px; padding: 1.5px 2px 0 0; }

/* Seafarers: the ship picked to sail, gold choices, tiles turning up out of the fog, two more action buttons */
.sailring { animation: pulse-ring 1s ease-in-out infinite; }
@keyframes pulse-ring { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.tpick.dim { opacity: .4; filter: grayscale(.5); }
.gold-ico svg { width: 34px; height: 34px; }
.tileflip { transform-box: fill-box; transform-origin: center; animation: tileflip .75s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes tileflip { 0% { transform: scale(0, 1.1); filter: brightness(1.6); } 55% { transform: scale(1.12); filter: brightness(1.25); } 100% { transform: scale(1); filter: none; } }
@media (max-width: 900px) { .actions.many { flex-wrap: wrap; } .actions.many .ibtn { flex: 1 1 calc(25% - 7px); min-width: 0; } }

/* ---------- accounts and profiles ---------- */
.acct { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--panel-2); border-radius: 12px; padding: 9px 12px; margin: 0 0 16px; font-weight: 700; color: var(--ink); }
.acct > span { flex: 1; min-width: 150px; }
.acct a.btn { text-decoration: none; }
.acctnote { margin: 8px 2px 0; }
.btn.ghost { background: transparent; box-shadow: inset 0 0 0 2px var(--line); color: var(--ink); }
.acctform .tabs { display: flex; gap: 6px; margin: 0 40px 14px 0; }
.acctform .tabs button { flex: 1; border: 0; border-radius: 10px; padding: 9px 10px; font: inherit; font-weight: 800; background: #f1e4c6; color: var(--muted); cursor: pointer; }
.acctform .tabs button.on { background: var(--gold); color: #4a2e05; }
.acctform .field { margin-bottom: 12px; }
.acctform input { width: 100%; }
.acerr { color: var(--bad); font-weight: 800; min-height: 1.2em; margin: 4px 0 10px; }
a.acctname { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
a.acctname:hover { text-decoration: underline; }
.acctdot { width: 14px; height: 14px; border-radius: 50%; background: #3f8a3a; display: inline-grid; place-items: center; flex: none; }
.acctdot::after { content: ''; width: 6px; height: 3.5px; border: solid #fff; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.profile { min-height: 100%; display: flex; flex-direction: column; }
#app:has(.profile) { height: auto; min-height: 100%; } /* (a long profile scrolls with the page background behind it) */
.pmain { width: 100%; max-width: 1100px; margin: 0 auto; padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.pbox { padding: 16px 18px; }
.pbox h2 { margin: 0; font-size: 26px; }
.pbox h3 { margin: 0 0 10px; font-size: 17px; }
.phead { display: flex; align-items: center; gap: 16px; }
.phead p { margin: 4px 0 0; }
.ppic { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(#f7cf55, #e0a526); color: #4a2e05; display: grid; place-items: center; font-family: var(--font-d); font-size: 32px; box-shadow: inset 0 0 0 3px #a3700f; flex: none; }
.ptiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.ptile { background: var(--panel); border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.ptile b { font-family: var(--font-d); font-size: 28px; color: var(--ink); line-height: 1.1; }
.ptile span { color: var(--muted); font-weight: 800; font-size: 12.5px; }
.pcols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.pcols > div { display: grid; gap: 14px; }
.pgames { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pgames li { background: var(--panel-2); border-radius: 11px; padding: 9px 12px; border-left: 5px solid #cdb98a; }
.pgames li.won { border-left-color: var(--gold); background: #fff6d6; }
.pg1 { font-weight: 700; }
.pg2 { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 13px; color: var(--muted); font-weight: 700; }
.pg2 .w { color: var(--gold-ink); }
.pg2 a, .ptable a { color: #1d5fa0; font-weight: 800; }
.ptable { width: 100%; border-collapse: collapse; font-weight: 700; }
.ptable th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 4px 6px; }
.ptable td { padding: 6px; border-top: 1px solid #ecdcb5; }
.ptable td:not(:first-child), .ptable th:not(:first-child) { text-align: right; }
@media (max-width: 760px) { .pcols { grid-template-columns: minmax(0, 1fr); } .pmain { padding: 10px; } .ptile b { font-size: 24px; } }
a.chip { text-decoration: none; }
/* the account button, its menu, the picture picker and the profile panel */
.avbtn { width: 34px; height: 34px; padding: 0; border: 2px solid rgba(255, 250, 240, .94); /* (the same cream as the game's ? and ⚙ buttons) */ border-radius: 50%; background: transparent; cursor: pointer; flex: none; overflow: hidden; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.25); margin-left: 4px; }
.avbtn:hover, .avbtn:focus-visible { border-color: #fff; outline: none; transform: scale(1.05); }
.avbtn .avsvg, .acctmenu .avsvg, .acctpic .avsvg, .ppicwrap .avsvg, .avbig .avsvg, .avopt .avsvg { width: 100%; height: 100%; display: block; }
.homeav { position: absolute; top: 14px; right: 16px; z-index: 2; }
.homeav .avbtn { width: 42px; height: 42px; }
.acctmenu { position: fixed; z-index: 70; width: 230px; padding: 10px; display: grid; gap: 4px; }
.acctmenu .amhead { display: flex; align-items: center; gap: 10px; padding: 4px 4px 10px; border-bottom: 1px solid #ecdcb5; margin-bottom: 4px; }
.acctmenu .amhead > svg { width: 38px; height: 38px; flex: none; }
.acctmenu .amhead b { display: block; }
.acctmenu .amhead span { display: block; font-size: 12px; color: var(--muted); font-weight: 700; line-height: 1.25; }
.acctmenu button { text-align: left; border: 0; background: transparent; font: inherit; font-weight: 800; color: var(--ink); padding: 9px 10px; border-radius: 9px; cursor: pointer; }
.acctmenu button:hover, .acctmenu button:focus-visible { background: var(--panel-2); outline: none; }
.acctpic { width: 30px; height: 30px; flex: none !important; min-width: 0 !important; }
.ppicwrap { width: 64px; height: 64px; flex: none; display: grid; place-items: center; }
.phead .grow { flex: 1; min-width: 0; }
.av.haspic { padding: 0; }
.av .avsvg { width: 100%; height: 100%; display: block; }
.av[data-profpanel] { cursor: pointer; }
.mapinfo .mibox.avbox { width: min(460px, 100%); }
.avbox h3 { margin: 0 0 12px; font-size: 20px; }
.avprev { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.avprev b { display: block; font-size: 17px; }
.avprev span { display: block; font-size: 13px; font-weight: 700; line-height: 1.35; margin-top: 2px; }
.avbig { width: 76px; height: 76px; flex: none; }
.avgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 12px; }
.avopt { aspect-ratio: 1; padding: 0; border: 3px solid transparent; border-radius: 50%; background: transparent; cursor: pointer; overflow: hidden; }
.avopt.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--gold); }
.avcols { display: flex; flex-wrap: wrap; gap: 8px; }
.avcol { width: 32px; height: 32px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px #c9b384; cursor: pointer; }
.avcol.on { box-shadow: 0 0 0 3px var(--ink); }
.profpanel { align-items: start; overflow-y: auto; }
.mapinfo .mibox.profbox { width: min(980px, 100%); max-height: calc(100vh - 32px); background: linear-gradient(#2a7fbd, #1d6aa3); padding: 14px; }
.profbox:focus { outline: none; }
.profbox .pmain { padding: 0; max-width: none; }
.profbox .x { z-index: 2; }
.pcols.panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 760px) { .pcols.panel { grid-template-columns: minmax(0, 1fr); } .avgrid { grid-template-columns: repeat(4, 1fr); } }
/* account settings and finished-game pages */
.mapinfo .mibox.setbox { width: min(480px, 100%); }
.setbox h3 { margin: 0 0 6px; font-size: 21px; }
.setbox form { border-top: 1px solid #ecdcb5; padding-top: 12px; margin-top: 12px; }
.setbox h4 { margin: 0 0 4px; font-size: 16px; }
.setbox .field { margin: 8px 0; }
.setbox input { width: 100%; }
.setbox .small-note { margin: 4px 0 8px; }
.setbox form.danger h4 { color: var(--bad); }
.pbtns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.pgames li[data-game] { cursor: pointer; transition: transform .1s, box-shadow .15s; }
.pgames li[data-game]:hover, .pgames li[data-game]:focus-visible { transform: translateX(2px); box-shadow: 0 2px 8px rgba(60,40,10,.15); outline: none; }
.ghead { display: flex; align-items: center; gap: 14px; }
.ghead .trophy { font-size: 40px; }
.ghead p { margin: 4px 0 0; }
.gres tr.won td { background: #fff4cc; }
.gres td:nth-child(2), .gres th:nth-child(2) { text-align: left !important; }
.gstats .statstabs { margin-top: 0; }
.gres td, .gres th { white-space: normal; }
/* leaving / ending a game */
.acctmenu .amsep { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 8px 10px 2px; border-top: 1px solid #ecdcb5; margin-top: 4px; }
.acctmenu button.amdanger { color: var(--bad); }
.mapinfo .mibox.confbox { width: min(420px, 100%); }
.confbox h3 { margin: 0 0 8px; font-size: 20px; }
.confbox p { margin: 0; font-weight: 700; color: var(--muted); line-height: 1.45; }
.votepanel .vnote { font-size: 12.5px; color: var(--muted); font-weight: 700; margin: 2px 0 6px; }
.pnote { margin: 0; color: #fff; font-weight: 700; font-size: 13.5px; opacity: .9; }
.profbox .pnote { color: #eaf4ff; }
.tagleft { font-size: 11px; font-weight: 800; color: #8a4a12; background: #f8e3c4; border-radius: 99px; padding: 1px 7px; margin-left: 4px; white-space: nowrap; }
/* the game's story */
.story h4 { margin: 16px 0 6px; font-size: 15px; }
.story h4:first-child, .story .shl + h4 { margin-top: 6px; }
.story .small { font-size: 12.5px; margin: 2px 0 8px; }
.storychart { width: 100%; height: auto; max-height: 260px; }
.storychart .grid { stroke: #ecdcb5; stroke-width: 1; }
.storychart .axis { font: 700 11px var(--font-b); fill: var(--muted); }
.storychart .lbl { font: 800 12px var(--font-b); }
.sdot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; box-shadow: 0 0 0 1.5px rgba(0,0,0,.25); }
.lchart { display: grid; gap: 7px; }
.lrow { display: grid; grid-template-columns: 130px minmax(0, 1fr) 190px; gap: 10px; align-items: center; font-weight: 700; font-size: 13.5px; }
.lname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lbars { position: relative; height: 16px; background: #f3e8cf; border-radius: 8px; overflow: hidden; }
.lbars span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; }
.lbars .lexp { background: #d9c79c; }
.lbars .lexp + .lgot { top: 4px; bottom: 4px; }
.lval { color: var(--muted); }
.lval b { color: var(--ink); }
.lval .pos { color: var(--good); font-weight: 800; }
.lval .neg { color: var(--bad); font-weight: 800; }
.scols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.smatrix td, .smatrix th { text-align: center !important; }
.smatrix td:first-child, .smatrix th:first-child { text-align: left !important; white-space: nowrap; }
.shl { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 4px; font-weight: 700; }
.shl li { background: #fff6d6; border-radius: 9px; padding: 6px 10px; }
@media (max-width: 760px) { .scols { grid-template-columns: minmax(0, 1fr); } .lrow { grid-template-columns: 90px minmax(0, 1fr); } .lval { grid-column: 1 / -1; font-size: 12.5px; } }
.storychart text { text-transform: none; letter-spacing: 0; }
/* the replay viewer */
body.replaying #timer, body.replaying #chatPanel, body.replaying .chatpanel { visibility: hidden; }
body.replaying #pauseBtn { display: none; }
.replaybar { position: fixed; z-index: 50; top: 58px; left: 50%; transform: translateX(-50%); width: min(720px, calc(100vw - 24px)); padding: 8px 12px; display: grid; gap: 6px; }
.rprow { display: flex; align-items: center; gap: 6px; }
.rprow button { border: 0; background: #f1e4c6; color: var(--ink); font: 800 15px var(--font-b); min-width: 36px; height: 34px; border-radius: 9px; cursor: pointer; padding: 0 8px; }
.rprow button:hover, .rprow button:focus-visible { background: #e7d3a4; outline: none; }
.rprow .rpplay { background: var(--gold); color: #4a2e05; min-width: 46px; }
.rprow input[type=range] { flex: 1; min-width: 60px; accent-color: #c8961b; }
.rppos { font-weight: 800; font-size: 13px; color: var(--muted); white-space: nowrap; min-width: 150px; text-align: right; }
.rpopts { font-weight: 800; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.rpopts select { font: inherit; color: var(--ink); border: 2px solid var(--line); border-radius: 8px; padding: 2px 4px; background: #fff; }
.rpopts .rptoggle.on { background: #e7d3a4; }
.rpopts .rpexit { margin-left: auto; }
.replayhands { position: fixed; z-index: 39; top: 162px; left: 12px; width: 250px; padding: 10px 12px; display: grid; gap: 6px; max-height: calc(100vh - 360px); overflow: auto; }
.rhh { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.rhp { display: grid; grid-template-columns: auto 1fr; gap: 2px 6px; align-items: center; font-size: 13px; }
.rhp b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rhc { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 3px; }
.rhr { min-width: 22px; height: 22px; border-radius: 6px; color: #fff; font-weight: 800; font-size: 12.5px; display: inline-grid; place-items: center; padding: 0 4px; text-shadow: 0 1px 1px rgba(0,0,0,.4); }
.rhd { grid-column: 1 / -1; font-size: 11.5px; color: var(--muted); font-weight: 700; }
@media (max-width: 900px) {
  .replaybar { top: auto; bottom: 8px; padding: 6px 8px; }
  .rprow button { min-width: 30px; height: 32px; font-size: 14px; padding: 0 5px; }
  .rppos { min-width: 0; font-size: 11.5px; }
  .replayhands { top: 60px; left: 8px; right: 8px; width: auto; max-height: 40vh; }
  body.replaying .game { padding-bottom: 110px; }
}
@media (max-width: 600px) {
  .replaybar .rprow:first-child { flex-wrap: wrap; }
  .rppos { order: -1; flex-basis: 100%; text-align: center; }
  .rpxl { display: none; }
  body.replaying .game { padding-bottom: 130px; }
}

/* the admin's banner (across the top of every screen) */
.annbar { position: fixed; z-index: 45; top: 60px; left: 50%; transform: translateX(-50%); width: max-content; max-width: min(720px, calc(100vw - 24px)); display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 14px; border-radius: 14px; background: #fff3c4; color: #4a2e05; font-weight: 800; font-size: 14.5px; box-shadow: 0 6px 20px rgba(0,0,0,.28), inset 0 0 0 2px #e7b736; animation: annin .3s ease-out; }
@keyframes annin { from { opacity: 0; transform: translate(-50%, -10px); } }
.annbar .anntext { line-height: 1.3; }
.annbar .annx { border: 0; background: rgba(122,79,18,.12); color: #7a4f12; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-weight: 800; flex: none; }
.annbar .annx:hover { background: rgba(122,79,18,.24); }
@media (max-width: 900px) { .annbar { top: 56px; font-size: 13.5px; } }
.linkbtn { border: 0; background: none; color: #1d5fa0; font: inherit; font-weight: 800; cursor: pointer; text-decoration: underline; padding: 4px; }

/* the admin panel */
.adminpage .pmain { max-width: 1180px; }
.atabs { margin: 0; background: var(--panel); border-radius: 14px; padding: 2px 8px 0; box-shadow: var(--shadow); border-bottom: 0; }
.abody { display: grid; gap: 14px; }
.alist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-weight: 700; }
.akv td:first-child { color: var(--muted); }
.aok { color: var(--good); font-weight: 800; }
.abad { color: var(--bad); font-weight: 800; }
.aoff { font-size: 11px; font-weight: 800; color: #8a4a12; background: #f8e3c4; border-radius: 99px; padding: 1px 7px; }
.atag { font-size: 11px; font-weight: 800; color: #3d5a73; background: #dde9f3; border-radius: 99px; padding: 1px 8px; margin-left: 4px; white-space: nowrap; vertical-align: 1px; }
.atag.warn { color: #8a4a12; background: #f8e3c4; }
.abanner-on { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 700; }
.abanner-cur { font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.aform { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.aform input, .aform select { font: 700 15px var(--font-b); color: var(--ink); border: 2px solid var(--line); border-radius: 10px; padding: 8px 10px; background: #fff; }
.aform input { flex: 1 1 260px; min-width: 0; }
.arooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.aroom { display: grid; gap: 8px; align-content: start; }
.arhead { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.arcode { font-family: var(--font-d); font-size: 22px; letter-spacing: .04em; }
.arphase { font-weight: 800; font-size: 12.5px; border-radius: 99px; padding: 2px 9px; background: #e9dfc6; color: var(--ink); }
.arphase.ph-play, .arphase.ph-setup { background: #d9efcf; color: #2d6a28; }
.arphase.ph-ended { background: #e3e3e3; color: #555; }
.arplayers { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-weight: 700; }
.arplayers li { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 8px; }
.arplayers li.cur { background: #fff3c4; }
.arplayers a { color: #1d5fa0; font-weight: 800; }
.arplayers .arvp { margin-left: auto; font-weight: 800; color: var(--gold-ink); }
.arplayers .btn { padding: 2px 8px; min-height: 0; font-size: 12px; }
.arplayers li:not(:has(.arvp)) .btn { margin-left: auto; }
.arbtns { display: flex; gap: 6px; flex-wrap: wrap; }
.agames li { display: grid; gap: 6px; }
.agames li.uncounted { opacity: .75; border-left-color: #b9a77a; }
.atablewrap { overflow-x: auto; }
.atable td { vertical-align: middle; }
.atable td:not(:first-child), .atable th:not(:first-child) { text-align: left; }
.atable .aacts { text-align: right !important; white-space: nowrap; }
.atable .aacts .btn { margin-left: 4px; }
.auser { display: inline-flex; align-items: center; gap: 6px; }
.auser .avsvg { width: 24px; height: 24px; border-radius: 50%; }
.alog td { font-weight: 600; }
.atemp code { font-size: 22px; font-weight: 800; background: #f4ead2; padding: 4px 10px; border-radius: 8px; letter-spacing: .04em; user-select: all; }
.gnc { display: inline-block; margin: 6px 0 0; }
@media (max-width: 760px) {
  .arooms { grid-template-columns: minmax(0, 1fr); }
  .atable .aacts { white-space: normal; }
  .atable .aacts .btn { margin: 2px 0 2px 4px; }
}
.alist a, .ausers a { color: #1d5fa0; font-weight: 800; }
.arbtns a.btn { text-decoration: none; }
.amob { display: none; }
@media (max-width: 760px) {
  .ausers tr:first-child, .alog tr:first-child { display: none; }
  .ausers tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; padding: 10px 0; border-top: 1px solid #ecdcb5; }
  .ausers td, .alog td { border: 0 !important; padding: 0 !important; text-align: left !important; }
  .ausers td:nth-child(1) { grid-column: 1 / -1; }
  .ausers td:nth-child(2) { grid-column: 1 / -1; font-size: 13.5px; }
  .ausers td:nth-child(3), .ausers td:nth-child(4) { font-size: 13px; color: var(--muted); }
  .ausers td:nth-child(4) { text-align: right !important; }
  .ausers .aacts { grid-column: 1 / -1; white-space: normal; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
  .ausers .aacts .btn { margin: 0 !important; }
  .amob { display: inline; }
  .alog tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; padding: 9px 0; border-top: 1px solid #ecdcb5; }
  .alog td:nth-child(3) { grid-row: 1; grid-column: 1 / -1; }
  .alog td:nth-child(4) { grid-row: 1; grid-column: 2; text-align: right !important; font-weight: 800; }
  .alog td:nth-child(3) { grid-column: 1; }
  .alog td:nth-child(1), .alog td:nth-child(2) { grid-row: 2; font-size: 12.5px; color: var(--muted); }
  .alog td:nth-child(2) { text-align: right !important; }
}

/* groups of friends */
.glist { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.gcard { display: grid; gap: 4px; text-decoration: none; color: var(--ink); transition: transform .12s; }
.gcard:hover { transform: translateY(-2px); }
.gcard b { font-size: 18px; }
.gcard .atag { justify-self: start; margin: 2px 0 0; }
.gjoin { text-align: center; display: grid; justify-items: center; gap: 6px; padding: 28px 18px; }
.gjoin .pbtns { justify-content: center; }
.gbig { font-size: 40px; line-height: 1; }
.phead .gbig { width: 64px; height: 64px; display: grid; place-items: center; background: linear-gradient(#f7cf55, #e0a526); border-radius: 50%; box-shadow: inset 0 0 0 3px #a3700f; font-size: 32px; }
.gav { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; display: inline-grid; place-items: center; flex: none; vertical-align: middle; }
.gav .avsvg { width: 100%; height: 100%; }
.gavl { background: linear-gradient(#f7cf55, #e0a526); color: #4a2e05; font: 700 13px var(--font-d); }
.gwho { display: inline-flex; align-items: center; gap: 7px; }
.gwho a, .gmembers a { color: #1d5fa0; font-weight: 800; }
.gboard tr.won td { background: #fff6d6; }
.gboard td:first-child { width: 34px; }
.gh2h td.pos { color: var(--good); font-weight: 800; }
.gh2h td.neg { color: var(--bad); }
.gh2h th, .gh2h td { text-align: center !important; }
.gh2h td:first-child { text-align: left !important; white-space: nowrap; }
.grecs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.grec { background: var(--panel-2); border-radius: 12px; padding: 10px 12px; display: grid; gap: 4px; }
.grec .muted { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.grec b { display: flex; align-items: center; gap: 7px; font-size: 16px; }
.grec em { font-style: normal; font-weight: 800; color: var(--gold-ink); }
.gmembers { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-weight: 700; }
.gmembers li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gadd { margin-top: 12px; }
/* admin: the Stats tab */
.stdays button { padding: 5px 12px; }
.sttiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; }
.sttile { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: #fffaf0; box-shadow: inset 0 0 0 1px #e6dcc4; }
.sttile b { font: 700 26px var(--font-d); color: var(--ink); }
.stchart { width: 100%; height: auto; display: block; margin-top: 6px; overflow: visible; }
.stchart .staxis { stroke: #d9c9a3; stroke-width: 1; }
.stchart .stlbl { font: 600 10px var(--font-b); fill: var(--muted); }
.stfin { fill: #2f6bd6; } .stearly { fill: #d08a2e; }
.stchart g:hover .stfin, .stchart g:hover .stearly { filter: brightness(1.15); }
.stcell { fill: #2f6bd6; } .stheat rect:hover { stroke: var(--ink); stroke-width: 1.5; }
.stlegend { display: flex; gap: 14px; font-size: 12.5px; font-weight: 700; color: var(--muted); margin-top: 2px; }
.stlegend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.stlegend i.stfin { background: #2f6bd6; } .stlegend i.stearly { background: #d08a2e; }
.stbar { display: inline-block; width: 90px; height: 8px; border-radius: 4px; background: #efe4c8; vertical-align: middle; margin-right: 6px; overflow: hidden; }
.stbar i { display: block; height: 100%; border-radius: 4px; background: #2f6bd6; }
.sttable td { white-space: nowrap; }
.stcols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .stcols h4 { margin: 4px 0 6px; font: 700 14px var(--font-d); }
.strow { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 8px; font-size: 13.5px; margin: 4px 0; } .strow .stbar { width: 100%; margin: 0; }
@media (max-width: 700px) { .stcols { grid-template-columns: 1fr; } .sttable td { white-space: normal; } .sttable .stbar { width: 48px; } .stchart .stlbl { font-size: 20px; } .stheat .stlbl { font-size: 13px; } }
.adminpage .pcols > div { min-width: 0; }
/* admin: the Errors tab */
.aerrn { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 99px; background: var(--bad); color: #fff; font-size: 11px; font-weight: 900; }
.aerrtop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.aerr { margin-top: 10px; }
.aerr.fixed { opacity: .7; }
.aerrhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aerrmsg { flex: 1; min-width: 200px; overflow-wrap: anywhere; }
.aerrmeta { margin-top: 4px; overflow-wrap: anywhere; }
.aerrmeta code { font-size: 12px; background: #efe4c8; border-radius: 5px; padding: 0 5px; }
.aerr details { margin-top: 6px; } .aerr summary, .aerrfixed > summary { cursor: pointer; font-weight: 800; font-size: 13px; color: var(--gold-ink); }
.aerrfixed { margin-top: 12px; } .aerrfixed > summary { color: #fff; }
.aerrsample { margin-top: 8px; border-top: 1px solid #ecdcb5; padding-top: 6px; }
.aerrsample pre { margin: 4px 0 0; padding: 8px; background: #2b2118; color: #f3e8cf; border-radius: 8px; font-size: 11.5px; line-height: 1.4; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.atag.new { background: var(--bad); color: #fff; } /* (the admin adds people under the member list) */
.gmact { margin-left: auto; display: flex; gap: 4px; }
.gmact .btn { padding: 3px 8px; min-height: 0; font-size: 12px; }
.ginvite { margin-top: 14px; border-top: 1px solid #ecdcb5; padding-top: 12px; }
.ginvite .row { display: flex; gap: 6px; margin-top: 5px; }
.ginvite input { flex: 1; min-width: 0; font: 700 14px var(--font-b); color: var(--muted); border: 2px solid var(--line); border-radius: 10px; padding: 8px 10px; background: #fff; }
.gseasons { margin: 0; background: var(--panel); border-radius: 14px; padding: 2px 8px 0; box-shadow: var(--shadow); border-bottom: 0; }
.lgroupwrap:empty { display: none; }
.lgroup { margin: 14px 0 2px; display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; background: #fff8e2; border-radius: 12px; padding: 9px 12px; box-shadow: inset 0 0 0 2px #f0deaa; }
.lgroup.on { background: #fff3c4; box-shadow: inset 0 0 0 2px #e7b736; }
.lgroup.hint { background: none; box-shadow: none; padding: 0; }
.lgroup .lbl { margin: 0; }
.lgroup select { font: 800 14px var(--font-b); color: var(--ink); border: 2px solid var(--line); border-radius: 9px; padding: 5px 8px; background: #fff; max-width: 100%; }
.lgwarn { color: #8a4a12; font-weight: 800; font-size: 13px; flex-basis: 100%; }
.lgok { color: var(--good); font-weight: 800; font-size: 13px; }
.statsgroup { margin-top: 4px; font-weight: 800; color: var(--gold-ink); }
.statsgroup a { color: inherit; }
@media (max-width: 760px) {
  .gmact { margin-left: 0; width: 100%; }
}
.gboard th:nth-child(2), .gboard td:nth-child(2) { text-align: left !important; }
@media (max-width: 760px) {
  .gphead { flex-wrap: wrap; }
  .gphead .grow { flex: 1 1 0; min-width: 0; }
  .gphead .pbtns { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
  .gboard th:nth-child(6), .gboard td:nth-child(6) { display: none; }
  .grecs { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
  .grec b { font-size: 15px; }
}
.gseasonbar { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; padding: 8px 10px; }
.gseg { display: inline-flex; background: #efe3c4; border-radius: 11px; padding: 3px; gap: 2px; }
.gseg button { border: 0; background: none; font: 800 14px var(--font-b); color: var(--muted); padding: 7px 14px; border-radius: 9px; cursor: pointer; white-space: nowrap; }
.gseg button span { font-weight: 700; opacity: .8; }
.gseg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.gearlier { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13px; color: var(--muted); }
.gearlier select { font: 800 14px var(--font-b); color: var(--ink); border: 2px solid var(--line); border-radius: 9px; padding: 5px 8px; background: #fff; }
.gearlier.on select { border-color: var(--gold); background: #fff8e2; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
@media (max-width: 760px) {
  .gboard th, .gboard td { padding: 6px 4px; }
  .gboard th { font-size: 10.5px; letter-spacing: .02em; }
}
.statstabs { overflow-y: hidden; } /* (sideways only: no stray up/down arrows next to the tabs) */
.atabs[hidden] { display: none; }
.gopen { box-shadow: var(--shadow), inset 0 0 0 2px #e7b736; }
.gopenlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gopenlist li { display: flex; align-items: center; gap: 10px; justify-content: space-between; background: #fff8e2; border-radius: 11px; padding: 9px 12px; font-weight: 700; }

/* public games */
.home { align-content: center; gap: 16px; }
.homeplay { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.homeplay .btn { width: 100%; }
.homeplaynote { margin: 8px 0 0; text-align: center; }
.openg { padding: 18px 20px; }
.openg h3 { margin: 0 0 6px; font-family: var(--font-d); font-size: 20px; }
.olbl { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 10px 0 6px; }
.olist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.olist li { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--panel-2); border-radius: 11px; padding: 9px 12px; font-weight: 700; }
.olist li > div { min-width: 0; }
.olist .ovp { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 99px; background: #f0d98c; color: #5a3d08; font-size: 12px; padding: 0 5px; }
.lpubwrap:empty { display: none; }
.lpub { margin: 14px 0 2px; display: flex; align-items: flex-start; gap: 10px; background: #f4f0e6; border-radius: 12px; padding: 9px 12px; font-size: 14px; cursor: pointer; box-shadow: inset 0 0 0 2px #e6dcc4; }
.lpub.on { background: #e5f3e1; box-shadow: inset 0 0 0 2px #9fcf94; }
.lpub.readonly { cursor: default; }
.lpub input { width: 18px; height: 18px; margin-top: 1px; accent-color: #3f8a3a; flex: none; }
.lfill { margin-top: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #fff3c4; border-radius: 12px; padding: 9px 12px; font-weight: 800; font-size: 14px; box-shadow: inset 0 0 0 2px #e7b736; }
.lfill span { flex: 1 1 200px; }
@media (max-width: 420px) { .homeplay { grid-template-columns: 1fr; } }
.nowname { font-weight: 700; opacity: .8; }
.atidy { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-weight: 700; padding: 12px 16px; }
.aempty { font-size: 11px; font-weight: 800; color: #6b6b6b; background: #e6e6e6; border-radius: 99px; padding: 2px 8px; white-space: nowrap; }
.alook { display: grid; gap: 8px; margin: 6px 0 12px; }
/* Look panel: maps in the lobby (a tick each) */
.alookrow.mhbox { display: block; margin-top: 12px; cursor: default; }
.mhhead { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.mhcount { margin-left: auto; color: var(--muted); font-weight: 700; font-size: 13px; }
.mhbox > .small-note { display: block; margin: 2px 0 0; }
.mhlist { display: grid; margin-top: 8px; border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px #e6dcc4; }
.mhrow { display: grid; grid-template-columns: 20px minmax(0, 1fr) 92px 128px; align-items: center; gap: 12px; padding: 7px 12px; background: #fffaf0; border-top: 1px solid #efe5cc; font-size: 14px; cursor: pointer; }
.mhrow:first-child { border-top: 0; }
.mhrow input { width: 18px; height: 18px; margin: 0; accent-color: var(--good); }
.mhname { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.mhpl { color: var(--muted); font-weight: 700; font-size: 13px; }
.mhtag { justify-self: start; font-size: 11.5px; font-weight: 800; padding: 2px 9px; border-radius: 99px; background: #efe4c8; color: var(--gold-ink); white-space: nowrap; }
.mhtag.sea { background: #d7ebf7; color: #1d5a85; }
.mhoff { background: #f1ece1; } .mhoff .mhname b, .mhoff .mhpl, .mhoff .mhtag { opacity: .5; }
@media (max-width: 560px) { .mhrow { grid-template-columns: 20px minmax(0, 1fr) auto; } .mhpl { display: none; } }
.alookrow { display: flex; align-items: flex-start; gap: 10px; background: #f4f0e6; border-radius: 12px; padding: 10px 12px; cursor: pointer; box-shadow: inset 0 0 0 2px #e6dcc4; }
.alookrow.on { background: #e5f3e1; box-shadow: inset 0 0 0 2px #9fcf94; }
.alookrow input { width: 20px; height: 20px; margin-top: 2px; accent-color: #3f8a3a; flex: none; }
.alookrow > span { display: grid; gap: 2px; }
.alooksample { background: #1e6aa3; border-radius: 12px; overflow: hidden; }
.alooksample svg { display: block; width: 100%; height: auto; }
.alookhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.alookhead h3 { margin: 0; }
.alookbtns { display: flex; gap: 8px; margin-left: auto; }
.alookbtns .btn:disabled { opacity: .45; cursor: default; }
.alooknote { margin-top: 6px; }
.alooktag { display: inline-block; padding: 1px 7px; border-radius: 999px; background: #f6d77a; color: #5a4300; font-size: 11px; font-weight: 800; vertical-align: 1px; }
.alookpick { align-items: center; cursor: default; }
.alookpick > span { flex: 1; padding-left: 37px; } /* (lines up with the switches' names) */
.alookname { display: flex; align-items: center; flex-wrap: wrap; gap: 0 8px; }
.alookpick select { flex: none; font: inherit; font-weight: 700; padding: 6px 8px; border-radius: 8px; border: 2px solid #d9cba8; background: #fffaf0; color: inherit; }
@media (max-width: 560px) { .alookpick { flex-wrap: wrap; } .alookpick > span { flex-basis: 100%; } .alookpick select { margin-left: 37px; } }
/* the help box's "On this map" notes */
.helpscroll .mapdl { margin: 2px 0 6px; }
.helpscroll .mapdl dt { font-weight: 800; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--gold-ink); margin-top: 8px; }
.helpscroll .mapdl dd { margin: 2px 0 0; font-size: 14px; line-height: 1.45; }
.aclear { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 12px; border-radius: 12px; background: #fbeee9; box-shadow: inset 0 0 0 2px #efc9bd; }
.aclear > div { display: grid; gap: 2px; flex: 1; min-width: 220px; }
.alookicons { display: grid; gap: 8px; cursor: default; }
.alookicons > span { display: grid; gap: 2px; padding-left: 37px; }
.aicons { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; padding-left: 37px; }
.aicon { display: grid; justify-items: center; gap: 4px; min-width: 0; }
.aiconpic { width: 44px; height: 58px; border-radius: 7px; display: grid; place-items: center; box-shadow: inset 0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,.2); }
.aiconpic svg { width: 36px; height: 36px; }
.aiconname { font-size: 12px; font-weight: 800; color: var(--muted); }
.aicon select { width: 100%; min-width: 0; font: inherit; font-size: 12.5px; font-weight: 700; padding: 4px 4px; border-radius: 8px; border: 2px solid #d9cba8; background: #fffaf0; color: inherit; }
.aicon select:disabled { opacity: .6; }
@media (max-width: 900px) { .aicons { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { .aicons { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-left: 0; } .alookicons > span { padding-left: 0; } }
#board.panning, #board[style*="scale"] { overflow: visible; } /* (while the view moves as a picture, show the sea drawn past its edges) */

/* Wide screens: the top bar covers only the board, so the sidebar runs from the very top of the screen; the chat
   takes the extra height (the log keeps its old size), or the log does while the chat is folded away */
@media (min-width: 901px) {
  .game { grid-template-columns: minmax(0, 1fr) 350px; grid-template-rows: auto minmax(0, 1fr) auto; }
  .main { display: contents; }
  .topbar { grid-column: 1; grid-row: 1; min-width: 0; }
  .boardwrap { grid-column: 1; grid-row: 1 / 3; } /* (no top bar in a game: the board runs to the top too) */
  .side { grid-column: 2; grid-row: 1 / 3; padding-top: 8px; }
  .dock { grid-column: 1 / 3; grid-row: 3; }
  .logpanel { flex: 0 1 140px; }
  .chatpanel:not(.closed) { flex: 1 1 0; display: flex; flex-direction: column; min-height: 125px; } /* (only the spare height: the player boxes come first) */
  .chatpanel:not(.closed) .chatbody { flex: 1; display: flex; flex-direction: column; min-height: 0; }
  .chatpanel:not(.closed) .chatlog { flex: 1; max-height: none; min-height: 40px; }
  .side:has(.chatpanel.closed) .logpanel { flex: 1 1 0; }
}

/* the game's ? and ⚙ buttons, and their menus */
/* A game has no top bar: the logo floats in the board's top-left corner, and ?, ⚙ and the account button in its
   top-right corner (on a phone ? and ⚙ sit beside the turn bar instead; placeGameBtns moves them) */
.flcorner { position: absolute; left: 12px; top: 12px; z-index: 4; display: flex; align-items: center; gap: 8px; }
.flcard, .gbtn, .flcorner .chip.watch { background: rgba(255, 250, 240, .94); color: var(--ink); border: 0; border-radius: 12px; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.flcard { height: 40px; padding: 0 13px 0 7px; display: flex; align-items: center; gap: 6px; font: 700 18px var(--font-d); cursor: pointer; }
.flcard svg { width: 28px; height: 28px; }
.flcard:hover, .gbtn:hover { background: #fff; }
.flcorner .chip.watch { height: 30px; display: inline-flex; align-items: center; }
.gamebtns { position: absolute; right: 12px; top: 12px; z-index: 4; display: flex; gap: 8px; }
.gbtn { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; font: 900 19px var(--font-b); cursor: pointer; }
.gbtn svg { display: block; }
.gamebtns .avbtn { width: 40px; height: 40px; margin-left: 0; } /* (round, with the thin white ring it has on the home page) */
.gamebtns.inrow { position: static; flex: none; gap: 7px; }
.gamebtns.inrow .gbtn { width: 44px; height: auto; min-height: 40px; background: linear-gradient(#fffaf0, #f3e7cb); box-shadow: 0 2px 0 #c9b384, 0 6px 14px rgba(5, 25, 45, .28); }
.gamebtns.inrow .avbtn { display: none; } /* (on a phone the account's items are in the ⚙ menu) */
@media (max-width: 900px) { .flcorner .logo { display: none; } .flcorner { left: 10px; top: 10px; } .gamebtns.inrow { gap: 6px; } .gamebtns.inrow .gbtn { width: 40px; } .turnrow { gap: 6px; } .turnrow .clock { width: 74px; font-size: 18px; } }
.roomrow { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; }
.roomrow code { font: 900 13px var(--font-b); letter-spacing: .06em; background: #f1e2bd; border-radius: 6px; padding: 1px 7px; }
.topmenu { position: fixed; z-index: 70; width: 250px; padding: 10px; display: grid; gap: 4px; }
.topmenu > button { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; border: 0; background: transparent; font: inherit; font-weight: 800; color: var(--ink); padding: 9px 10px; border-radius: 9px; cursor: pointer; }
.topmenu > button:hover, .topmenu > button:focus-visible { background: var(--panel-2); outline: none; }
.topmenu > button.amdanger { color: var(--bad); }
.topmenu .amsep { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 8px 10px 2px; border-top: 1px solid #ecdcb5; margin-top: 4px; }
.topmenu .amsep:first-child { border-top: 0; margin-top: 0; }
.topmenu .amsep.amline { padding: 0; margin: 4px 0; }
.topmenu .vrow { display: grid; grid-template-columns: 58px 1fr 40px; align-items: center; gap: 8px; font-weight: 800; font-size: 13.5px; padding: 2px 10px; }
.topmenu .vrow output { text-align: right; font-size: 12.5px; color: var(--muted); }
.topmenu .vrow input[type=range] { width: 100%; accent-color: #2a9ea6; }
.topmenu.muted .vrow { opacity: .5; }
.topmenu .sw { flex: none; width: 36px; height: 21px; border-radius: 99px; background: #cdbb93; position: relative; transition: background .15s; }
.topmenu .sw i { position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: left .15s; }
.topmenu .sw.on { background: #3f8a3a; } .topmenu .sw.on i { left: 18px; }
.helptabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 10px; }
.helpscroll .prow { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; padding: 8px 0; border-bottom: 1px solid #ecdcb5; }
.helpscroll .prow .pval { font-weight: 800; color: var(--gold-ink); }
.helpscroll .prow .small-note { grid-column: 1 / -1; }

/* the home screen: header strip, then Casual / Ranked / Leaderboard */
.home:has(.homewrap) { display: block; align-content: start; padding: 24px 16px 40px; }
.rkppl { display: flex; flex-wrap: wrap; gap: 2px 12px; font-weight: 800; }
.homewrap { position: relative; max-width: 1180px; margin: 0 auto; display: grid; gap: 16px; }
.homewrap .card { width: auto; max-width: none; margin: 0; }
.homehead { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 16px 22px !important; }
.homehead .brand { margin: 0; } .homehead .tag { margin: 0; text-align: left; } .homehead .acct { margin: 0; flex-wrap: wrap; }
.homecols { display: grid; grid-template-columns: 1fr 1fr 0.85fr; gap: 16px; align-items: start; }
.hsec h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font: 700 22px var(--font-d); }
.hpill { font: 800 11px var(--font-b); letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; }
.hpill.cas { background: #d7ebf7; color: #1d5a85; } .hpill.rk { background: #f6e1b0; color: #7a4f12; }
.hsub { margin: 0 0 12px; color: var(--muted); font-size: 13.5px; font-weight: 600; }
.hsec .homeplay { margin: 10px 0 6px; } .homeplay.one { grid-template-columns: 1fr; }
.hsec .openg { margin-top: 6px; }
.myrating { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: center; background: linear-gradient(#fff6df, #f8e7bd); border-radius: 12px; padding: 10px 14px; box-shadow: inset 0 0 0 1px #e6cf95; margin-bottom: 10px; }
.myrating b { grid-row: span 2; font: 700 34px var(--font-d); color: #5a3d08; }
.myrating span { font-size: 13px; font-weight: 700; color: var(--muted); }
.myrating.guest { grid-template-columns: 1fr; }
.myrating.searching { grid-template-columns: auto 1fr; }
.myrating.searching b.rkst { grid-row: auto; font: 700 17px var(--font-d); display: block; }
.myrating.searching div { display: grid; gap: 2px; }
.rkspin { width: 26px; height: 26px; border-radius: 50%; border: 4px solid #e6cf95; border-top-color: #7a4f12; animation: rkspin 1s linear infinite; }
@keyframes rkspin { to { transform: rotate(360deg); } }
em.up { color: var(--good); font-style: normal; } em.down { color: var(--bad); font-style: normal; } em.prov { font-style: normal; color: var(--gold-ink); }
.rkcount { margin: 4px 0 0; color: var(--muted); }
.olist .rt { font-size: 11.5px; font-weight: 800; color: #7a4f12; background: #f6e1b0; border-radius: 6px; padding: 1px 5px; margin-left: 3px; }
.lbt { width: 100%; border-collapse: collapse; font-size: 14px; }
.lbt td { padding: 6px 4px; border-bottom: 1px solid #efe5cc; font-weight: 700; }
.lbt td.n { width: 26px; color: var(--muted); text-align: center; } .lbt td.r { text-align: right; font-family: var(--font-d); font-size: 15px; }
.lbt tr.me td, .lbfull tr.me td { background: #fff3d1; }
.lbwho { display: flex; align-items: center; gap: 7px; color: var(--ink); text-decoration: none; } .lbwho:hover { text-decoration: underline; }
.lbav { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; display: inline-grid; place-items: center; flex: none; }
.lbav.lbl { background: var(--gold); color: #fff; font-size: 11px; font-weight: 900; } .lbav svg { width: 100%; height: 100%; }
.lbme { margin: 8px 0 0; text-align: center; }
.mlink { display: block; text-align: center; margin-top: 10px; font-weight: 800; color: var(--sea); }
.rktag { font-size: 11.5px; font-weight: 800; color: #7a4f12; background: #f6e1b0; border-radius: 6px; padding: 1px 6px; margin-left: 4px; }
.rkres { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; font-size: 14px; font-weight: 700; }
.rkres span.mine { background: #fff3d1; border-radius: 8px; padding: 0 6px; }
.rkblock .rkhead { display: grid; grid-template-columns: auto 1fr minmax(160px, 300px); gap: 18px; align-items: center; }
.rkbig { display: grid; } .rkbig b { font: 700 40px var(--font-d); color: #5a3d08; line-height: 1; } .rkbig span { font-size: 13px; font-weight: 700; color: var(--muted); }
.rkfacts { display: grid; gap: 3px; font-size: 14px; color: var(--muted); font-weight: 600; } .rkfacts b { color: var(--ink); }
.rkchart { width: 100%; height: auto; }
.psec { margin: 14px 0 0; font: 700 18px var(--font-d); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
@media (max-width: 1000px) { .homecols { grid-template-columns: 1fr; } .homehead { grid-template-columns: 1fr; text-align: center; } .homehead .tag { text-align: center; } .homehead .acct { justify-content: center; } .rkblock .rkhead { grid-template-columns: auto 1fr; } .rkchart { grid-column: 1 / -1; } }

/* the full leaderboard page */
.lbfull{max-width:640px}
.lbfull th,.lbfull td{text-align:right}
.lbfull th:nth-child(1),.lbfull td:nth-child(1){text-align:left;width:2.5em}
.lbfull th:nth-child(2),.lbfull td:nth-child(2){text-align:left}
.lbfull tr.me td{background:rgba(240,190,60,.18)}

/* signing in with Google / Discord */
.social{display:grid;gap:8px;margin:4px 0 12px}
.sbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:44px;border-radius:10px;font-weight:600;font-size:15px;text-decoration:none;border:1px solid transparent;box-sizing:border-box}
.sbtn.google{background:#fff;color:#1f1f1f;border-color:#c9c2b0}
.sbtn.google:hover{background:#f7f7f7}
.sbtn.discord{background:#5865F2;color:#fff}
.sbtn.discord:hover{background:#4752c4}
.sbtn.test{background:#efe6d2;color:#3b2a14}
.provletter{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#8a7a5c;color:#fff;font-size:12px}
.orline{display:flex;align-items:center;gap:10px;color:#8a7a5c;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin:6px 0 10px}
.orline::before,.orline::after{content:"";flex:1;height:1px;background:#e2d6bb}
.viahead{display:flex;align-items:center;gap:12px;background:#f6efdf;border-radius:12px;padding:10px 12px;margin:6px 0 12px}
.viahead .vic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;background:#fff;border:1px solid #e2d6bb}
.viahead .vic.discord{background:#5865F2;border-color:#5865F2}
.viahead small{display:block;color:#8a7a5c}
.namecheck{font-size:13px;margin:-4px 0 10px;color:#2f8a3e;font-weight:700;min-height:1em}
.namecheck.bad{color:#b3261e}
.logins{display:grid;gap:8px;margin:6px 0 4px}
.login{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid #e2d6bb;border-radius:10px;background:#fffaf0}
.login .ic{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;flex:none;background:#f0e2c0}
.login .ic.google{background:#fff;border:1px solid #e2d6bb}
.login .ic.discord{background:#5865F2}
.login .who{flex:1;min-width:0}
.login .who b{display:block}
.login .who small{color:#8a7a5c;overflow-wrap:anywhere}
.login .btn{padding:6px 12px;font-size:13px;text-decoration:none;flex:none}

/* Privacy Policy and Terms of Service pages; the home page footer */
.legalpage{max-width:760px;line-height:1.55;margin-left:auto;margin-right:auto}
.legalpage h3{margin:22px 0 6px}
.legalpage h4{margin:14px 0 4px;font-size:15px}
.legalpage ul,.legalpage ol{padding-left:22px;margin:6px 0}
.legalpage li{margin:4px 0}
.legalpage .legalnav{margin-top:26px;padding-top:12px;border-top:1px solid #e2d6bb}
.homefoot{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:18px 0 0;font-size:13px;color:rgba(255,255,255,.75)}
.homefoot a{color:#fff;text-decoration:none;font-weight:600}
.homefoot a:hover{text-decoration:underline}
.legalnote{text-align:center;margin-top:10px}