:root{
  --bg:#0b0f14;
  --panel:#111826;
  --text:#e9f1fb;
  --muted:#92a4bb;
  --border:rgba(255,255,255,.12);
  --accent:#60a5fa;
  --accent2:#5eead4;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text);
  background:
    radial-gradient(900px 550px at 15% -10%, rgba(96,165,250,.20), transparent 60%),
    radial-gradient(900px 550px at 90% 10%, rgba(94,234,212,.16), transparent 55%),
    linear-gradient(180deg, #070a0f 0%, var(--bg) 50%, #070a0f 100%);
}
.wrap{max-width:1100px;margin:0 auto;padding:18px}
.top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:14px;height:14px;border-radius:6px;background:conic-gradient(from 200deg, var(--accent2), var(--accent), var(--accent2))}
.title{font-weight:900;font-size:1.2rem}
.sub{color:var(--muted);font-weight:650;font-size:.9rem}
.btns{display:flex;gap:10px;flex-wrap:wrap}
.btn{
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  font-weight:800;
  cursor:pointer;
}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:hover:not(:disabled){background:rgba(255,255,255,.10)}

.grid{display:grid;grid-template-columns: 1fr 320px;gap:14px}
.game{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}

.boardWrap{width: min(360px, 100%);}
#board{
  width:100%;
  height:auto;
  aspect-ratio: 1 / 2;
  border:1px solid var(--border);
  border-radius:16px;
  background:rgba(17,24,38,.55);
  touch-action: none; /* important for swipe */
}

.hint{border:1px solid var(--border);background:rgba(17,24,38,.45);border-radius:16px;padding:12px;color:var(--muted);min-width:220px;flex:1}
.sep{height:10px}

.panel{display:grid;gap:12px}
.card{border:1px solid var(--border);background:rgba(17,24,38,.45);border-radius:16px;padding:14px}
.k{color:var(--accent2);font-weight:900;letter-spacing:.14em;text-transform:uppercase;font-size:.75rem}
.big{font-size:2rem;font-weight:950;margin-top:6px}
.row{display:flex;justify-content:space-between;gap:10px;margin-top:10px}
.num{font-size:1.25rem;font-weight:900;margin-top:6px}
.muted{color:var(--muted)}
#next,#hold{display:block;margin-top:10px;border:1px solid var(--border);border-radius:12px;background:rgba(0,0,0,.25)}

.touchBar{
  width:100%;
  display:none;
  gap:10px;
  flex-wrap:wrap;
  border:1px solid var(--border);
  background:rgba(17,24,38,.45);
  border-radius:16px;
  padding:12px;
}
.tbtn{
  flex:1 1 90px;
  min-width: 80px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  color:var(--text);
  padding:14px 12px;
  border-radius:14px;
  font-weight:950;
  font-size:1.05rem;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}
.tbtn:active{transform: translateY(1px); background:rgba(255,255,255,.10)}

.foot{margin-top:14px}

@media (max-width: 980px){
  .grid{grid-template-columns:1fr}
  .top{flex-wrap:wrap}
}

@media (max-width: 760px){
  .touchBar{display:flex}
  .hint{min-width:auto}
}