@font-face { font-family: 'Fredoka'; src: url(../fonts/fredoka.woff2) format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Baloo 2'; src: url(../fonts/baloo2-deva.woff2) format('woff2'); font-weight: 400 800; font-display: swap; unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }

:root {
  --bg1: #3b3f7a; --bg2: #23264d; --bg3: #191b38;
  --panel: rgba(44, 48, 96, .72); --panel-b: rgba(160, 170, 255, .14);
  --text: #f4f5ff; --muted: #a9addc;
  --cyan: #38d6ff; --cyan2: #0fa3e6;
  --red: #ff4d5e; --green: #5fe06b; --yellow: #ffd23f; --blue: #3fb6ff;
  --av: clamp(64px, 19vw, 88px);
  --font: 'Fredoka', 'Baloo 2', system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font-family: var(--font); color: var(--text); font-weight: 500;
  background: radial-gradient(120% 70% at 15% 0%, #5a5fb5 0%, transparent 55%),
              radial-gradient(90% 60% at 100% 100%, #4a3c8f 0%, transparent 60%),
              linear-gradient(170deg, var(--bg1), var(--bg2) 55%, var(--bg3));
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
button { font-family: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
input { font-family: inherit; }
svg { width: 100%; height: 100%; display: block; }

#app { position: relative; height: 100%; max-width: 520px; margin: 0 auto; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.screen { position: absolute; inset: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); display: none; flex-direction: column; padding: 12px 14px 16px; overflow-y: auto; }
.screen.active { display: flex; animation: fadein .35s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.glass { background: var(--panel); border: 1px solid var(--panel-b); border-radius: 26px; box-shadow: 0 18px 40px rgba(8, 10, 40, .45), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.round-btn { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); display: grid; place-items: center; color: #dfe2ff; box-shadow: 0 6px 16px rgba(0,0,0,.25); flex: none; }
.round-btn svg { width: 22px; height: 22px; }
.round-btn:active, .big-btn:active, .pill-btn:active { transform: scale(.95); }
.pill-btn { padding: 10px 18px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); font-weight: 600; font-size: 15px; }
.pill-btn.wa { background: #25d366; color: #063; border-color: transparent; }

.bar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.bar h2 { flex: 1; text-align: center; margin: 0; font-size: 22px; font-weight: 700; }
.bar .sp { width: 44px; }

/* ---------- HOME ---------- */
#s-home { align-items: center; justify-content: center; gap: 6px; }
.home-top { position: absolute; top: 12px; left: 14px; right: 14px; display: flex; justify-content: space-between; }
.hero-avatars { display: flex; gap: 10px; margin-bottom: 6px; }
.ha { width: 62px; height: 62px; border-radius: 18px; border: 3px solid; object-fit: cover; animation: bob 3s ease-in-out infinite; }
.ha1 { border-color: var(--blue); box-shadow: 0 0 18px var(--blue); }
.ha2 { border-color: var(--red); box-shadow: 0 0 18px var(--red); animation-delay: .4s; }
.ha3 { border-color: var(--yellow); box-shadow: 0 0 18px var(--yellow); animation-delay: .8s; }
.ha4 { border-color: var(--green); box-shadow: 0 0 18px var(--green); animation-delay: 1.2s; }
@keyframes bob { 50% { transform: translateY(-6px) rotate(-2deg); } }
.logo { font-size: clamp(76px, 26vw, 120px); line-height: .9; margin: 8px 0 0; font-weight: 700; letter-spacing: 2px; color: #fff;
  text-shadow: 0 3px 0 #d9dcf7, 0 6px 0 #b9bde8, 0 10px 18px rgba(0,0,0,.45); }
.brand { margin: 4px 0 22px; color: var(--muted); font-size: 16px; text-align: center; }
.brand span { display: block; color: #dfe1ff; }
.menu-btns { display: flex; flex-direction: column; gap: 14px; width: min(340px, 100%); }
.big-btn { height: 58px; border-radius: 20px; font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 18px;
  color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.18); transition: transform .1s; }
.big-btn .ico { width: 26px; height: 26px; flex: none; }
.big-btn.cyan { background: linear-gradient(180deg, #5fe3ff, #12a6e8); box-shadow: 0 6px 0 #0b78ad, 0 12px 26px rgba(56, 214, 255, .4); }
.big-btn.violet { background: linear-gradient(180deg, #a08bff, #6b4fe0); box-shadow: 0 6px 0 #4a33a8, 0 12px 26px rgba(130, 100, 255, .35); }
.big-btn.green { background: linear-gradient(180deg, #7ff08a, #2fb84a); box-shadow: 0 6px 0 #1f8434, 0 12px 26px rgba(95, 224, 107, .35); }
.big-btn.wide { width: 100%; margin-top: 16px; }
.big-btn:disabled { filter: grayscale(.7) brightness(.7); }
.dots-deco { display: flex; gap: 10px; margin-top: 26px; }
.dots-deco i { width: 14px; height: 14px; border-radius: 50%; }
.dots-deco .b { background: var(--blue); box-shadow: 0 0 10px var(--blue); } .dots-deco .r { background: var(--red); box-shadow: 0 0 10px var(--red); }
.dots-deco .g { background: var(--green); box-shadow: 0 0 10px var(--green); } .dots-deco .y { background: var(--yellow); box-shadow: 0 0 10px var(--yellow); }

/* ---------- SETUP / ONLINE / LOBBY ---------- */
.card { padding: 18px; margin-bottom: 14px; }
.card.center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.lbl { display: block; color: var(--muted); font-size: 14px; margin-bottom: 8px; }
.seg { display: flex; background: rgba(0,0,0,.2); border-radius: 16px; padding: 4px; gap: 4px; margin-bottom: 14px; }
.seg button { flex: 1; height: 42px; border-radius: 12px; font-size: 20px; font-weight: 700; color: var(--muted); }
.seg button.on { background: linear-gradient(180deg, #5fe3ff, #12a6e8); color: #fff; }
.seat-list { display: flex; flex-direction: column; gap: 10px; }
.seat-row { display: flex; align-items: center; gap: 12px; background: rgba(0,0,0,.16); border-radius: 18px; padding: 8px; }
.seat-row .mini { width: 52px; height: 52px; border-radius: 15px; border: 3px solid; object-fit: cover; flex: none; }
.seat-row .nm { flex: 1; min-width: 0; font-size: 18px; font-weight: 600; background: transparent; border: 0; color: #fff; outline: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat-row input.nm { border-bottom: 1px dashed rgba(255,255,255,.2); padding: 4px 0; }
.seat-row .tag { font-size: 13px; padding: 5px 10px; border-radius: 99px; background: rgba(255,255,255,.1); color: var(--muted); flex: none; }
.seat-row .tag.cpu { background: rgba(56,214,255,.15); color: var(--cyan); }
.seat-row .dot { width: 10px; height: 10px; border-radius: 50%; background: #666; flex: none; }
.seat-row .dot.on { background: var(--green); box-shadow: 0 0 8px var(--green); }
.hint { color: var(--muted); font-size: 14px; margin: 10px 0 4px; }
.avatar-pick img { width: 108px; height: 108px; border-radius: 30px; border: 4px solid var(--cyan); box-shadow: 0 0 26px rgba(56,214,255,.6); object-fit: cover; }
.field { width: 100%; height: 52px; border-radius: 16px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.22); color: #fff; font-size: 20px; text-align: center; font-weight: 600; outline: none; margin-top: 10px; }
.field:focus { border-color: var(--cyan); }
.field.code { letter-spacing: 6px; text-transform: uppercase; margin: 0; }
.or { color: var(--muted); margin: 18px 0 10px; }
.join-row { display: flex; gap: 10px; width: 100%; }
.join-row .big-btn { height: 52px; flex: none; }
.err { color: #ff8a95; min-height: 20px; margin: 10px 0 0; font-size: 15px; }
.room-code { font-size: 44px; font-weight: 700; letter-spacing: 8px; margin: 6px 0 14px; color: #fff; text-shadow: 0 0 18px rgba(56,214,255,.6); }
.row2 { display: flex; gap: 10px; }

/* ---------- GAME ---------- */
#s-game { padding: 8px 10px 10px; overflow: hidden; }
.game-bar { margin-bottom: 4px; }
.clock { flex: 1; text-align: center; font-size: 20px; font-weight: 600; color: #cfd2ff; letter-spacing: 1px; }
.row-top, .row-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; position: relative; z-index: 3; }
.row-top { align-items: center; margin-bottom: -16px; }
.row-bottom { align-items: flex-start; margin-top: -16px; }
.turn-text { flex: 1; text-align: center; font-size: clamp(28px, 9vw, 44px); font-weight: 700; line-height: .95; color: #fff; letter-spacing: 1px;
  text-shadow: 0 2px 0 #cfd3f5, 0 4px 0 #9da2d6, 0 8px 16px rgba(0,0,0,.4); text-transform: uppercase; word-break: break-word; }
.turn-text.small { font-size: clamp(20px, 6.5vw, 30px); }
.turn-text .sub { display: block; font-size: 13px; letter-spacing: 0; text-shadow: none; color: var(--muted); font-weight: 500; margin-top: 6px; text-transform: none; }

.seat-slot { width: var(--av); flex: none; min-height: 1px; }
.seat { position: relative; width: var(--av); transition: transform .3s, opacity .3s; }
.seat .av { position: relative; width: var(--av); height: var(--av); border-radius: 26%; padding: 4px; background: var(--c); box-shadow: 0 0 14px color-mix(in srgb, var(--c) 70%, transparent); }
.seat .av img { width: 100%; height: 100%; border-radius: 22%; object-fit: cover; display: block; background: #2b2f60; }
.seat .av .ring { position: absolute; inset: -5px; border-radius: 30%; background: conic-gradient(#fff var(--p, 0%), transparent 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); opacity: 0; }
.seat .pill { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); max-width: calc(var(--av) + 30px); background: var(--c); color: #fff; font-weight: 700; font-size: 13px; padding: 3px 10px; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 4px 10px rgba(0,0,0,.35); text-shadow: 0 1px 0 rgba(0,0,0,.25); text-transform: uppercase; }
.seat[data-color=yellow] .pill { color: #4a3500; text-shadow: none; }
.seat .badge { position: absolute; top: -6px; right: -6px; min-width: 24px; height: 24px; border-radius: 12px; background: #fff; color: #23264d; font-weight: 700; font-size: 13px; display: none; place-items: center; padding: 0 6px; }
.seat.active { transform: scale(1.08); }
.seat.active .av { box-shadow: 0 0 26px var(--c), 0 0 46px color-mix(in srgb, var(--c) 55%, transparent); animation: pulse-av 1.2s ease-in-out infinite; }
.timed .seat.active .av .ring { opacity: .95; }
.seat.dim { opacity: .45; filter: grayscale(.4); }
.seat.offline .av img { filter: grayscale(1) brightness(.6); }
.seat.done .badge { display: grid; }
@keyframes pulse-av { 50% { box-shadow: 0 0 14px var(--c), 0 0 30px color-mix(in srgb, var(--c) 40%, transparent); } }
.row-bottom .seat .pill { bottom: auto; top: calc(var(--av) - 12px); }

.gsp { flex: 1 1 0; min-height: 0; }
.board-wrap { flex: none; display: grid; place-items: center; position: relative; z-index: 1; }
.board { position: relative; width: var(--bs, 340px); height: var(--bs, 340px); border-radius: 22px; box-shadow: 0 22px 50px rgba(8,10,40,.55), 0 0 0 1px rgba(160,170,255,.12); }
.board-svg { position: absolute; inset: 0; border-radius: 22px; }
.tok { position: absolute; width: calc(var(--bs) / 15.6 * .74); height: calc(var(--bs) / 15.6 * .74); margin: calc(var(--bs) / 15.6 * -.37) 0 0 calc(var(--bs) / 15.6 * -.37); border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff 0 9%, color-mix(in srgb, var(--c) 55%, #fff) 16%, var(--c) 42%, var(--cd) 100%);
  box-shadow: 0 0 12px color-mix(in srgb, var(--c) 80%, transparent), 0 3px 4px rgba(0,0,0,.45), inset 0 -3px 5px rgba(0,0,0,.25);
  transition: left .15s ease-in-out, top .15s ease-in-out, transform .15s; z-index: 5; }
.tok::after { content: ''; position: absolute; inset: 24%; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); }
.tok.hop { transform: scale(1.3) translateY(-12%); z-index: 9; }
.tok.slide { transition: left .45s cubic-bezier(.5,-.2,.4,1.2), top .45s cubic-bezier(.5,-.2,.4,1.2); }
.tok.can { cursor: pointer; z-index: 8; animation: can 0.8s ease-in-out infinite; }
.tok.can::before { content: ''; position: absolute; inset: -30%; border-radius: 50%; border: 3px solid #fff; animation: ring 0.8s ease-out infinite; }
@keyframes can { 50% { transform: translateY(-14%) scale(1.08); } }
@keyframes ring { from { opacity: .9; transform: scale(.7); } to { opacity: 0; transform: scale(1.25); } }
.tok.home { transform: scale(.55); }
.burst { position: absolute; width: 10px; height: 10px; margin: -5px; border-radius: 50%; pointer-events: none; z-index: 12; animation: burst .7s ease-out forwards; }
@keyframes burst { from { transform: scale(.5); opacity: 1; box-shadow: 0 0 0 0 var(--c); } to { transform: scale(7); opacity: 0; box-shadow: 0 0 0 3px var(--c); } }

.toast { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.6); padding: 10px 22px; border-radius: 999px; background: rgba(20, 22, 50, .88); border: 1px solid rgba(255,255,255,.15); font-weight: 700; font-size: 20px; opacity: 0; pointer-events: none; transition: .25s; z-index: 20; white-space: nowrap; }
.toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.dice-area { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 10px; }
.dice-stage { width: 70px; height: 78px; margin-bottom: 4px; perspective: 500px; cursor: pointer; }
.cube { --s: 62px; position: relative; width: var(--s); height: var(--s); margin: 4px; transform-style: preserve-3d; transform: rotateX(-20deg) rotateY(-28deg); transition: transform 1s cubic-bezier(.2,.8,.25,1); }
.face { position: absolute; inset: 0; border-radius: 14px; background: radial-gradient(circle at 30% 25%, #ffffff, #e9eaf3 60%, #c9cbdb); box-shadow: inset 0 0 10px rgba(80,85,140,.25); display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 9px; backface-visibility: hidden; }
.face i { width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #555, #111); place-self: center; }
.f1 { transform: translateZ(calc(var(--s) / 2)); } .f6 { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.f2 { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); } .f5 { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.f3 { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); } .f4 { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.f1 i { grid-area: 2 / 2; width: 15px; height: 15px; background: radial-gradient(circle at 35% 30%, #ff6b78, #c4142a); }
.f2 i:nth-child(1) { grid-area: 1 / 1; } .f2 i:nth-child(2) { grid-area: 3 / 3; }
.f3 i:nth-child(1) { grid-area: 1 / 1; } .f3 i:nth-child(2) { grid-area: 2 / 2; } .f3 i:nth-child(3) { grid-area: 3 / 3; }
.f4 i:nth-child(1) { grid-area: 1 / 1; } .f4 i:nth-child(2) { grid-area: 1 / 3; } .f4 i:nth-child(3) { grid-area: 3 / 1; } .f4 i:nth-child(4) { grid-area: 3 / 3; }
.f5 i:nth-child(1) { grid-area: 1 / 1; } .f5 i:nth-child(2) { grid-area: 1 / 3; } .f5 i:nth-child(3) { grid-area: 2 / 2; } .f5 i:nth-child(4) { grid-area: 3 / 1; } .f5 i:nth-child(5) { grid-area: 3 / 3; }
.f6 i:nth-child(1) { grid-area: 1 / 1; } .f6 i:nth-child(2) { grid-area: 2 / 1; } .f6 i:nth-child(3) { grid-area: 3 / 1; } .f6 i:nth-child(4) { grid-area: 1 / 3; } .f6 i:nth-child(5) { grid-area: 2 / 3; } .f6 i:nth-child(6) { grid-area: 3 / 3; }
.dice-stage.shake { animation: shake .5s linear; }
@keyframes shake { 20% { transform: translate(-3px, -6px) rotate(-6deg); } 40% { transform: translate(4px, -10px) rotate(6deg); } 60% { transform: translate(-3px, -4px) rotate(-4deg); } 80% { transform: translate(2px, -2px); } }

.roll-row { display: flex; align-items: center; gap: 18px; }
.icon-btn { width: 36px; height: 36px; color: #8f94cc; display: grid; place-items: center; }
.icon-btn svg { width: 26px; height: 26px; }
.roll-btn { width: 84px; height: 84px; border-radius: 50%; font-size: 24px; font-weight: 700; color: #fff; letter-spacing: 1px; text-shadow: 0 2px 0 rgba(0,70,110,.5);
  background: radial-gradient(circle at 35% 28%, #b5f3ff 0 8%, #4fdcff 30%, #12a6e8 80%);
  box-shadow: 0 0 0 5px rgba(56,214,255,.25), 0 0 30px rgba(56,214,255,.75), 0 0 60px rgba(56,214,255,.35), inset 0 -6px 10px rgba(0,60,120,.35);
  transition: transform .12s, filter .2s, box-shadow .2s; }
.roll-btn.ready { animation: rollpulse 1.1s ease-in-out infinite; }
@keyframes rollpulse { 50% { box-shadow: 0 0 0 9px rgba(56,214,255,.18), 0 0 40px rgba(56,214,255,.95), 0 0 80px rgba(56,214,255,.45), inset 0 -6px 10px rgba(0,60,120,.35); transform: scale(1.04); } }
.roll-btn:disabled { filter: grayscale(.85) brightness(.6); box-shadow: none; animation: none; }
.roll-btn:active:not(:disabled) { transform: scale(.93); }

/* overlays */
.overlay { position: fixed; inset: 0; background: rgba(10, 12, 35, .6); display: none; align-items: center; justify-content: center; z-index: 50; padding: 20px; backdrop-filter: blur(4px); }
.overlay.show { display: flex; animation: fadein .25s; }
.sheet { width: min(380px, 100%); padding: 22px; text-align: center; max-height: 90vh; overflow-y: auto; }
.sheet h3 { margin: 0 0 12px; font-size: 26px; }
.sheet p { color: #d6d8f7; line-height: 1.45; }
.sheet .big-btn { width: 100%; margin-top: 12px; }
.sheet .opt { display: flex; justify-content: space-between; align-items: center; padding: 12px 4px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 18px; }
.rank-row { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 16px; background: rgba(0,0,0,.15); margin-bottom: 8px; text-align: left; }
.rank-row b { font-size: 22px; width: 30px; text-align: center; }
.rank-row img { width: 46px; height: 46px; border-radius: 14px; border: 3px solid; object-fit: cover; }
.rank-row span { flex: 1; font-size: 18px; font-weight: 600; }
.trophy { font-size: 64px; line-height: 1; filter: drop-shadow(0 0 20px rgba(255,210,63,.7)); animation: bob 2s ease-in-out infinite; }
.net-banner { position: fixed; top: calc(env(safe-area-inset-top) + 64px); left: 50%; transform: translateX(-50%); background: #ff8a3d; color: #fff; padding: 6px 16px; border-radius: 999px; font-weight: 600; display: none; z-index: 40; font-size: 14px; }
.net-banner.show { display: block; }
html[lang=hi] .turn-text { letter-spacing: 0; }
@media (max-height: 640px) { :root { --av: 60px; } .roll-btn { width: 70px; height: 70px; font-size: 20px; } .cube { --s: 50px; } .dice-stage { width: 58px; height: 58px; } .face i { width: 9px; height: 9px; } }