:root{
  --wood-1:#d9a564;
  --wood-2:#b8823c;
  --wood-3:#8a5a22;
  --line:#3a2511;
  --bg:#1d1410;
  --panel:#241814;
  --text:#f3e7d3;
  --accent:#e3b266;
  --shadow: 0 10px 30px rgba(0,0,0,0.5);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;-webkit-tap-highlight-color:transparent;}
body{min-height:100vh;background:radial-gradient(circle at 20% 10%,#2a1d15,#0c0805 80%);}
header{padding:1rem 1.5rem;border-bottom:1px solid #3a2a1c;background:linear-gradient(180deg,#2b1d14,#1d1410);box-shadow:var(--shadow);}
header h1{margin:0;font-weight:600;font-size:1.4rem;letter-spacing:.04em;color:var(--accent);}
main{display:flex;flex-direction:column;gap:1rem;padding:1rem;max-width:1200px;margin:0 auto;}
section{background:var(--panel);border-radius:14px;padding:1.25rem;box-shadow:var(--shadow);border:1px solid #38271c;}
h2{margin:0 0 .5rem;font-size:1.1rem;color:var(--accent);}
h3{margin:0 0 .5rem;font-size:1rem;color:var(--accent);}
.hint{margin:.25rem 0 1rem;color:#c7b69a;font-size:.9rem;}
.opts{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:.8rem;}
.opt,button{appearance:none;border:1px solid #5a3e22;background:linear-gradient(180deg,var(--wood-1),var(--wood-2));color:#2a1a08;font-weight:600;padding:.7rem 1.1rem;border-radius:10px;cursor:pointer;font-size:.95rem;box-shadow:0 4px 12px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.3);transition:transform .08s, box-shadow .15s;min-height:44px;}
.opt:hover,button:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.35);}
.opt:active,button:active{transform:translateY(1px);}
.size-label{display:inline-flex;align-items:center;gap:.6rem;color:#d9c4a0;}
select{padding:.5rem .6rem;border-radius:8px;border:1px solid #5a3e22;background:#2c1f15;color:var(--text);}
#board-wrap{display:grid;grid-template-columns:1fr 260px;gap:1rem;align-items:start;}
#board-container{display:flex;justify-content:center;align-items:center;background:radial-gradient(circle at 40% 30%, var(--wood-1), var(--wood-2) 50%, var(--wood-3) 100%);padding:14px;border-radius:14px;box-shadow:inset 0 0 60px rgba(60,30,10,0.45), 0 10px 40px rgba(0,0,0,0.6);background-color:var(--wood-2);background-blend-mode:overlay;}
canvas#board{display:block;width:100%;height:auto;max-width:760px;aspect-ratio:1/1;touch-action:none;border-radius:6px;box-shadow:0 6px 20px rgba(0,0,0,0.5);}
#sidebar{display:flex;flex-direction:column;gap:.8rem;}
.actions{display:flex;flex-direction:column;gap:.5rem;}
#status{min-height:1.5rem;color:#e8d4a8;font-size:.9rem;}
#lobby-list{list-style:none;padding:0;margin:0 0 1rem;display:flex;flex-direction:column;gap:.4rem;}
#lobby-list li{padding:.6rem .8rem;border:1px solid #4a3525;border-radius:8px;background:#2c1f15;display:flex;justify-content:space-between;align-items:center;}
#lobby-list li button{padding:.4rem .8rem;font-size:.85rem;min-height:36px;}
.mobile-only{display:none;}
@media (max-width: 780px){
  #board-wrap{grid-template-columns:1fr;}
  #sidebar{flex-direction:row;flex-wrap:wrap;}
  .actions{flex-direction:row;flex-wrap:wrap;}
  .mobile-only{display:block;}
  header h1{font-size:1.15rem;}
  main{padding:.6rem;gap:.6rem;}
  section{padding:.9rem;}
  .opt{flex:1 1 45%;}
}
@media (max-width: 420px){
  .opt{flex:1 1 100%;}
  canvas#board{max-width:100vw;}
}
@media (prefers-reduced-motion: reduce){
  .opt,button{transition:none;}
}