:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f1eddd;background:#161d1a;--muted:#abae9f;--lime:#d6ee87;--panel:#222b25;--line:#3d493b;--accent:#d6ee87;color-scheme:dark}*{box-sizing:border-box}body{margin:0;min-width:280px}main{max-width:680px;margin:auto;padding:calc(18px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom))}header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:4px 0 28px}a{color:inherit;text-decoration:none}#brand{font-size:22px;font-weight:850}small{display:block;color:var(--muted);font-size:12px;font-weight:500}#identity{font-size:12px;color:var(--lime);text-align:right}h1{font-size:34px;line-height:1.05;letter-spacing:-1px;margin:8px 0 14px}h2{font-size:21px;margin:8px 0 12px}h3{font-size:17px;margin:8px 0}p{line-height:1.5;color:var(--muted);margin:8px 0 16px}.eyebrow{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--lime);font-weight:750}.hero{position:relative;overflow:hidden;min-height:155px;padding:20px;background:linear-gradient(120deg,#334434,#24332b);border:1px solid var(--line);border-radius:24px;margin:16px 0 20px}.hero h1,.hero p{max-width:65%;position:relative;z-index:1}.hero .token{position:absolute;width:130px;height:130px;right:-5px;top:12px;transform:rotate(-8deg)}button,select{font:inherit;min-height:46px;border-radius:13px;border:1px solid var(--line);background:#2d382e;color:inherit;padding:11px 15px;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:3px solid #fff}button:hover{border-color:var(--lime)}button.primary{background:var(--lime);color:#1a251a;border-color:var(--lime);font-weight:750}button.danger{color:#ffc2ad;border-color:#725043}button:disabled{opacity:.42;cursor:default}button.selected{box-shadow:0 0 0 2px var(--lime) inset;border-color:var(--lime)}.row{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.row>*{flex:1}.row .small{flex:0 0 auto}.tabs{display:flex;gap:6px;background:#101612;border:1px solid var(--line);padding:5px;border-radius:16px;margin:16px 0}.tabs button{border:0;background:transparent;flex:1;padding:9px 8px}.tabs button.active{background:var(--lime);color:#192317;font-weight:750}.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.card{padding:18px;border:1px solid var(--line);border-radius:20px;background:var(--panel);margin:12px 0}.grid .card{margin:0;display:flex;flex-direction:column;min-width:0}.card p{font-size:13px;flex:1}.card button{width:100%}.badge{display:inline-block;font-size:11px;color:var(--lime);border:1px solid #566841;padding:4px 8px;border-radius:20px;margin-bottom:8px}.dim{opacity:.6}.token{display:inline-block;position:relative;overflow:hidden;aspect-ratio:1;vertical-align:middle;width:40px;flex-shrink:0}.token img{position:absolute;width:200%;height:200%;max-width:none;pointer-events:none;object-fit:fill}.token.f0 img{left:0;top:0}.token.f1 img{left:-100%;top:0}.token.f2 img{left:0;top:-100%}.token.f3 img{left:-100%;top:-100%}.seat{display:flex;gap:9px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:14px;margin:8px 0}.seat.me{border-color:var(--lime)}.seat .label{flex:1;font-size:14px}.seat .ready{font-size:12px;color:var(--lime)}.board{display:grid;gap:5px;padding:8px;background:#101812;border:1px solid var(--line);border-radius:16px;max-width:440px;margin:16px auto}.board.mnk{grid-template-columns:repeat(5,1fr)}.board .cell{aspect-ratio:1;min-height:0;min-width:0;padding:0;border-radius:10px;background:#2c372d;display:flex;align-items:center;justify-content:center;position:relative}.cell .token{width:95%;height:95%}.cell.win{background:#647a31;border-color:var(--lime)}.cell.last:after{content:"";width:5px;height:5px;background:#fff;border-radius:50%;position:absolute;right:4px;bottom:4px}.board button:disabled{opacity:1}.cell.legal{border-color:#b3cb6f;background:#3a4e31}.board.quoridor{grid-template-columns:repeat(9,1fr);gap:3px}.quoridor .cell{border-radius:4px;font-size:10px}.quoridor .cell:disabled{opacity:1}.cell.hwall{border-bottom:4px solid #e8b472}.cell.vwall{border-right:4px solid #e8b472}.hand{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}.playing-card{width:75px;min-height:105px;border:2px solid #efead9;border-radius:13px;font-size:23px;font-weight:850;box-shadow:0 5px 0 #1115;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;color:#fff}.playing-card small{font-size:10px;color:#fff;font-weight:500}.playing-card.red{background:#8e4133}.playing-card.blue{background:#33587c}.playing-card.yellow{background:#77651f}.playing-card.green{background:#3e663f}.playing-card.wild{background:linear-gradient(135deg,#735d3a,#3e4c65)}.playing-card.hidden{background:#283329;font-size:22px;width:62px;min-height:85px}.playing-card[disabled]{opacity:.6}.topcard{display:flex;align-items:center;justify-content:center;gap:20px;margin:16px}.topcard p{max-width:180px}.timer{font-variant-numeric:tabular-nums;font-size:13px;color:var(--lime)}.help{font-size:13px;color:var(--muted)}.facts{border-left:2px solid #687b43;padding-left:12px;font-size:13px}.facts p{margin:8px 0}.tutorial{padding:22px;background:#29352a;border:1px solid #6b7b4b;border-radius:20px}.tutorial .step{color:var(--lime);font-size:12px;margin-bottom:12px}.tutorial .options{display:grid;gap:8px}.tutorial ol{padding-left:20px;line-height:1.6;color:#d2d4c4}.pending{padding:12px;border-radius:12px;border:1px dashed var(--line);margin:9px 0;font-size:13px;color:var(--muted)}footer{text-align:center;color:#7b8677;font-size:11px;margin:32px 0 0}#toast{display:none;position:fixed;bottom:24px;left:50%;transform:translateX(-50%);max-width:calc(100% - 32px);background:#f2edda;color:#172219;padding:13px 20px;border-radius:16px;z-index:20;box-shadow:0 12px 40px #0006;font-size:14px}#notice:not(:empty){border:1px solid #777347;background:#3a3928;border-radius:12px;padding:10px;margin-bottom:14px;font-size:12px}.score{display:grid;grid-template-columns:1fr 1fr;gap:8px}.stat{padding:14px;background:var(--panel);border:1px solid var(--line);border-radius:14px;font-size:13px}.stat b{font-size:24px;display:block;color:var(--lime)}@media(max-width:360px){h1{font-size:29px}.grid{gap:8px}.grid .card{padding:13px}.hero .token{width:110px;height:110px}.hero{padding:16px}}@media(prefers-reduced-motion:no-preference){.cell .token{animation:appear .15s ease-out}@keyframes appear{from{transform:scale(.85)}to{transform:scale(1)}}
.playing-card.hidden{font-size:12px;line-height:1.2;text-align:center;padding:6px;overflow-wrap:anywhere}.playing-card.hidden small{font-size:9px}.seat .hand{flex-shrink:0;gap:6px}.topcard .playing-card{opacity:1;cursor:default}
.playing-card.hidden{width:72px;font-size:11px;overflow-wrap:normal}
textarea{display:block;width:100%;font:inherit;color:inherit;background:#172119;border:1px solid var(--line);border-radius:12px;padding:12px;margin:8px 0 12px;resize:vertical}