/* Aatalu — Traditional Indian Board Games : design system */
:root{
  --bg:#FAF3E6; --bg2:#F3E8D2; --card:#FFFFFF; --ink:#2E2013; --muted:#8A7A63;
  --maroon:#93321E; --maroon-d:#71230F; --gold:#D9930D; --gold-l:#E8C15A;
  --teal:#1F6E63; --indigo:#4A4E9E; --line:#E7D9BE;
  --shadow:0 6px 18px rgba(60,35,10,.13); --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{height:100%}
body{
  font-family:ui-sans-serif,system-ui,'Segoe UI',Roboto,Arial,sans-serif;
  background:radial-gradient(1100px 520px at 50% -120px,#FFF8EA,var(--bg));
  color:var(--ink); min-height:100%;
}
h1,h2,h3,.serif{font-family:Georgia,'Times New Roman',serif;letter-spacing:.2px}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:inherit;text-decoration:none}

/* top bar */
.topbar{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;
  padding:10px 14px;background:linear-gradient(180deg,var(--maroon),var(--maroon-d));
  color:#FFF6E4;box-shadow:0 3px 12px rgba(60,10,0,.25);
  padding-top:calc(10px + env(safe-area-inset-top));
}
.topbar h1{font-size:19px;font-weight:700;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .sub{font-size:11.5px;opacity:.75;font-family:ui-sans-serif,system-ui,sans-serif}
.tb-right{display:flex;gap:6px}
.iconbtn{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:rgba(255,246,228,.13);color:#FFF6E4;font-size:18px;line-height:1;
  border:1px solid rgba(255,246,228,.16);transition:background .15s;flex:none;
}
.iconbtn:active{background:rgba(255,246,228,.3)}

/* hub */
.wrap{max-width:760px;margin:0 auto;padding:18px 14px 60px}
.hero{padding:18px 4px 6px}
.hero h2{font-size:26px;color:var(--maroon-d)}
.hero p{color:var(--muted);margin-top:4px;font-size:14.5px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-top:18px}
.gcard{
  background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);
  padding:14px;display:flex;gap:12px;align-items:center;border:1px solid #F0E4CC;
  transition:transform .12s ease, box-shadow .12s ease;
}
.gcard:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(60,35,10,.18)}
.gcard .tile{
  width:58px;height:58px;border-radius:14px;display:grid;place-items:center;
  font-size:30px;flex:none;box-shadow:inset 0 -3px 0 rgba(0,0,0,.14);
}
.gcard .meta{min-width:0}
.gcard .meta b{display:block;font-size:16px;font-family:Georgia,serif}
.gcard .meta span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.gcard .meta .st{font-size:11.5px;color:var(--gold-d,#96650A);margin-top:4px;color:#96650A}
.foot{margin-top:26px;text-align:center;color:var(--muted);font-size:12.5px;line-height:1.7}

/* game page */
.game-main{
  max-width:600px;margin:0 auto;padding:10px 8px 24px;
  min-height:calc(100vh - 62px);min-height:calc(100dvh - 62px);
  display:flex;flex-direction:column;justify-content:center;
}
.status{
  display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;
  font-size:15px;font-weight:600;text-align:center;padding:6px 10px;color:var(--maroon-d);
}
.status .dot{width:14px;height:14px;border-radius:50%;flex:none;box-shadow:inset 0 -2px 2px rgba(0,0,0,.25)}
.board-wrap{display:flex;justify-content:center}
.board-wrap canvas{
  max-width:100%;height:auto;border-radius:16px;box-shadow:var(--shadow);
  touch-action:none;user-select:none;
}
.subctl{display:flex;justify-content:center;gap:10px;margin-top:12px;flex-wrap:wrap}

/* buttons */
.btn{
  padding:11px 20px;border-radius:12px;font-weight:700;font-size:15px;
  transition:transform .1s, filter .15s;border:1px solid transparent;
}
.btn:active{transform:scale(.97)}
.btn.primary{background:linear-gradient(180deg,#A63A22,var(--maroon-d));color:#FFF6E4;box-shadow:0 3px 10px rgba(113,35,15,.35)}
.btn.gold{background:linear-gradient(180deg,#E8AC28,#C07F08);color:#3A2600;box-shadow:0 3px 10px rgba(150,101,10,.3)}
.btn.ghost{background:#FFF;border-color:var(--line);color:var(--maroon-d)}

/* segmented control */
.seg{display:inline-flex;background:var(--bg2);border-radius:12px;padding:4px;gap:4px;flex-wrap:wrap}
.seg button{
  padding:8px 16px;border-radius:9px;font-weight:700;font-size:14px;color:var(--muted);
}
.seg button.on{background:#FFF;color:var(--maroon-d);box-shadow:0 2px 6px rgba(60,35,10,.15)}
.field{margin:14px 0}
.field label{display:block;font-size:12.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:7px}

/* text inputs */
.field input[type=text]{
  width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:11px;
  font:inherit;background:#FFF;color:var(--ink);outline:none;
}
.field input[type=text]:focus{border-color:var(--gold)}
.field input.code{text-transform:uppercase;letter-spacing:4px;font-weight:800;text-align:center;font-size:18px}
.roomcode{
  text-align:center;font-family:Georgia,serif;font-weight:700;font-size:38px;
  letter-spacing:8px;color:var(--maroon-d);background:var(--bg2);border-radius:14px;
  padding:14px 6px;margin:10px 0;
}
.lobby-list{list-style:none;margin:10px 0}
.lobby-list li{
  padding:9px 12px;border:1px solid var(--line);border-radius:10px;margin:6px 0;
  font-weight:600;display:flex;align-items:center;gap:8px;
}
.lobby-list li.empty{color:var(--muted);font-weight:400;border-style:dashed}

/* modal */
.ak-overlay{
  position:fixed;inset:0;background:rgba(46,32,19,.55);z-index:100;
  display:flex;align-items:center;justify-content:center;padding:18px;
  animation:akfade .18s ease;backdrop-filter:blur(2px);
}
@keyframes akfade{from{opacity:0}to{opacity:1}}
.ak-modal{
  background:var(--card);border-radius:18px;max-width:440px;width:100%;
  padding:22px;box-shadow:0 20px 60px rgba(40,20,5,.4);
  animation:akpop .2s ease;max-height:86vh;overflow:auto;
}
@keyframes akpop{from{transform:scale(.94);opacity:.4}to{transform:scale(1);opacity:1}}
.ak-modal h2{color:var(--maroon-d);font-size:21px;margin-bottom:8px}
.ak-modal-body{font-size:14.5px;line-height:1.65;color:#4A3B28}
.ak-modal-body ul{padding-left:20px;margin:8px 0}
.ak-modal-body li{margin:5px 0}
.ak-modal-body .hl{color:var(--maroon);font-weight:700}
.ak-modal-btns{display:flex;gap:10px;margin-top:18px;justify-content:flex-end;flex-wrap:wrap}

/* toast */
.ak-toast{
  position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(20px);
  background:#2E2013;color:#FFF6E4;padding:11px 20px;border-radius:999px;
  font-size:14px;font-weight:600;opacity:0;transition:all .25s ease;z-index:200;
  box-shadow:0 8px 24px rgba(0,0,0,.35);max-width:88vw;text-align:center;
}
.ak-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.ak-confetti{position:fixed;inset:0;z-index:150;pointer-events:none}

/* tambola */
.tb-wrap{width:100%;max-width:560px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:13px;padding:4px}
.tb-nick{color:var(--muted);font-size:15px;min-height:22px;text-align:center;font-style:italic}
.tb-recent{display:flex;gap:8px;align-items:center}
.tb-recent span{width:40px;height:40px;border-radius:50%;background:var(--bg2);display:grid;place-items:center;font-weight:800;color:#8A7A63;font-size:15px}
.tb-recent span:first-child{background:var(--gold);color:#3A2600}
.tb-board{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;width:100%}
.tb-board b{aspect-ratio:1;display:grid;place-items:center;border-radius:7px;background:#FFF;border:1px solid var(--line);font-size:12.5px;color:#C9B995;font-weight:700}
.tb-board b.on{background:var(--maroon);color:#FFF6E4;border-color:var(--maroon-d)}
.ticket{width:100%;background:#FFF;border:2px solid var(--maroon);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.ticket-head{font-size:12px;font-weight:800;color:#FFF6E4;padding:5px 10px;background:linear-gradient(180deg,#A63A22,var(--maroon-d));display:flex;justify-content:space-between}
.ticket table{width:100%;border-collapse:collapse;table-layout:fixed}
.ticket td{border:1px solid #EAD9B8;height:40px;text-align:center;font-weight:800;font-size:16.5px;color:var(--ink);position:relative}
.ticket td.hit{color:#C9B995}
.ticket td.hit::after{content:'';position:absolute;inset:16%;border:2.5px solid var(--maroon);border-radius:50%;opacity:.8}
.tb-claims{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.claim-chip{padding:9px 14px;border-radius:999px;border:1.5px solid var(--line);background:#FFF;font-weight:700;font-size:13px;color:var(--muted)}
.claim-chip.ready{border-color:var(--gold);color:#8F6108;background:#FCF3DC;animation:tbpulse 1s infinite;cursor:pointer}
.claim-chip.won{background:var(--teal);color:#FFF;border-color:var(--teal)}
@keyframes tbpulse{50%{transform:scale(1.07)}}
.tb-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center}

/* bottom ad bar: zero height until an ad actually renders */
.ad-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;text-align:center;background:transparent}
.ad-bar .adsbygoogle{max-height:90px}

@media (max-width:480px){
  .topbar h1{font-size:17px}
  .grid{grid-template-columns:1fr 1fr;gap:10px}
  .gcard{flex-direction:column;text-align:center;padding:12px 8px}
  .gcard .meta b{font-size:14.5px}
  .gcard .meta span{font-size:11.5px}
}