:root{--bg: #1d2f24;--panel: #24402f;--panel-light: #2f523c;--board-bg: #16241b;--cell-empty: #2c4636;--cell-tw: #c65b4e;--cell-dw: #cf8b6f;--cell-center: #cf8b6f;--cell-tl: #3f7fae;--cell-dl: #6fa8c9;--tile-bg: #f2e2b6;--tile-border: #8a6d3a;--tile-text: #2a2013;--text: #eef3ea;--text-dim: #a9beb0;--accent: #e0b84b;--danger: #c65b4e;--radius: 10px}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}#root{display:flex;flex-direction:column;max-width:560px;margin:0 auto;min-height:100%}button{font:inherit;cursor:pointer;border:none;border-radius:var(--radius);padding:.7em 1.1em;background:var(--panel-light);color:var(--text)}button:disabled{opacity:.4;cursor:not-allowed}button.primary{background:var(--accent);color:#2a2013;font-weight:600}button.danger{background:var(--danger);color:#fff}input[type=text],input[type=password]{font:inherit;padding:.7em .9em;border-radius:var(--radius);border:1px solid var(--panel-light);background:var(--panel);color:var(--text);width:100%}.screen{flex:1;display:flex;flex-direction:column;padding:1rem;gap:1rem}.centered{justify-content:center;align-items:center;text-align:center}.card{background:var(--panel);border-radius:var(--radius);padding:1.25rem;display:flex;flex-direction:column;gap:.9rem}h1{font-size:1.5rem;margin:0}h2{font-size:1.15rem;margin:0}.error-box{background:#c65b4e33;border:1px solid var(--danger);border-radius:var(--radius);padding:.6rem .9rem;font-size:.9rem}.player-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}.player-row{display:flex;align-items:center;justify-content:space-between;background:var(--panel-light);padding:.6rem .9rem;border-radius:var(--radius)}.player-row.current{outline:2px solid var(--accent)}.player-row .dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:.4rem}.dot.online{background:#6fbf73}.dot.offline{background:#888}.qr-box{display:flex;flex-direction:column;align-items:center;gap:.5rem;background:#fff;border-radius:var(--radius);padding:1rem}.qr-box svg{width:160px;height:160px}.qr-url{color:#222;font-size:.8rem;word-break:break-all;text-align:center}.game-screen{padding:.5rem;gap:.5rem}.top-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.3rem .5rem;font-size:.85rem;color:var(--text-dim);padding:0 .25rem}.top-bar>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.link-button{background:none;border:none;padding:.3em .5em;color:var(--text-dim);font-size:.85rem;text-decoration:underline;flex-shrink:0;white-space:nowrap}.board-viewport{overflow:hidden;touch-action:none;border-radius:var(--radius);background:var(--board-bg)}.board-transform-wrapper{transform-origin:0 0;width:100%}.board-grid{display:grid;grid-template-columns:repeat(15,1fr);grid-template-rows:repeat(15,1fr);aspect-ratio:1;width:100%;gap:1px;background:var(--board-bg);padding:3px}.cell{position:relative;display:flex;align-items:center;justify-content:center;background:var(--cell-empty);font-size:.5rem;color:#ffffff8c;border-radius:2px}.cell.tw{background:var(--cell-tw)}.cell.dw{background:var(--cell-dw)}.cell.center{background:var(--cell-center)}.cell.tl{background:var(--cell-tl)}.cell.dl{background:var(--cell-dl)}.cell .star{font-size:.9rem;color:#fffc}.tile{position:absolute;top:5%;right:5%;bottom:5%;left:5%;background:var(--tile-bg);border:1px solid var(--tile-border);border-radius:3px;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--tile-text);box-shadow:0 1px 2px #0006}.tile .value{position:absolute;bottom:1px;right:2px;font-size:.45em;font-weight:500}.tile.pending{outline:2px solid var(--accent)}.tile.last-move{outline:2px solid #6fbf9c}.rack-area{display:flex;flex-direction:column;gap:.5rem}.rack{display:flex;gap:.4rem;justify-content:center;background:var(--panel);border-radius:var(--radius);padding:.5rem;min-height:3.4rem}.rack-tile{width:2.4rem;height:2.4rem;flex-shrink:0;background:var(--tile-bg);border:1px solid var(--tile-border);border-radius:5px;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--tile-text);position:relative;touch-action:none;-webkit-user-select:none;user-select:none;transition:transform .12s ease}.rack-tile.selected{transform:translateY(-6px);box-shadow:0 4px 8px #0006}.rack-tile.exchange-selected{outline:2px solid var(--danger)}.rack-tile.dragging{z-index:5;transition:none;box-shadow:0 6px 14px #00000080}.rack-tile .value{position:absolute;bottom:1px;right:3px;font-size:.5rem;font-weight:500}.score-preview{align-self:center;background:var(--panel-light);color:var(--accent);font-weight:700;padding:.3em .9em;border-radius:var(--radius);font-size:.9rem}.action-bar{display:flex;gap:.5rem;flex-wrap:wrap}.action-bar button{flex:1 1 28%;min-width:0;font-size:.82rem;padding:.6em .3em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:20;padding:1rem}.blank-picker{background:var(--panel);border-radius:var(--radius);padding:1rem;display:grid;grid-template-columns:repeat(6,1fr);gap:.4rem;max-width:360px}.blank-picker button{aspect-ratio:1;padding:0}.history-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3rem;max-height:30vh;overflow-y:auto;font-size:.85rem;color:var(--text-dim)}.final-scores{display:flex;flex-direction:column;gap:.5rem}.final-scores li{display:flex;justify-content:space-between;padding:.6rem .9rem;background:var(--panel-light);border-radius:var(--radius);list-style:none}.final-scores li.winner{outline:2px solid var(--accent)}
