:root{--bg:#0f172a;--fg:#e2e8f0;--muted:#94a3b8;--accent:#22d3ee;--card:#111827;--gray:#475569;--hit:#A076F9;--present:#EDE4FF;--hitText:#0d0620;--presentText:#1d1730;--kbw: min(580px, calc(100vw - 20px));--title-size:22px;--tile:42px;--gap:6px;--mini:14px;--keyw:38px}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}
.container{max-width:960px;margin:24px auto;padding:0 16px}
.container.room{max-width:var(--kbw)}
h1,h2,h3{margin:8px 0 16px}
h2{font-size:var(--title-size)}
.card{background:var(--card);padding:16px;border-radius:8px;margin-bottom:12px}
.row{display:flex;gap:16px;align-items:center}
input{padding:10px;border-radius:6px;border:1px solid var(--gray);background:#0b1220;color:var(--fg)}
button{padding:10px 14px;border-radius:6px;border:0;background:var(--accent);color:#002233;font-weight:600;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.status{margin-top:8px;color:var(--muted)}
.muted{color:var(--muted)}

.topbar{position:fixed;top:12px;left:12px;z-index:50}
.back-btn{display:inline-block;padding:8px 12px;border-radius:8px;background:#1f2937;border:1px solid #2b3648;color:var(--fg);text-decoration:none;font-weight:600}

.room{display:flex;flex-direction:column;gap:12px;align-items:center}
.play-row{display:grid;grid-template-columns:auto auto;gap:16px;align-items:start;justify-content:center;width:100%;max-width:var(--kbw)}
.board-col{display:flex;flex-direction:column;align-items:center}
.right{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.opp-col{display:flex;flex-direction:column;gap:8px;align-items:center}
.share{display:flex;justify-content:space-between;align-items:center;background:var(--card);padding:12px;border-radius:8px;margin-bottom:12px;width:100%;max-width:var(--kbw)}
.share-actions{display:flex;gap:8px}
.icon-btn{width:40px;height:40px;border-radius:8px;background:#1f2937;border:1px solid #2b3648;display:flex;align-items:center;justify-content:center}
.icon-btn svg{width:20px;height:20px;fill:var(--fg)}
.opp-header{font-weight:800;margin:8px 0 3px;text-align:center;font-size:var(--title-size)}
.board{display:grid;grid-template-rows:auto;gap:var(--gap);margin-bottom:12px}
.row-tiles{display:grid;grid-template-columns:repeat(5,var(--tile));gap:var(--gap)}
.row-tiles{perspective:600px}
.board{justify-content:center}
.tile{width:var(--tile);height:var(--tile);border-radius:6px;background:#0b1220;border:1px solid var(--gray);display:flex;align-items:center;justify-content:center;font-weight:800;transition:background-color .18s ease,border-color .18s ease,transform .18s ease}
.tile.pending{border-color:#64748b}
.tile.flip{transform:rotateX(-90deg)}
.tile.green{background:var(--hit);color:var(--hitText);border-color:transparent}
.tile.yellow{background:var(--present);color:var(--presentText);border-color:transparent}
.tile.gray{background:var(--gray);color:#111}
.presence{margin:8px 0}
.opp-list{list-style:none;padding:0;margin:0}
.opp-list li{padding:6px 8px;background:var(--card);border-radius:6px;margin-bottom:6px}

/* Opponent mini tiles */
.mini-row{display:grid;grid-template-columns:repeat(5,var(--mini));gap:4px;align-items:center}
.mini{width:var(--mini);height:var(--mini);border-radius:3px;background:#0b1220;border:1px solid #2b3648}
.mini.green{background:var(--hit);border-color:transparent}
.mini.yellow{background:var(--present);border-color:transparent}
.mini.gray{background:var(--gray)}

.join-panel{margin-bottom:12px}
.join-panel .row input{flex:1}
.join-panel{position:relative;z-index:2}

.keyboard{max-width:var(--kbw);width:100%;margin:12px auto;display:flex;flex-direction:column;gap:8px;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.kb-row{display:flex;justify-content:center;gap:6px}
.key{width:var(--keyw);height:calc(var(--keyw) * 1.27);border-radius:6px;background:#1f2937;border:1px solid #2b3648;color:var(--fg);display:flex;align-items:center;justify-content:center;font-weight:800;cursor:pointer;user-select:none;transition:background-color .15s ease,color .15s ease,border-color .15s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.key.wide{min-width:72px}
.key.green{background:var(--hit);color:var(--hitText);border-color:transparent}
.key.yellow{background:var(--present);color:var(--presentText);border-color:transparent}
.key.gray{background:var(--gray);color:#111}

@media (max-width: 480px){
  :root{--title-size:22px;--tile:42px;--gap:6px;--mini:12px;--keyw:40px}
}

@media (max-width: 360px){
  :root{--title-size:20px;--tile:36px;--gap:4px;--mini:10px;--keyw:36px}
}

/* Landing */
.landing{display:flex;flex-direction:column;align-items:center;text-align:center}
.brand{font-size:28px;font-weight:800;letter-spacing:.5px;margin:8px 0 16px}
.actions{display:flex;flex-direction:column;gap:12px;align-items:center;width:100%;max-width:420px}
.actions .row{width:100%;justify-content:center}
.actions input, .actions select, .actions button{width:100%}

/* Toasts */
.toasts{position:fixed;left:50%;top:max(12px, env(safe-area-inset-top));transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:1000;max-width:calc(100vw - 24px)}
.toast{background:var(--card);color:var(--fg);border:1px solid #2b3648;border-radius:8px;padding:10px 14px;box-shadow:0 6px 20px rgba(0,0,0,.35);font-weight:600;letter-spacing:.2px;text-align:center}
.toast.error{border-color:#7f1d1d}
.toast.success{border-color:#065f46}

/* Shake animation for invalid word */
@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
.shake{animation:shake .45s ease both}

/* Key press feel */
.key:active{transform:scale(.97)}