:root{--bg:#0f172a;--felt:#14532d;--panel:#1e293b;--fg:#f1f5f9;--accent:#38bdf8;--ok:#16a34a;--bad:#dc2626;--cw:92px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--fg);overscroll-behavior:none;font-family:system-ui,-apple-system,sans-serif}.app{max-width:480px;height:100%;padding:max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));flex-direction:column;gap:10px;margin:0 auto;display:flex}header{justify-content:space-between;align-items:center;display:flex}h1{margin:0;font-size:1.25rem}.gear{color:inherit;cursor:pointer;opacity:.8;background:0 0;border:0;margin-left:10px;padding:4px;font-size:1.3rem;line-height:1}.gear:hover{opacity:1}.score{font-variant-numeric:tabular-nums;opacity:.8;margin-left:auto;font-size:.85rem}.playing-card{width:var(--cw);aspect-ratio:5/7;font-size:calc(var(--cw) / 8);border-radius:8px;position:relative;overflow:hidden;box-shadow:0 1px 3px #00000080}.playing-card.back{background:repeating-linear-gradient(45deg,#1d4ed8 0 6px,#1e3a8a 6px 12px);border:4px solid #f8fafc}.playing-card.face{color:var(--tint);background:#f8fafc;border:1px solid #cbd5e1}.corner{font-size:1.2em;font-weight:700;line-height:1;position:absolute}.corner.tl{top:5px;left:6px}.corner.br{bottom:5px;right:6px;transform:rotate(180deg)}.center{text-align:center;place-content:center;padding:0 6px;display:grid;position:absolute;inset:0}.title{font-size:1.4em;font-weight:700}.subtitle{opacity:.8;font-size:1em}.table{--reserve:0px;--cw:clamp(120px, calc((100cqh - var(--reserve) - 36px) / 2.8), 300px);background:var(--felt);border-radius:20px;flex-direction:column;flex:1;justify-content:center;gap:14px;min-height:0;padding:12px 8px;display:flex;container-type:size}.table.done{--reserve:44px}.row{justify-content:center;display:flex}.slot{width:var(--cw);aspect-ratio:5/7;border-radius:8px;place-items:center;display:grid}.slot.placeholder{opacity:.8;text-align:center;border:2px dashed #fff6;font-size:.8rem}.slot.win .playing-card{outline:3px solid var(--ok)}.slot.lose .playing-card{outline:3px solid var(--bad)}.slot.draw .playing-card{outline:3px solid #eab308}.flip{animation:.35s ease-out flip}@keyframes flip{0%{opacity:0;transform:rotateY(90deg)scale(.9)}}.banner{text-align:center;justify-content:center;align-items:center;gap:12px;min-height:44px;font-weight:600;display:flex}.banner.win{color:#86efac}.banner.lose{color:#fca5a5}.banner.draw{color:#fde047}button.primary{background:var(--accent);color:#0f172a;font:inherit;border:0;border-radius:10px;padding:10px 20px;font-weight:700}.hand{background:var(--panel);border-radius:20px;flex:none;justify-content:space-around;padding:12px 8px;display:flex}.tile{background:0 0;border:0;padding:0;transition:transform .15s,opacity .2s}.tile:enabled:hover,.tile:enabled:active{transform:translateY(-6px)}.tile.played{visibility:hidden}.tile.passed{opacity:.35}.tile:disabled{cursor:default}.over{text-align:center;flex:1;place-content:center;gap:8px;display:grid}.menu{flex-direction:column;flex:1;justify-content:center;gap:16px;display:flex}fieldset{background:var(--panel);border:0;border-radius:16px;gap:10px;margin:0;padding:12px 16px;display:grid}legend{float:left;padding:0;font-weight:700}legend+*{clear:both}.option{align-items:center;gap:10px;display:flex}.option small{opacity:.65;display:block}.army{border:0;border-top:4px solid var(--tint);flex-direction:column;display:flex}.army .art{background:#0f172a;flex:1;min-height:0;position:relative}.army .art img,.army .art svg{object-fit:cover;width:100%;height:100%;display:block;position:absolute;inset:0}.era{background:var(--tint);color:#fff;text-align:center;border-radius:999px;min-width:1.8em;padding:.15em .4em;font-size:1em;font-weight:700;position:absolute;top:4px;left:4px}.army .blurb{font-size:calc(var(--cw) / 19);color:#334155;text-align:left;margin:.4em 0 0;line-height:1.3}.army .caption{text-align:center;flex:none;padding:.5em .5em .6em;line-height:1.15}.army .title{font-size:1em}.slot .army .title{font-size:.62em}.slot .army .subtitle{font-size:.6em}.army .subtitle{color:#475569;font-size:.85em}.link{color:var(--accent);font:inherit;cursor:pointer;background:0 0;border:0;padding:6px}.credits{flex:1;align-content:start;gap:8px;min-height:0;margin:0;padding:0;list-style:none;display:grid;overflow-y:auto}.credits li{background:var(--panel);border-radius:12px;gap:2px;padding:10px 14px;font-size:.85rem;display:grid}.credits a{color:var(--accent)}.credits small{opacity:.65}.terrain{border-radius:12px;flex:none;height:52px;animation:.4s ease-out terrain-in;position:relative;overflow:hidden}@keyframes terrain-in{0%{opacity:0;transform:translateY(-6px)}}.terrain svg{width:100%;height:100%;display:block;position:absolute;inset:0}.terrain-text{color:#fff;text-shadow:0 1px 3px #000c;background:linear-gradient(90deg,#0000008c,#0000001a 85%);flex-direction:column;justify-content:center;padding:6px 12px;display:flex;position:absolute;inset:0}.terrain-text strong{font-size:.95rem}.terrain-text span{font-size:.72rem;line-height:1.25}.mod{color:#fff;text-align:center;border-radius:999px;min-width:1.8em;padding:.15em .4em;font-size:1em;font-weight:700;position:absolute;top:4px;right:4px}.mod.up{background:var(--ok)}.mod.down{background:var(--bad)}.table{transition:background-color .4s}.online button,.online input{font:inherit;background:var(--bg);color:var(--fg);border:1px solid #ffffff40;border-radius:10px;padding:10px 14px}.online button:disabled{opacity:.45}.online form{gap:8px;margin-top:10px;display:flex}.online input{text-transform:uppercase;letter-spacing:.15em;flex:1;min-width:0}.lobby{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:16px;display:flex}.lobby .code{letter-spacing:.3em;padding-left:.3em;font-size:2.4rem;font-weight:700}.lobby .waiting{opacity:.8}.lobby .note{opacity:.6;max-width:26em;font-size:.8rem}