:root{--bg:#f4ecdc;--panel:#fffaf0;--ink:#2d261e;--muted:#7d7060;--line:#e2d4ba;--accent:#8a4b1c;--good:#2e8b57;--bad:#c0392b;--sel:#f2b705;--legal:#2e9e5b;--over:#e07b1f;
--shadow:0 1px 2px rgba(60,40,10,.08),0 6px 18px rgba(60,40,10,.08);color-scheme:light;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.45}
@media (prefers-color-scheme:dark){:root{--bg:#1b1916;--panel:#26231f;--ink:#efe6d6;--muted:#a89a85;--line:#3d372f;--accent:#e6a464;--shadow:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.3);color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink)}
button{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:.5rem;padding:.4rem .7rem}
button:hover:not(:disabled){border-color:var(--accent)}
button:disabled{opacity:.45;cursor:default}
button.primary{background:var(--good);border-color:var(--good);color:#fff;font-weight:700}
button.danger{color:var(--bad)}
button.secondary{color:var(--muted)}
.top{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.2rem;padding:.6rem 1rem;border-bottom:1px solid var(--line)}
.top h1{margin:0;font-family:Georgia,serif;font-size:1.5rem}
.top h1 small{font-family:system-ui,sans-serif;font-size:.75rem;color:var(--muted);font-weight:400;margin-left:.3rem}
.home{color:var(--muted);text-decoration:none}
.turninfo{margin-left:auto;font-weight:600}
.turninfo .you{color:var(--good)}
.layout{display:grid;grid-template-columns:12.5rem minmax(0,1fr) 27rem;gap:1rem;padding:.8rem 1rem;max-width:110rem;margin:auto;min-width:64rem}
.right{position:sticky;top:.6rem;max-height:calc(100vh - 4.5rem);overflow:auto;padding-right:.2rem;align-self:start}
.boardwrap{background:var(--panel);border-radius:.8rem;box-shadow:var(--shadow);padding:.5rem}
#board{display:block;height:calc(100vh - 9.2rem);min-height:30rem;max-width:100%;aspect-ratio:1;margin:auto}
.cell{cursor:pointer}
.banner{background:var(--panel);border-radius:.8rem;box-shadow:var(--shadow);padding:.8rem 1rem;margin-bottom:.8rem;border-left:6px solid var(--accent)}
.banner h2{margin:.1rem 0 .3rem;font-family:Georgia,serif}
.handbar{display:flex;flex-wrap:wrap;gap:.8rem;align-items:flex-end;justify-content:center;margin-top:.6rem}
.hand{display:flex;gap:.6rem;flex-wrap:wrap}
.card{width:6.6rem;background:var(--panel);border:2px solid var(--line);border-radius:.6rem;padding:.35rem;box-shadow:var(--shadow);cursor:pointer;text-align:center;position:relative}
.card.sel{border-color:var(--sel);box-shadow:0 0 0 3px rgba(242,183,5,.35),var(--shadow)}
.card svg{width:100%;height:auto;display:block;border-radius:.3rem}
.card .nm{font-size:.78rem;font-weight:600;margin-top:.2rem;line-height:1.2}
.card .tier{position:absolute;top:.15rem;right:.25rem;font-size:.62rem;background:var(--panel);border-radius:.3rem;padding:0 .25rem;color:var(--muted)}
.card .cost{font-size:.7rem;color:var(--muted)}
.card.locked{opacity:.55}
.handtools{display:flex;gap:.4rem;flex-wrap:wrap}
.handtools button{font-size:1.1rem;min-width:2.6rem}
.handtools #pass{font-size:.85rem}
.hint{color:var(--muted);font-size:.85rem;margin:.4rem 0 0}
.panel{background:var(--panel);border-radius:.8rem;box-shadow:var(--shadow);padding:.7rem .9rem;margin-bottom:.8rem}
.panel h2{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin:0 0 .5rem}
.muted{color:var(--muted);font-weight:400}
table.res{width:100%;border-collapse:collapse;font-size:.88rem}
table.res th{font-weight:500;color:var(--muted);font-size:.72rem;text-align:right;padding:.1rem .3rem}
table.res td{text-align:right;padding:.12rem .3rem;border-top:1px solid var(--line)}
table.res td:first-child,table.res th:first-child{text-align:left}
.pos{color:var(--good)}.neg{color:var(--bad)}




.player.grey .pn{color:var(--muted);text-decoration:line-through 1px}
.player .pn{font-weight:700;color:var(--c)}
.player .meta{font-size:.75rem;color:var(--muted)}
.player .mini{display:flex;gap:2px;margin-top:2px}
.player .mini svg{width:1.3rem;height:1.3rem;border-radius:2px}



.join input{font:inherit;padding:.4rem .6rem;border:1px solid var(--line);border-radius:.5rem;background:var(--bg);color:var(--ink);width:100%}
.avatars{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;margin:.5rem 0}
.avatars button{padding:0;border-radius:50%;border:2px solid transparent;background:none}
.avatars button img{width:100%;display:block;border-radius:50%}
.avatars button.sel{border-color:var(--sel)}
.quest{border-top:1px solid var(--line);padding:.35rem 0;font-size:.86rem}
.quest:first-child{border-top:0}
.bar{height:6px;background:var(--line);border-radius:3px;overflow:hidden;margin:.2rem 0}
.bar i{display:block;height:100%;background:var(--good)}
.info h3{margin:.1rem 0 .2rem;font-size:1rem}
.info p{margin:.2rem 0;font-size:.86rem}
.info .tags{font-size:.72rem;color:var(--muted)}
.action{border:2px solid var(--line)}
.action.ready{border-color:var(--good)}
.action h3{margin:.1rem 0 .4rem;font-size:1rem}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;font-size:.84rem}
.cmp div{background:var(--bg);border-radius:.4rem;padding:.35rem .5rem}
.delta{font-size:.86rem;margin:.4rem 0}
.why{color:var(--bad);font-size:.86rem}
.log{list-style:none;margin:.3rem 0 0;padding:0;max-height:14rem;overflow:auto;font-size:.8rem}
.log li{padding:.15rem 0;border-top:1px solid var(--line)}
.log b{color:var(--muted);font-weight:500;margin-right:.3rem}
.stats{font-size:.84rem}
.chart{width:100%;height:4.5rem;display:block}
.toast{position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:.6rem 1rem;border-radius:.6rem;box-shadow:var(--shadow);z-index:20;max-width:90vw}
.score{display:flex;align-items:center;gap:.4rem;font-size:.9rem;padding:.15rem 0}
.score img{width:1.8rem;border-radius:50%;border:2px solid var(--c)}
.turnstrip{background:var(--good);color:#fff;font-weight:700;font-size:1.05rem;text-align:center;border-radius:.8rem;padding:.4rem;margin-bottom:.6rem;box-shadow:var(--shadow);animation:pulse 1.6s ease-in-out 3}
.turnstrip.wait{background:var(--panel);color:var(--muted);font-weight:500;animation:none}
@keyframes pulse{50%{transform:scale(1.015);filter:brightness(1.12)}}
#bell{font-size:1.1rem;padding:.2rem .5rem}
.handcol{display:flex;flex-direction:column;gap:.5rem;align-items:center;position:sticky;top:.6rem;align-self:start}
.coltitle{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin:.2rem 0}
.handcol .hand{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;width:100%}
.handcol .card{width:auto;padding:.25rem}
.handcol .card .nm{font-size:.7rem}
.handcol .handtools{justify-content:center}
.handcol .handtools button{min-width:2.3rem;padding:.3rem .45rem}
.passbtn{font-size:.8rem;width:100%}
.handcol .hint{font-size:.75rem;text-align:center}
.player .mini span{cursor:pointer;display:inline-flex}
table.res td:first-child{white-space:nowrap}
.picker{display:flex;align-items:center;gap:.4rem;margin:.6rem 0}
.picker button{font-size:1.3rem;padding:.6rem .5rem;flex:none}
.picker figure{margin:0;flex:1;text-align:center}
.picker img{width:100%;max-width:12rem;aspect-ratio:5/6;object-fit:cover;border-radius:1rem;box-shadow:var(--shadow);background:#fff;display:block;margin:auto}
.picker figcaption{margin-top:.35rem;font-size:.9rem}
.nowcard{width:100%;text-align:center;background:var(--panel);border-radius:.8rem;box-shadow:var(--shadow);padding:.4rem .4rem .5rem;border:3px solid var(--c)}
.nowcard img{width:100%;aspect-ratio:5/6;object-fit:cover;border-radius:.55rem;display:block}
.nowname{font-weight:800;color:var(--c);margin-top:.3rem;font-size:1rem;overflow-wrap:anywhere}
.nowsub{font-size:.75rem;color:var(--muted)}
.score img{width:2.4rem;height:2.4rem;object-fit:cover;object-position:50% 22%}
#players{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.player{display:flex;flex-direction:column;gap:.15rem;padding:.4rem;border-radius:.7rem;background:var(--bg);border:3px solid transparent}
.player.cur{border-color:var(--c);box-shadow:0 0 0 3px rgba(242,183,5,.35)}
.player .pic{position:relative}
.player .pic img{width:100%;aspect-ratio:5/6;object-fit:cover;border-radius:.6rem;border:3px solid var(--c);display:block;background:#fff}
.player.grey .pic img{filter:grayscale(1);opacity:.55}
.player .qnum{position:absolute;left:.35rem;top:.35rem;background:var(--c);color:#fff;font-size:.72rem;font-weight:800;border-radius:.4rem;padding:.05rem .4rem}
.player .acts{display:flex;gap:.3rem;justify-content:flex-end}
.player .acts button{font-size:.72rem;padding:.15rem .45rem}
.player .meta{line-height:1.3}
.mrow{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}
.mcard{background:var(--bg);border-radius:.5rem;padding:.3rem;text-align:center;font-size:.75rem}
.mcard svg{width:100%;height:auto;border-radius:.3rem;cursor:pointer;display:block}
.mcard .nm{font-weight:600;margin:.15rem 0;line-height:1.15;min-height:2.3em}
.mcard button{font-size:.75rem;padding:.2rem .4rem;width:100%}
h3.sub{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin:.6rem 0 .2rem}
.inv{display:flex;gap:.45rem;align-items:center;font-size:.8rem;padding:.25rem 0;border-top:1px solid var(--line)}
.inv .ic{font-size:1.3rem}
.inv button{margin-left:auto;font-size:.75rem;padding:.2rem .5rem}
.inv.built{opacity:.75}
.parts{margin:.2rem 0;padding-left:1rem;font-size:.84rem}
.parts li{margin:.1rem 0}

.uparrow { animation: upbob 1.1s ease-in-out infinite; }
@keyframes upbob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.research { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .4rem; }
.research .rs { font-size: .78rem; padding: .15rem .45rem; border-radius: 6px; background: #eee6d6; color: #6d6150; }
.research .rs.on { background: #d9efd9; color: #245c2c; font-weight: 600; }
.research .rs small { font-weight: 400; }
.gift { border: 2px solid #c9a227; background: #fff8e1; border-radius: 8px; padding: .4rem .5rem; margin-bottom: .5rem; }

.invh { font-size: .8rem; margin: .3rem 0 .2rem; color: #6d5a3a; }
details.more { margin-top: .3rem; } details.more summary { cursor: pointer; font-size: .8rem; color: #6d5a3a; }

.exch { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .4rem; } .exch button { font-size: .8rem; }

/* other players: round chibi portraits; you: the big portrait */
.player.other .pic img{width:72%;aspect-ratio:1;border-radius:50%;margin:.2rem auto 0;object-fit:cover}
.nowcard.round img{width:70%;aspect-ratio:1;border-radius:50%;margin:.2rem auto;object-fit:cover}
.score img{object-position:50% 50%}