/* ==========================================================================
   Koula Chat -- theme + effects layer
   Loaded AFTER style.css. Everything here is additive: the original classes
   (card, panel, app-shell, tabs, ...) keep working, they just look better.
   ========================================================================== */

:root{
  --neon:#5aa4f6;
  --neon-2:#b98cff;
  --neon-3:#28e0a8;
  --neon-4:#ff5c8a;
  --hot:#ff8a5c;
  --glass:rgba(13,27,44,.72);
  --glass-2:rgba(16,36,58,.6);
  --stroke:rgba(120,170,240,.16);
  --stroke-hot:rgba(120,170,240,.42);
  --shadow-lg:0 24px 70px rgba(0,0,0,.45);
  --shadow-glow:0 0 0 1px rgba(90,164,246,.25), 0 12px 40px rgba(35,90,160,.28);
  --ease:cubic-bezier(.22,.61,.36,1);
  --r-lg:24px;
  --r-md:16px;
  --r-sm:12px;
}

/* ---------------------------------------------------------------- base */

html{scroll-behavior:smooth}

body{
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(90,164,246,.16), transparent 60%),
    radial-gradient(900px 560px at 88% 4%, rgba(185,140,255,.13), transparent 62%),
    radial-gradient(800px 700px at 50% 108%, rgba(40,224,168,.09), transparent 60%),
    linear-gradient(180deg,#081426 0%,#060f1c 45%,#04090f 100%);
  background-attachment:fixed;
  min-height:100vh;
}

::selection{background:rgba(90,164,246,.35);color:#fff}

::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:rgba(8,19,31,.6)}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#2b5f9c,#1a3c66);
  border-radius:99px;border:2px solid rgba(8,19,31,.9);
}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#3d7cc4,#245488)}

/* Animated aurora that sits behind everything */
.fx-aurora{
  position:fixed;inset:0;z-index:-3;pointer-events:none;overflow:hidden;
}
.fx-aurora span{
  position:absolute;display:block;border-radius:50%;filter:blur(80px);opacity:.4;
  animation:drift 26s var(--ease) infinite alternate;
}
.fx-aurora span:nth-child(1){width:520px;height:520px;left:-8%;top:-14%;background:rgba(90,164,246,.5);animation-duration:24s}
.fx-aurora span:nth-child(2){width:460px;height:460px;right:-6%;top:6%;background:rgba(185,140,255,.42);animation-duration:31s;animation-delay:-6s}
.fx-aurora span:nth-child(3){width:600px;height:600px;left:36%;bottom:-24%;background:rgba(40,224,168,.3);animation-duration:37s;animation-delay:-12s}
@keyframes drift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(70px,-50px,0) scale(1.22)}
}

/* Faint grid + starfield */
.fx-grid{
  position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.35;
  background-image:
    linear-gradient(rgba(90,164,246,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90,164,246,.06) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}
#fx-stars{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.6}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .fx-aurora span{animation:none}
}

/* ---------------------------------------------------------------- nav */

.site-nav{
  position:sticky;top:0;z-index:60;
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  background:linear-gradient(180deg,rgba(8,18,32,.92),rgba(8,18,32,.72));
  border-bottom:1px solid var(--stroke);
}
.site-nav-inner{
  max-width:1280px;margin:0 auto;padding:.7rem 1.1rem;
  display:flex;align-items:center;gap:1rem;
}
.nav-brand{display:flex;align-items:center;gap:.65rem;font-weight:800;letter-spacing:.04em;color:var(--text);white-space:nowrap}
.nav-brand:hover{color:#fff}
.nav-logo{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(140deg,#4d9dfb,#7a5cff 55%,#28e0a8);
  color:#03111f;font-weight:900;font-size:1.15rem;
  box-shadow:0 0 22px rgba(90,164,246,.5);
  animation:logoPulse 5s ease-in-out infinite;
}
@keyframes logoPulse{
  0%,100%{box-shadow:0 0 20px rgba(90,164,246,.45)}
  50%{box-shadow:0 0 34px rgba(185,140,255,.6)}
}
.nav-links{display:flex;gap:.15rem;align-items:center;margin-left:.6rem;flex-wrap:wrap}
.nav-links a{
  padding:.5rem .8rem;border-radius:11px;color:#b9cbe4;font-size:.94rem;font-weight:500;
  transition:all .18s var(--ease);position:relative;white-space:nowrap;
}
.nav-links a:hover{color:#fff;background:rgba(90,164,246,.13)}
.nav-links a.active{color:#fff;background:rgba(90,164,246,.2);box-shadow:inset 0 0 0 1px rgba(90,164,246,.35)}
.nav-links a.active::after{
  content:'';position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);
  width:22px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--neon),var(--neon-2));
}
.nav-right{margin-left:auto;display:flex;gap:.5rem;align-items:center}
.nav-toggle{display:none;background:none;border:1px solid var(--stroke);border-radius:10px;color:var(--text);padding:.45rem .6rem;cursor:pointer}

@media (max-width:1000px){
  .nav-toggle{display:block}
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:.2rem;padding:.7rem;
    background:rgba(8,18,32,.98);border-bottom:1px solid var(--stroke);
    max-height:70vh;overflow:auto;
  }
  .nav-links.open{display:flex}
  .site-nav-inner{flex-wrap:wrap;position:relative}
}

/* ---------------------------------------------------------------- buttons */

.btn{
  --btn-bg:linear-gradient(180deg,rgba(32,66,108,.9),rgba(15,38,64,.9));
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border:1px solid var(--stroke-hot);background:var(--btn-bg);color:var(--text);
  border-radius:14px;padding:.75rem 1.25rem;cursor:pointer;font-weight:600;font-size:.97rem;
  transition:transform .16s var(--ease), box-shadow .22s var(--ease), filter .18s var(--ease);
  position:relative;overflow:hidden;text-align:center;
}
.btn::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);
  transform:translateX(-130%);transition:transform .6s var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(20,60,110,.5)}
.btn:hover::after{transform:translateX(130%)}
.btn:active{transform:translateY(0) scale(.98)}
.btn:focus-visible{outline:2px solid var(--neon);outline-offset:3px}

.btn-primary{
  --btn-bg:linear-gradient(135deg,#3d8ee8,#6f5cff 60%,#8b5cf6);
  border-color:transparent;color:#fff;
  box-shadow:0 10px 32px rgba(70,120,230,.42);
}
.btn-primary:hover{box-shadow:0 16px 44px rgba(90,120,255,.55);filter:brightness(1.08)}

.btn-play{
  --btn-bg:linear-gradient(135deg,#12b981,#22d3a8 60%,#4ade80);
  border-color:transparent;color:#03211a;font-weight:800;
  box-shadow:0 10px 32px rgba(20,190,140,.4);
}
.btn-play:hover{box-shadow:0 16px 44px rgba(30,220,160,.55);filter:brightness(1.08)}

.btn-ghost{--btn-bg:rgba(255,255,255,.04);border-color:var(--stroke)}
.btn-ghost:hover{background:rgba(255,255,255,.09)}
.btn-danger{--btn-bg:linear-gradient(135deg,#c0392b,#7a1f1a);border-color:transparent;color:#fff}
.btn-sm{padding:.5rem .85rem;font-size:.88rem;border-radius:11px}
.btn-lg{padding:.95rem 1.9rem;font-size:1.06rem;border-radius:16px}
.btn-block{width:100%}
.btn[disabled],.btn:disabled{opacity:.45;cursor:not-allowed;transform:none !important}

/* Upgrade the original button classes to match, without breaking them */
.primary{
  background:linear-gradient(135deg,#3d8ee8,#6f5cff 60%,#8b5cf6) !important;
  border-color:transparent !important;color:#fff;font-weight:600;
  box-shadow:0 8px 26px rgba(70,120,230,.35);
  transition:transform .16s var(--ease),box-shadow .2s var(--ease),filter .18s var(--ease);
}
.primary:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(90,120,255,.5);filter:brightness(1.07)}
.tiny,.linkbtn,.tab,.side-btn,.arcade-tab{transition:transform .16s var(--ease),border-color .18s var(--ease),background .18s var(--ease)}
.tiny:hover,.linkbtn:hover,.tab:hover,.side-btn:hover,.arcade-tab:hover{border-color:var(--stroke-hot);transform:translateY(-1px)}

/* ==========================================================================
   Dashboard, brought in line with the rest of the site.

   CSS only, on purpose. The dashboard markup is driven by app.js via element
   ids, so restyling here means the chat, DMs, servers and Minecraft linking
   keep working untouched.
   ========================================================================== */

.app-shell{
  max-width:1280px;margin:0 auto;padding:1.4rem 1.1rem 3rem;
  gap:1.2rem;min-height:auto;
}
.app-shell .sidebar,
.app-shell .main{min-height:auto}

.app-shell .sidebar{
  background:var(--glass) !important;
  border:1px solid var(--stroke) !important;
  border-radius:var(--r-lg) !important;
  padding:1.1rem;gap:.9rem;
}

.app-shell .brand{
  padding:.2rem .2rem 1rem;border-bottom:1px solid var(--stroke);margin-bottom:.3rem;
}
.app-shell .logo{
  width:42px;height:42px;border-radius:13px;
  background:linear-gradient(140deg,#4d9dfb,#7a5cff 55%,#28e0a8) !important;
  color:#03111f;font-weight:900;font-size:1.15rem;
  box-shadow:0 0 20px rgba(90,164,246,.45);
}

/* Sidebar buttons and top tabs get the same treatment as the site nav. */
.app-shell .side-btn{
  background:transparent !important;border:1px solid transparent !important;
  border-radius:12px !important;padding:.62rem .85rem !important;
  color:#b9cbe4;font-weight:600;font-size:.95rem;text-align:left;
  display:flex;align-items:center;text-decoration:none;
  transition:all .18s var(--ease);
}
.app-shell .side-btn:hover{background:rgba(90,164,246,.12) !important;color:#fff;transform:none}
.app-shell .side-btn.active{
  background:rgba(90,164,246,.2) !important;color:#fff;
  border-color:rgba(90,164,246,.38) !important;
}

.app-shell .tabs{gap:.3rem}
.app-shell .tab{
  background:transparent !important;border:1px solid transparent !important;
  border-radius:11px !important;padding:.5rem .85rem !important;
  color:#b9cbe4;font-weight:600;font-size:.94rem;transition:all .18s var(--ease);
}
.app-shell .tab:hover{background:rgba(90,164,246,.12) !important;color:#fff;transform:none}
.app-shell .tab.active{
  background:rgba(90,164,246,.2) !important;color:#fff;
  border-color:rgba(90,164,246,.38) !important;
}

.app-shell .topbar{
  background:var(--glass);border:1px solid var(--stroke);
  border-radius:var(--r-lg);margin-bottom:1rem;padding:.85rem 1.1rem;
}

.app-shell .card,
.app-shell .panel,
.app-shell .subcard{
  border-radius:var(--r-lg) !important;
  background:var(--glass) !important;
  border:1px solid var(--stroke) !important;
}
.app-shell .subcard{background:var(--glass-2) !important;border-radius:var(--r-md) !important}

.app-shell .item,
.app-shell .msg,
.app-shell .notify{
  background:rgba(255,255,255,.035) !important;
  border:1px solid var(--stroke) !important;
  border-radius:var(--r-md) !important;
  transition:background .18s var(--ease),border-color .18s var(--ease);
}
.app-shell .item:hover{background:rgba(90,164,246,.09) !important;border-color:var(--stroke-hot) !important}
.app-shell .friend-item.selected{
  background:rgba(40,224,168,.12) !important;border-color:rgba(40,224,168,.4) !important;
}

.app-shell .search,
.app-shell .chat-input{
  background:rgba(4,12,22,.75) !important;border:1px solid var(--stroke) !important;
  border-radius:var(--r-sm) !important;
}
.app-shell .search:focus,
.app-shell .chat-input:focus{
  border-color:var(--neon) !important;box-shadow:0 0 0 3px rgba(90,164,246,.18) !important;
}

.app-shell h2{font-size:1.2rem}
.app-shell h3{font-size:1rem}
.app-shell .status-pill{
  border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--stroke);
  font-weight:600;
}

@media (max-width:1100px){
  .app-shell{grid-template-columns:1fr}
  .app-shell .sidebar{position:relative;top:0}
}

/* ---------------------------------------------------------------- bank card */

.bank-card{
  position:relative;overflow:hidden;border-radius:20px;padding:1.5rem;
  background:linear-gradient(135deg,#16325a 0%,#241d4f 45%,#0d2b3f 100%);
  border:1px solid rgba(255,209,102,.34);
  box-shadow:0 20px 50px rgba(0,0,0,.5);
}
.bank-card::after{
  content:'';position:absolute;width:280px;height:280px;right:-110px;top:-130px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,209,102,.32),transparent 68%);
}
.bank-card .bc-label{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#9fb4cd}
.bank-card .bc-id{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:clamp(1.15rem,3.2vw,1.7rem);font-weight:800;letter-spacing:.09em;color:#ffe6ad;
  word-break:break-all;
}
.bank-card .bc-balance{font-size:2rem;font-weight:900;color:#fff;line-height:1.1}
.bank-card .bc-chip{
  width:42px;height:32px;border-radius:6px;
  background:linear-gradient(135deg,#ffd166,#d99b32);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);
}

.copy-row{
  display:flex;gap:.4rem;align-items:center;
  background:rgba(2,8,16,.5);border:1px solid var(--stroke);
  border-radius:var(--r-sm);padding:.5rem .6rem;
}
.copy-row code{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:.88rem;color:#cfe4ff;
}
.secret-value{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  filter:blur(5px);transition:filter .18s var(--ease);user-select:none;
}
.secret-value.shown{filter:none;user-select:all}

/* ---------------------------------------------------------------- KAL pill */

.kal-pill{
  display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;
  padding:.48rem .85rem;border-radius:999px;font-weight:800;font-size:.94rem;
  color:#ffe6ad;text-decoration:none;
  background:linear-gradient(135deg,rgba(255,209,102,.16),rgba(255,138,92,.12));
  border:1px solid rgba(255,209,102,.42);
  transition:transform .18s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease);
  font-variant-numeric:tabular-nums;
}
.kal-pill:hover{
  transform:translateY(-1px);color:#fff5d8;
  box-shadow:0 8px 24px rgba(255,177,92,.28);
  background:linear-gradient(135deg,rgba(255,209,102,.26),rgba(255,138,92,.2));
}
.kal-pill .kal-coin{font-size:1rem;line-height:1}
.kal-pill .kal-unit{font-size:.74rem;opacity:.72;letter-spacing:.06em}
.kal-pill.up{animation:kalUp .9s var(--ease)}
.kal-pill.down{animation:kalDown .9s var(--ease)}
@keyframes kalUp{
  0%{transform:scale(1)}
  25%{transform:scale(1.14);box-shadow:0 0 0 6px rgba(40,224,168,.28);border-color:#28e0a8;color:#b8ffd8}
  100%{transform:scale(1)}
}
@keyframes kalDown{
  0%{transform:scale(1)}
  25%{transform:scale(.92);box-shadow:0 0 0 6px rgba(211,69,63,.24);border-color:#e0413a;color:#ffb3ae}
  100%{transform:scale(1)}
}

.kal-tab{
  border:1px solid var(--stroke);background:rgba(255,255,255,.04);color:var(--text);
  border-radius:12px;padding:.55rem 1rem;cursor:pointer;font-weight:600;font-size:.93rem;
  transition:all .18s var(--ease);
}
.kal-tab:hover{border-color:var(--stroke-hot)}
.kal-tab.active{
  background:linear-gradient(135deg,rgba(255,209,102,.22),rgba(255,138,92,.16));
  border-color:rgba(255,209,102,.5);color:#ffe6ad;
}

.wager-card{display:grid;gap:.7rem}
.wager-card .bet-row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.wager-card input[type=number]{max-width:130px}

/* ---------------------------------------------------------------- surfaces */

.card,.panel,.sidebar,.modal,.call-topbar,.auth-card{
  background:var(--glass) !important;
  backdrop-filter:blur(14px) saturate(130%);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
  border:1px solid var(--stroke) !important;
  box-shadow:var(--shadow-lg) !important;
}

.glass{
  background:var(--glass);backdrop-filter:blur(14px) saturate(130%);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
  border:1px solid var(--stroke);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);padding:1.4rem;
}

/* Cards that light up and lift on hover */
.lift{transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease)}
.lift:hover{transform:translateY(-6px);border-color:var(--stroke-hot);box-shadow:0 28px 64px rgba(0,0,0,.55),0 0 0 1px rgba(90,164,246,.28)}

/* Animated gradient border */
.glow-border{position:relative;isolation:isolate}
.glow-border::before{
  content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;z-index:-1;
  background:linear-gradient(120deg,var(--neon),var(--neon-2),var(--neon-3),var(--neon));
  background-size:300% 300%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .3s var(--ease);animation:borderFlow 6s linear infinite;
}
.glow-border:hover::before{opacity:1}
@keyframes borderFlow{0%{background-position:0% 50%}100%{background-position:300% 50%}}

/* ---------------------------------------------------------------- layout */

.wrap{max-width:1280px;margin:0 auto;padding:0 1.1rem}
.wrap-narrow{max-width:880px;margin:0 auto;padding:0 1.1rem}
.section{padding:4rem 0}
.section-sm{padding:2.4rem 0}
.stack{display:grid;gap:1rem}
.stack-lg{display:grid;gap:2rem}

.section-head{margin-bottom:1.8rem;max-width:720px}
.section-head h2{font-size:clamp(1.6rem,3.4vw,2.3rem);margin:.3rem 0 .55rem;line-height:1.18}
.section-head p{color:var(--muted);margin:0;font-size:1.03rem;line-height:1.65}

.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.1rem}
.grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1.1rem}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.1rem}

.eyebrow{
  display:inline-flex;align-items:center;gap:.45rem;
  color:#9ec9ff;text-transform:uppercase;letter-spacing:.16em;font-size:.74rem;font-weight:700;
  margin-bottom:.5rem;
}
.eyebrow::before{content:'';width:20px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--neon),transparent)}

.gradient-text{
  background:linear-gradient(120deg,#7fc4ff 0%,#b98cff 42%,#28e0a8 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  background-size:200% auto;animation:shimmer 7s linear infinite;
}
@keyframes shimmer{to{background-position:200% center}}

/* ---------------------------------------------------------------- hero */

.hero{position:relative;padding:4.5rem 0 3.4rem;overflow:hidden}
.hero-inner{display:grid;grid-template-columns:1.06fr .94fr;gap:3rem;align-items:center}
.hero h1{
  font-size:clamp(2.3rem,5.6vw,4.1rem);line-height:1.04;margin:.4rem 0 1rem;
  letter-spacing:-.02em;font-weight:800;
}
.hero-sub{font-size:clamp(1rem,1.7vw,1.19rem);color:#b3c6de;line-height:1.68;margin:0 0 1.7rem;max-width:60ch}
.hero-cta{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:1.5rem}
.hero-note{color:var(--muted);font-size:.9rem;display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}

.badge-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.1rem}
.badge{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.35rem .75rem;border-radius:999px;font-size:.82rem;font-weight:600;
  background:rgba(90,164,246,.12);border:1px solid rgba(90,164,246,.3);color:#cfe4ff;
}
.badge-green{background:rgba(40,224,168,.12);border-color:rgba(40,224,168,.32);color:#a9f5d8}
.badge-purple{background:rgba(185,140,255,.12);border-color:rgba(185,140,255,.32);color:#dcc8ff}
.badge-pink{background:rgba(255,92,138,.12);border-color:rgba(255,92,138,.32);color:#ffc2d4}
.badge-amber{background:rgba(255,209,102,.12);border-color:rgba(255,209,102,.32);color:#ffe6ad}

.dot{width:7px;height:7px;border-radius:50%;background:var(--neon-3);box-shadow:0 0 0 0 rgba(40,224,168,.6);animation:ping 2.1s ease-out infinite}
@keyframes ping{
  0%{box-shadow:0 0 0 0 rgba(40,224,168,.55)}
  70%{box-shadow:0 0 0 9px rgba(40,224,168,0)}
  100%{box-shadow:0 0 0 0 rgba(40,224,168,0)}
}

@media (max-width:960px){
  .hero-inner{grid-template-columns:1fr;gap:2.2rem}
  .hero{padding:2.8rem 0 2.2rem}
}

/* Floating arcade preview tiles in the hero */
.hero-art{position:relative;min-height:340px;display:grid;grid-template-columns:1fr 1fr;gap:.9rem;align-content:center}
.art-tile{
  border-radius:var(--r-md);padding:1.1rem;min-height:104px;
  background:var(--glass-2);border:1px solid var(--stroke);
  display:flex;flex-direction:column;justify-content:space-between;gap:.5rem;
  animation:float 6s ease-in-out infinite;box-shadow:var(--shadow-lg);
}
.art-tile:nth-child(2){animation-delay:-1.5s}
.art-tile:nth-child(3){animation-delay:-3s}
.art-tile:nth-child(4){animation-delay:-4.5s}
.art-tile .ico{font-size:1.7rem;line-height:1}
.art-tile .nm{font-weight:700;font-size:.95rem}
.art-tile .sc{color:var(--muted);font-size:.82rem}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* ---------------------------------------------------------------- stats */

.stat-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem}
.stat{
  text-align:center;padding:1.3rem 1rem;border-radius:var(--r-md);
  background:var(--glass-2);border:1px solid var(--stroke);
}
.stat .n{font-size:2.1rem;font-weight:800;line-height:1;
  background:linear-gradient(120deg,#7fc4ff,#b98cff);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;}
.stat .l{color:var(--muted);font-size:.85rem;margin-top:.45rem;letter-spacing:.03em}

/* ---------------------------------------------------------------- game cards */

.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:1.2rem}

.game-tile{
  position:relative;display:flex;flex-direction:column;gap:.6rem;
  padding:1.3rem;border-radius:var(--r-lg);overflow:hidden;
  background:var(--glass);border:1px solid var(--stroke);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
  color:var(--text);
}
.game-tile::before{
  content:'';position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--tile-accent,#5aa4f6),transparent);
  opacity:.85;
}
.game-tile::after{
  content:'';position:absolute;width:220px;height:220px;right:-90px;top:-90px;border-radius:50%;
  background:radial-gradient(circle,var(--tile-accent,#5aa4f6),transparent 66%);
  opacity:.11;transition:opacity .35s var(--ease),transform .5s var(--ease);
}
.game-tile:hover{transform:translateY(-7px);border-color:var(--stroke-hot);box-shadow:0 26px 60px rgba(0,0,0,.55)}
.game-tile:hover::after{opacity:.26;transform:scale(1.35)}
.game-tile .g-ico{font-size:2.5rem;line-height:1;filter:drop-shadow(0 4px 14px rgba(0,0,0,.5))}
.game-tile h3{margin:.15rem 0 0;font-size:1.16rem}
.game-tile .g-tag{color:var(--muted);font-size:.9rem;margin:0;line-height:1.5;flex:1}
.game-tile .g-meta{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.2rem}
.chip{
  font-size:.74rem;padding:.24rem .6rem;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid var(--stroke);color:#c3d5ec;font-weight:600;
}
.chip-accent{background:color-mix(in srgb, var(--tile-accent,#5aa4f6) 18%, transparent);border-color:var(--tile-accent,#5aa4f6);color:#fff}
.game-tile .g-foot{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-top:.5rem;
  padding-top:.75rem;border-top:1px solid var(--stroke);font-size:.85rem}
.g-best{color:var(--muted)}
.g-best b{color:var(--text)}
.g-go{color:var(--tile-accent,#5aa4f6);font-weight:700;display:inline-flex;align-items:center;gap:.3rem;transition:gap .2s var(--ease)}
.game-tile:hover .g-go{gap:.6rem}

/* ---------------------------------------------------------------- game player */

.play-shell{max-width:1280px;margin:0 auto;padding:1.4rem 1.1rem 3rem;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:1.4rem;align-items:start}
@media (max-width:1080px){.play-shell{grid-template-columns:1fr}}

.play-stage{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(180deg,#050d16,#020609);
  border:1px solid var(--stroke);box-shadow:var(--shadow-lg);
}
.play-hud{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:.85rem 1.1rem;border-bottom:1px solid var(--stroke);
  background:linear-gradient(180deg,rgba(16,36,58,.85),rgba(12,26,44,.6));
}
.hud-stats{display:flex;gap:1.5rem;flex-wrap:wrap}
.hud-stat{display:flex;flex-direction:column;gap:.1rem}
.hud-stat .k{font-size:.7rem;text-transform:uppercase;letter-spacing:.13em;color:var(--muted)}
.hud-stat .v{font-size:1.35rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
.hud-actions{display:flex;gap:.5rem;flex-wrap:wrap}

.canvas-wrap{position:relative;width:100%;aspect-ratio:16/10;background:#02060b;display:grid;place-items:center}
#game-canvas{width:100%;height:100%;display:block;touch-action:none}
@media (max-width:700px){.canvas-wrap{aspect-ratio:4/5}}

.game-overlay{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:1.5rem;
  background:radial-gradient(circle at center, rgba(4,12,22,.82), rgba(2,6,11,.96));
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:5;
  transition:opacity .3s var(--ease);
}
.game-overlay.hidden{display:none !important}
.overlay-card{max-width:440px;display:grid;gap:.9rem;justify-items:center}
.overlay-card h2{margin:0;font-size:clamp(1.5rem,4vw,2.2rem)}
.overlay-card p{margin:0;color:#b3c6de;line-height:1.6}
.overlay-score{font-size:3.2rem;font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
.overlay-actions{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin-top:.3rem}

.pb-flash{
  display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .8rem;border-radius:999px;
  background:linear-gradient(135deg,rgba(255,209,102,.2),rgba(255,138,92,.2));
  border:1px solid rgba(255,209,102,.5);color:#ffe6ad;font-weight:700;font-size:.88rem;
  animation:popIn .45s var(--ease) both;
}
@keyframes popIn{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}

.save-gate{
  border-radius:var(--r-md);padding:1rem 1.1rem;
  background:linear-gradient(135deg,rgba(185,140,255,.14),rgba(90,164,246,.11));
  border:1px solid rgba(185,140,255,.34);
  display:grid;gap:.7rem;text-align:left;
}
.save-gate h4{margin:0;font-size:1rem;display:flex;align-items:center;gap:.4rem}
.save-gate p{margin:0;font-size:.9rem;color:#c9d8ee;line-height:1.55}
.save-gate .row{gap:.5rem}

.mobile-pad{display:none;gap:.5rem;padding:.9rem;justify-content:center;flex-wrap:wrap;border-top:1px solid var(--stroke)}
.mobile-pad button{
  width:58px;height:58px;border-radius:14px;font-size:1.3rem;
  background:rgba(255,255,255,.06);border:1px solid var(--stroke);color:var(--text);cursor:pointer;
}
.mobile-pad button:active{background:rgba(90,164,246,.28)}
.mobile-pad .wide{width:auto;padding:0 1.3rem;font-size:1rem}
@media (max-width:820px), (pointer:coarse){.mobile-pad{display:flex}}

/* ---------------------------------------------------------------- leaderboard */

.lb{display:grid;gap:.4rem}
.lb-row{
  display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:.7rem;
  padding:.62rem .8rem;border-radius:var(--r-sm);
  background:rgba(255,255,255,.032);border:1px solid transparent;
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
}
.lb-row:hover{background:rgba(90,164,246,.1);border-color:var(--stroke);transform:translateX(3px)}
.lb-row.me{background:rgba(40,224,168,.12);border-color:rgba(40,224,168,.4)}
.lb-rank{
  display:grid;place-items:center;width:30px;height:30px;border-radius:9px;
  background:rgba(255,255,255,.06);font-weight:800;font-size:.86rem;
}
.lb-row:nth-child(1) .lb-rank{background:linear-gradient(135deg,#ffd166,#ff9f1c);color:#3a2400}
.lb-row:nth-child(2) .lb-rank{background:linear-gradient(135deg,#dfe6ee,#a9b6c5);color:#26313d}
.lb-row:nth-child(3) .lb-rank{background:linear-gradient(135deg,#e0955a,#b06c34);color:#2c1500}
.lb-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-score{font-weight:800;font-variant-numeric:tabular-nums;color:#9ec9ff}
.lb-empty{padding:1.6rem 1rem;text-align:center;color:var(--muted);font-size:.93rem}

/* ---------------------------------------------------------------- xp bar */

.xp-wrap{display:grid;gap:.4rem}
.xp-top{display:flex;justify-content:space-between;font-size:.85rem;color:var(--muted)}
.xp-bar{height:10px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden;position:relative}
.xp-fill{
  height:100%;border-radius:999px;width:0%;
  background:linear-gradient(90deg,#3d8ee8,#8b5cf6,#28e0a8);
  background-size:200% 100%;animation:shimmer 3.5s linear infinite;
  transition:width .8s var(--ease);
}
.level-badge{
  display:inline-grid;place-items:center;width:46px;height:46px;border-radius:14px;
  background:linear-gradient(135deg,#3d8ee8,#8b5cf6);color:#fff;font-weight:900;font-size:1.1rem;
  box-shadow:0 6px 20px rgba(90,120,255,.4);
}

/* ---------------------------------------------------------------- achievements */

.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
.ach{
  display:flex;gap:.85rem;align-items:flex-start;padding:1rem;border-radius:var(--r-md);
  background:var(--glass-2);border:1px solid var(--stroke);transition:all .25s var(--ease);
}
.ach:hover{border-color:var(--stroke-hot);transform:translateY(-3px)}
.ach.locked{opacity:.42;filter:grayscale(.7)}
.ach .a-ico{
  font-size:1.6rem;width:46px;height:46px;flex:0 0 46px;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(255,209,102,.2),rgba(255,138,92,.14));
  border:1px solid rgba(255,209,102,.3);
}
.ach h4{margin:0 0 .2rem;font-size:.98rem}
.ach p{margin:0;font-size:.85rem;color:var(--muted);line-height:1.5}
.ach .a-xp{font-size:.78rem;color:#ffe6ad;font-weight:700;margin-top:.35rem;display:block}

/* ---------------------------------------------------------------- accordion */

.acc{border:1px solid var(--stroke);border-radius:var(--r-md);overflow:hidden;background:var(--glass-2)}
.acc + .acc{margin-top:.7rem}
.acc summary{
  padding:1rem 1.15rem;cursor:pointer;font-weight:600;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  transition:background .2s var(--ease);
}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{background:rgba(90,164,246,.09)}
.acc summary::after{content:'+';font-size:1.35rem;color:var(--neon);transition:transform .25s var(--ease);line-height:1}
.acc[open] summary::after{transform:rotate(45deg)}
.acc[open] summary{background:rgba(90,164,246,.09);border-bottom:1px solid var(--stroke)}
.acc-body{padding:1.05rem 1.15rem;color:#c2d3e8;line-height:1.7;font-size:.95rem}
.acc-body p{margin:0 0 .8rem}
.acc-body p:last-child{margin-bottom:0}
.acc-body ol,.acc-body ul{margin:.5rem 0 .8rem;padding-left:1.3rem}
.acc-body li{margin:.35rem 0}
.acc-body code{background:rgba(0,0,0,.4);padding:.15rem .4rem;border-radius:5px;font-size:.88em;color:#9ee6c4}

/* ---------------------------------------------------------------- forms */

.field{display:grid;gap:.4rem;margin-bottom:.95rem}
.field label{font-size:.88rem;color:#b6c8de;font-weight:600}
.field .hint{font-size:.8rem;color:var(--muted)}
.input,.field input,.field select,.field textarea{
  width:100%;border:1px solid var(--stroke);background:rgba(4,12,22,.75);color:var(--text);
  border-radius:var(--r-sm);padding:.8rem .95rem;outline:none;font-size:.97rem;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
}
.input:focus,.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--neon);box-shadow:0 0 0 3px rgba(90,164,246,.18);background:rgba(4,12,22,.95);
}
.field textarea{min-height:140px;resize:vertical;line-height:1.6;font-family:inherit}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#8ca0b8 50%),linear-gradient(135deg,#8ca0b8 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(1em + 2px),calc(100% - 14px) calc(1em + 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2.4rem}
.field-error{color:#ff9d97;font-size:.84rem}

.alert{border-radius:var(--r-md);padding:.9rem 1.05rem;border:1px solid var(--stroke);background:rgba(255,255,255,.04);font-size:.93rem;line-height:1.6}
.alert-ok{border-color:rgba(40,224,168,.45);background:rgba(40,224,168,.1);color:#b8ffd8}
.alert-warn{border-color:rgba(255,209,102,.45);background:rgba(255,209,102,.09);color:#ffe6ad}
.alert-bad{border-color:rgba(211,69,63,.5);background:rgba(211,69,63,.11);color:#ffb3ae}
.alert-info{border-color:rgba(90,164,246,.45);background:rgba(90,164,246,.09);color:#cfe4ff}

/* ---------------------------------------------------------------- calls */

.call-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:1.2rem;align-items:start}
@media (max-width:1000px){.call-layout{grid-template-columns:1fr}}

.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.9rem}
.video-tile{
  position:relative;aspect-ratio:16/10;border-radius:var(--r-md);overflow:hidden;
  background:linear-gradient(160deg,#0c1c2e,#060e18);border:1px solid var(--stroke);
  display:grid;place-items:center;
}
.video-tile video{width:100%;height:100%;object-fit:cover;display:block;background:#04090f}
.video-tile.audio-only video{display:none}
.video-tile .avatar-big{
  width:88px;height:88px;border-radius:50%;display:grid;place-items:center;font-size:2rem;font-weight:800;
  background:linear-gradient(135deg,#3d8ee8,#8b5cf6);color:#fff;
}
.video-tile .v-name{
  position:absolute;left:.6rem;bottom:.6rem;padding:.28rem .65rem;border-radius:9px;
  background:rgba(2,8,16,.78);font-size:.85rem;font-weight:600;display:flex;align-items:center;gap:.35rem;
  max-width:calc(100% - 1.2rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.video-tile .v-badges{position:absolute;right:.6rem;top:.6rem;display:flex;gap:.3rem}
.v-badge{padding:.2rem .45rem;border-radius:7px;background:rgba(2,8,16,.78);font-size:.78rem}
.video-tile.speaking{border-color:#28e0a8;box-shadow:0 0 0 2px rgba(40,224,168,.45),0 0 26px rgba(40,224,168,.25)}

.call-bar{
  display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;padding:1rem;
  border-radius:var(--r-lg);background:var(--glass);border:1px solid var(--stroke);margin-top:1rem;
}
.cbtn{
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:1.25rem;
  background:rgba(255,255,255,.07);border:1px solid var(--stroke);color:var(--text);cursor:pointer;
  transition:all .18s var(--ease);
}
.cbtn:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
.cbtn.on{background:linear-gradient(135deg,#3d8ee8,#6f5cff);border-color:transparent;color:#fff}
.cbtn.off{background:rgba(211,69,63,.22);border-color:rgba(211,69,63,.5);color:#ffb3ae}
.cbtn.hangup{background:linear-gradient(135deg,#e0413a,#8e1e18);border-color:transparent;color:#fff;width:74px;border-radius:28px}
.cbtn[disabled]{opacity:.4;cursor:not-allowed;transform:none}

.ring-modal{
  position:fixed;inset:auto 1.2rem 1.2rem auto;z-index:120;width:min(340px,92vw);
  border-radius:var(--r-lg);padding:1.2rem;background:var(--glass);border:1px solid var(--stroke-hot);
  box-shadow:0 24px 70px rgba(0,0,0,.6);animation:slideUp .3s var(--ease) both;
}
@keyframes slideUp{from{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}
.ring-modal .ring-av{
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-size:1.4rem;font-weight:800;
  background:linear-gradient(135deg,#3d8ee8,#8b5cf6);color:#fff;animation:ringPulse 1.1s ease-in-out infinite;
}
@keyframes ringPulse{0%,100%{box-shadow:0 0 0 0 rgba(90,164,246,.5)}50%{box-shadow:0 0 0 12px rgba(90,164,246,0)}}

.mic-bars{display:flex;align-items:flex-end;gap:2px;height:18px}
.mic-bars i{width:3px;background:var(--neon-3);border-radius:2px;height:20%;transition:height .08s linear}

/* ------------------------------------------------- call overlay window

   A small floating preview of whatever YOU are sending -- camera, screen, or
   both. Browser Picture-in-Picture (see calls.js) covers the case where you
   alt-tab out of the browser entirely; this covers the much more common one,
   where you are still on the call page but scrolled somewhere else, or on a
   different page of the site, and want to keep an eye on what is actually
   going out. It is draggable, remembers where you put it, and never covers
   the call controls by default. */
.call-overlay{
  position:fixed;z-index:130;width:236px;border-radius:14px;overflow:hidden;
  background:rgba(4,10,18,.94);border:1px solid var(--stroke-hot);
  box-shadow:0 18px 50px rgba(0,0,0,.62);backdrop-filter:blur(12px);
  display:none;user-select:none;
}
.call-overlay.show{display:block}
.call-overlay.dragging{opacity:.92;cursor:grabbing}
.call-overlay-head{
  display:flex;align-items:center;gap:.4rem;padding:.34rem .3rem .34rem .6rem;
  cursor:grab;background:rgba(255,255,255,.05);border-bottom:1px solid var(--stroke);
}
.call-overlay-head .co-dot{
  width:7px;height:7px;border-radius:50%;background:#ff5c5c;flex:none;
  animation:coLive 1.6s ease-in-out infinite;
}
@keyframes coLive{0%,100%{opacity:1}50%{opacity:.35}}
.call-overlay-head .co-title{
  font-size:.72rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  color:#cfe4ff;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.call-overlay-head button{
  width:22px;height:22px;border-radius:6px;display:grid;place-items:center;flex:none;
  background:transparent;border:1px solid transparent;color:#8ca0b8;cursor:pointer;
  font-size:.8rem;line-height:1;
}
.call-overlay-head button:hover{background:rgba(255,255,255,.1);color:#e8f0fb}
.call-overlay-head button.active{color:#28e0a8;border-color:rgba(40,224,168,.45)}
.call-overlay-body{position:relative;background:#04090f;aspect-ratio:16/10}
.call-overlay-body video{width:100%;height:100%;object-fit:contain;display:block;background:#04090f}
.call-overlay.min .call-overlay-body{display:none}
.call-overlay-tabs{display:flex;gap:.25rem;padding:.3rem .4rem;border-top:1px solid var(--stroke)}
.call-overlay.min .call-overlay-tabs{display:none}
.call-overlay-tabs button{
  flex:1;padding:.24rem .3rem;border-radius:7px;font-size:.72rem;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid var(--stroke);color:#8ca0b8;
}
.call-overlay-tabs button.active{background:rgba(90,164,246,.22);border-color:rgba(90,164,246,.5);color:#dbe7fb}
@media (max-width:560px){.call-overlay{width:168px}}

/* ------------------------------------------------- who is on the call

   A quiet column of everyone in the call: small avatar, small name. It sits
   at low opacity so it never competes with the video, and each row lifts to
   full strength for as long as that person is actually talking -- which
   makes "who just said that" answerable at a glance without a big speaking
   ring on a tile you might not even be looking at. */
.call-roster{display:flex;flex-direction:column;gap:.3rem}
.call-roster:empty::after{
  content:'Nobody else here yet.';font-size:.76rem;color:var(--muted);opacity:.6;
}
.cr-row{
  display:flex;align-items:center;gap:.5rem;padding:.3rem .45rem;border-radius:10px;
  border:1px solid transparent;
  opacity:.38;filter:saturate(.55);
  transition:opacity .22s var(--ease),filter .22s var(--ease),
             background .22s var(--ease),border-color .22s var(--ease);
}
.cr-row.talking{
  opacity:1;filter:none;
  background:rgba(40,224,168,.1);border-color:rgba(40,224,168,.38);
}
.cr-av{
  width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:.72rem;font-weight:800;color:#fff;overflow:hidden;
  background:linear-gradient(135deg,#3d8ee8,#8b5cf6);
}
.cr-av img{width:100%;height:100%;object-fit:cover;display:block}
.cr-meta{min-width:0;flex:1;line-height:1.15}
.cr-name{
  font-size:.78rem;font-weight:600;color:#e8f0fb;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;
}
.cr-sub{font-size:.66rem;color:var(--muted);display:block}
.cr-icons{display:flex;gap:.2rem;font-size:.7rem;flex:none;opacity:.85}
/* The level meter only has a width worth reading while someone is talking,
   so it doubles as the "who has the floor" indicator. */
.cr-level{
  width:3px;height:22px;border-radius:2px;flex:none;
  background:linear-gradient(to top,#28e0a8 var(--lvl,0%),rgba(255,255,255,.12) var(--lvl,0%));
  transition:background .09s linear;
}

/* The "Get the app" nav item. Tinted rather than shouty: it is the one link
   in the bar that leads off the site's normal flow, so it wants to be
   findable without turning the header into an advert. */
.nav-links a.nav-get-app{
  border:1px solid rgba(40,224,168,.42);
  background:rgba(40,224,168,.09);
  border-radius:999px;padding-inline:.7rem;
}
.nav-links a.nav-get-app:hover{background:rgba(40,224,168,.18);border-color:rgba(40,224,168,.6)}
.nav-links a.nav-get-app span{opacity:.8;font-size:.85em}

/* Download cards. `dl-card` exists so the JS that floats the visitor's own
   platform to the front has something stable to move. */
.dl-card{padding:1.15rem}
.dl-card code{font-size:.82em;word-break:break-word}

/* Member inbox rows in Settings. A row is a real <button> so it is
   keyboard-reachable and announces itself; the grid keeps sender, subject and
   date in stable columns rather than letting a long subject push the date
   off the end. */
.mb-msg{
  display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr) auto;gap:.6rem;align-items:baseline;
  width:100%;text-align:left;padding:.5rem .65rem;border-radius:9px;cursor:pointer;
  background:rgba(255,255,255,.03);border:1px solid var(--stroke);color:var(--text);
  font-size:.82rem;transition:background .15s var(--ease),border-color .15s var(--ease);
}
.mb-msg:hover{background:rgba(255,255,255,.07);border-color:var(--stroke-hot)}
.mb-msg-from,.mb-msg-subject{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-msg-from{color:var(--muted)}
.mb-msg-date{color:var(--muted);font-size:.72rem;white-space:nowrap}
.mb-msg.unread{border-left:3px solid var(--neon-3)}
.mb-msg.unread .mb-msg-subject{font-weight:700;color:#e8f0fb}
@media (max-width:640px){
  .mb-msg{grid-template-columns:1fr;gap:.15rem}
  .mb-msg-date{font-size:.68rem}
}

/* ---------------------------------------------------------------- toast */

.toast-host{position:fixed;right:1.1rem;top:1.1rem;z-index:200;display:grid;gap:.55rem;max-width:min(360px,90vw)}
.toast{
  padding:.8rem 1rem;border-radius:var(--r-md);background:var(--glass);
  border:1px solid var(--stroke-hot);box-shadow:0 16px 44px rgba(0,0,0,.5);
  font-size:.92rem;display:flex;gap:.6rem;align-items:flex-start;
  animation:toastIn .32s var(--ease) both;backdrop-filter:blur(14px);
}
.toast.out{animation:toastOut .3s var(--ease) forwards}
.toast-ok{border-color:rgba(40,224,168,.5)}
.toast-bad{border-color:rgba(211,69,63,.5)}
.toast-xp{border-color:rgba(255,209,102,.5)}
@keyframes toastIn{from{transform:translateX(110%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes toastOut{to{transform:translateX(110%);opacity:0}}

/* ---------------------------------------------------------------- reveal */

.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

.count-up{font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- footer */

.site-footer{
  margin-top:4rem;border-top:1px solid var(--stroke);
  background:linear-gradient(180deg,rgba(6,14,26,.4),rgba(4,9,16,.85));
}
.footer-inner{max-width:1280px;margin:0 auto;padding:3rem 1.1rem 1.6rem;
  display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:2.2rem}
@media (max-width:860px){.footer-inner{grid-template-columns:1fr 1fr;gap:1.6rem}}
@media (max-width:520px){.footer-inner{grid-template-columns:1fr}}
.footer-col h5{margin:0 0 .8rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.14em;color:#8ca0b8}
.footer-col a{display:block;padding:.28rem 0;color:#b0c3da;font-size:.92rem;transition:color .18s var(--ease),transform .18s var(--ease)}
.footer-col a:hover{color:#fff;transform:translateX(3px)}
.footer-about p{color:var(--muted);font-size:.92rem;line-height:1.65;margin:.7rem 0 0;max-width:44ch}
.footer-bottom{
  max-width:1280px;margin:0 auto;padding:1.1rem;border-top:1px solid var(--stroke);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--muted);font-size:.87rem;
}

/* ---------------------------------------------------------------- misc */

.kbd{
  display:inline-block;padding:.14rem .48rem;border-radius:6px;font-size:.82em;font-weight:700;
  background:rgba(255,255,255,.09);border:1px solid var(--stroke);border-bottom-width:2px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.code-block{
  background:rgba(2,7,13,.85);border:1px solid var(--stroke);border-radius:var(--r-md);
  padding:1rem 1.1rem;overflow-x:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.86rem;line-height:1.65;color:#c6dcf5;margin:.7rem 0;
}
.code-block .c{color:#6b8299}
.code-block .s{color:#9ee6c4}
.code-block .k{color:#b98cff}

.table-wrap{overflow-x:auto;border-radius:var(--r-md);border:1px solid var(--stroke)}
table.data{width:100%;border-collapse:collapse;font-size:.91rem;min-width:520px}
table.data th,table.data td{padding:.7rem .9rem;text-align:left;border-bottom:1px solid var(--stroke)}
table.data th{background:rgba(255,255,255,.045);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.07em;color:#9fb4cd}
table.data tr:last-child td{border-bottom:none}
table.data tr:hover td{background:rgba(90,164,246,.06)}
table.data code{color:#9ee6c4;font-size:.9em}

.timeline{position:relative;padding-left:1.9rem}
.timeline::before{content:'';position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg,var(--neon),var(--neon-2),transparent)}
.timeline-item{position:relative;padding-bottom:1.5rem}
.timeline-item::before{content:'';position:absolute;left:-1.9rem;top:5px;width:16px;height:16px;border-radius:50%;
  background:#0a1626;border:3px solid var(--neon);box-shadow:0 0 14px rgba(90,164,246,.6)}
.timeline-item.done::before{background:var(--neon-3);border-color:var(--neon-3)}
.timeline-item h4{margin:0 0 .3rem;font-size:1.02rem}
.timeline-item p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.6}

.avatar{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-weight:800;
  background:linear-gradient(135deg,#3d8ee8,#8b5cf6);color:#fff;flex:0 0 38px;font-size:.98rem;
}
.avatar-sm{width:28px;height:28px;flex-basis:28px;border-radius:9px;font-size:.8rem}

.status-line{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1.05rem;
  border-radius:var(--r-md);background:var(--glass-2);border:1px solid var(--stroke)}
.status-line .sl-left{display:flex;align-items:center;gap:.7rem}
.led{width:10px;height:10px;border-radius:50%;flex:0 0 10px}
.led-ok{background:#28e0a8;box-shadow:0 0 10px #28e0a8}
.led-bad{background:#e0413a;box-shadow:0 0 10px #e0413a}
.led-warn{background:#ffd166;box-shadow:0 0 10px #ffd166}

.split{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
@media (max-width:820px){.split{grid-template-columns:1fr}}

.center-narrow{max-width:560px;margin:0 auto}
.mt-0{margin-top:0}.mt-1{margin-top:.6rem}.mt-2{margin-top:1.2rem}.mt-3{margin-top:2rem}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:.6rem}.mb-2{margin-bottom:1.2rem}.mb-3{margin-bottom:2rem}
.text-c{text-align:center}
.nowrap{white-space:nowrap}
.flex-between{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}


/* ---------------------------------------------------------------- mines */

.mines-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;
  max-width:420px;margin:0 auto;
}
.mine-tile{
  aspect-ratio:1;border-radius:12px;display:grid;place-items:center;
  font-size:1.5rem;cursor:pointer;user-select:none;
  background:linear-gradient(160deg,#1d3f63,#12283f);
  border:1px solid var(--stroke);
  transition:transform .14s var(--ease),background .2s var(--ease),border-color .2s var(--ease);
}
.mine-tile:hover:not(.done){transform:translateY(-2px);border-color:var(--stroke-hot);background:linear-gradient(160deg,#26527f,#16324e)}
.mine-tile:active:not(.done){transform:scale(.95)}
.mine-tile.gem{
  background:linear-gradient(160deg,rgba(40,224,168,.28),rgba(40,224,168,.1));
  border-color:#28e0a8;cursor:default;
  animation:gemPop .32s var(--ease);
}
.mine-tile.bomb{
  background:linear-gradient(160deg,rgba(211,69,63,.4),rgba(211,69,63,.16));
  border-color:#e0413a;cursor:default;
  animation:bombShake .4s var(--ease);
}
.mine-tile.ghost{opacity:.4;cursor:default}
.mine-tile.done{cursor:default}
@keyframes gemPop{0%{transform:scale(.5) rotate(-12deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes bombShake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-5px)}40%{transform:translateX(5px)}
  60%{transform:translateX(-3px)}80%{transform:translateX(3px)}
}

/* ==========================================================================
   Sleek blue/black refresh — overrides and polish layer
   ========================================================================== */

:root{
  color-scheme: dark;
  --bg:#050b14;
  --bg-2:#07111d;
  --panel:#0b1726;
  --panel2:#0f2238;
  --panel3:#122945;
  --line:#1c3552;
  --line-2:#2a5a8a;
  --text:#edf5ff;
  --muted:#93a7bf;

  --blue:#58a6ff;
  --blue-2:#2f7edc;
  --blue-3:#1c4f8f;
  --cyan:#74d8ff;
  --glow:rgba(88,166,255,.28);

  --radius-xl:26px;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;

  --shadow-soft:0 14px 36px rgba(0,0,0,.22);
  --shadow-card:0 24px 70px rgba(0,0,0,.42);
  --shadow-ring:0 0 0 1px rgba(88,166,255,.18), 0 16px 45px rgba(18,62,110,.24);
}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  background:
    radial-gradient(1100px 650px at 12% -10%, rgba(88,166,255,.18), transparent 58%),
    radial-gradient(900px 520px at 88% 8%, rgba(116,216,255,.10), transparent 55%),
    radial-gradient(780px 520px at 50% 110%, rgba(47,126,220,.12), transparent 58%),
    linear-gradient(180deg, #07111d 0%, #050a12 46%, #03070d 100%);
  background-attachment:fixed;
  color:var(--text);
}

::selection{background:rgba(88,166,255,.34);color:#fff}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:rgba(5,10,18,.88)}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#2b5f9c,#183d66);
  border-radius:999px;
  border:2px solid rgba(5,10,18,.92);
}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#3f7bc2,#245486)}

a{color:#9dd0ff}
a:hover{color:#fff}

button,input,textarea,select{
  font:inherit;
}

.hidden{display:none !important}
.muted{color:var(--muted)}
.small{font-size:.92rem}
.center{text-align:center}
.row{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap}

.primary,.tiny,.linkbtn,.tab,.side-btn,.arcade-tab,.kal-tab,.btn,.btn-sm,.btn-lg,.btn-ghost,.btn-danger{
  border-radius:var(--radius-md);
  border:1px solid var(--line);
  color:var(--text);
  background:linear-gradient(180deg, rgba(18,41,69,.96), rgba(11,23,38,.96));
  box-shadow:var(--shadow-soft);
  transition:transform .18s ease, box-shadow .22s ease, border-color .18s ease, background .18s ease, filter .18s ease;
}

.primary:hover,.tiny:hover,.linkbtn:hover,.tab:hover,.side-btn:hover,.arcade-tab:hover,.kal-tab:hover,.btn:hover{
  transform:translateY(-1px);
  border-color:var(--line-2);
  box-shadow:var(--shadow-ring);
}

.primary{
  background:linear-gradient(135deg,#3a86ff 0%, #2467c7 58%, #163f7a 100%);
  border-color:rgba(88,166,255,.55);
  color:#fff;
}

.primary:hover{
  filter:brightness(1.06);
  box-shadow:0 16px 36px rgba(31,88,159,.36);
}

.tiny{padding:.52rem .82rem;border-radius:12px;font-size:.94rem}
.linkbtn{display:inline-flex;align-items:center;text-decoration:none}
.tab,.side-btn{padding:.76rem 1rem}
.tab.active,.side-btn.active,.arcade-tab.active,.kal-tab.active{
  background:linear-gradient(135deg, rgba(58,134,255,.28), rgba(18,41,69,.98));
  border-color:rgba(88,166,255,.42);
  box-shadow:0 0 0 1px rgba(88,166,255,.12) inset, 0 14px 30px rgba(0,0,0,.26);
}

.danger{
  border-color:rgba(236,84,84,.45);
  background:linear-gradient(180deg, rgba(109,28,28,.95), rgba(53,14,14,.95));
  color:#ffd0d0;
}

.auth-shell,.call-shell,.page-shell,.app-shell,.play-shell,.wrap,.wrap-narrow,.footer-inner,.footer-bottom{
  width:min(1280px, calc(100% - 2.2rem));
  margin-inline:auto;
}

.auth-shell{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:1.2rem;
}

.auth-card,.sidebar,.main,.card,.panel,.subcard,.modal,.call-topbar,.topbar,.glass,.site-footer .footer-bottom,.site-footer .footer-inner .footer-col{
  background:rgba(10,20,34,.88) !important;
  backdrop-filter:blur(18px) saturate(135%);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  border:1px solid rgba(88,166,255,.14) !important;
  box-shadow:var(--shadow-card) !important;
}

.auth-card{
  width:min(480px,100%);
  border-radius:28px;
  padding:1.6rem;
}

.auth-card h1{
  margin:.2rem 0 0;
  font-size:clamp(2.2rem, 4vw, 2.8rem);
  letter-spacing:.12rem;
}

.auth-form,.field,.settings-block,.wager-card,.stack,.stack-lg,.split,.grid-two,.grid-3,.grid-4,.grid-auto,.game-grid,.ach-grid,.lb,.notify-list,.chat-log,.list{
  gap:.8rem;
}

.auth-form input,.search,.chat-input,.input,.field input,.field select,.field textarea{
  width:100%;
  border:1px solid rgba(88,166,255,.16);
  background:rgba(4,12,22,.82);
  color:var(--text);
  border-radius:var(--radius-sm);
  padding:.92rem 1rem;
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.auth-form input:focus,.search:focus,.chat-input:focus,.input:focus,.field input:focus,.field select:focus,.field textarea:focus{
  border-color:rgba(88,166,255,.62);
  box-shadow:0 0 0 3px rgba(88,166,255,.16), 0 0 0 1px rgba(88,166,255,.12) inset;
}

.auth-error,.banner.error,.alert-bad,.toast-bad,.status-bad,.user-badge.status-bad{
  background:rgba(215,70,70,.12);
  border-color:rgba(215,70,70,.42);
  color:#ffb1b1;
}

.app-shell{
  display:grid;
  grid-template-columns:280px minmax(0,1fr) 280px;
  gap:1rem;
  min-height:100vh;
  padding:1rem;
  max-width:1280px;
}

.sidebar{
  padding:1rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
  position:sticky;
  top:1rem;
  align-self:start;
  border-radius:28px !important;
}

.brand{
  display:flex;
  gap:.85rem;
  align-items:center;
  padding:.4rem .2rem 1rem;
  border-bottom:1px solid rgba(88,166,255,.12);
}

.logo,.nav-logo,.avatar,.level-badge,.bank-card .bc-chip,.ring-modal .ring-av,.status-line .led,.dot{
  background:linear-gradient(135deg,#3a86ff 0%, #6d5cff 58%, #32d3c8 100%);
}

.logo{
  width:44px;height:44px;border-radius:15px;display:grid;place-items:center;
  color:#fff;font-weight:800;box-shadow:0 0 0 1px rgba(255,255,255,.05), 0 12px 28px rgba(58,134,255,.30);
}

.side-btn{
  width:100%;
  text-align:left;
  background:rgba(255,255,255,.02);
}
.side-btn:hover{background:rgba(88,166,255,.10)}
.side-btn.active{color:#fff}

.main{
  display:grid;
  grid-template-rows:auto 1fr;
  border-radius:28px !important;
}

.topbar,.call-topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding:1rem 1.1rem;
  border-radius:28px !important;
  margin-bottom:1rem;
}

.tabs,.top-actions,.hero-cta,.hero-note,.card-head,.panel-head,.hud-actions,.overlay-actions,.call-bar,.row,.settings-row,.card-row,.badge-row,.checkline{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  align-items:center;
}

.content{display:none;padding:0 0 1rem}
.content.active{display:block}
.card{margin-bottom:1rem}
.panel,.card,.subcard,.item,.msg,.notify,.banner,.status-line,.alert,.acc,.table-wrap,.video-tile,.game-tile,.mine-tile,.lb-row,.ach,.toast,.copy-row,.kal-pill,.bank-card,.ring-modal,.save-gate{
  border-radius:var(--radius-lg) !important;
}

.panel,.card,.subcard{padding:1rem}
.item,.msg,.notify,.banner,.status-line,.alert,.copy-row,.toast,.lb-row{
  background:rgba(255,255,255,.03) !important;
  border:1px solid rgba(88,166,255,.12) !important;
}

.item:hover,.notify:hover,.lb-row:hover,.game-tile:hover,.ach:hover,.video-tile:hover{
  border-color:rgba(88,166,255,.38) !important;
}

.list{max-height:48vh;overflow:auto}
.chat-log{min-height:380px;max-height:58vh;overflow:auto;display:grid;padding:.4rem 0 1rem}
.chat-input{min-height:120px;resize:vertical}

.msg .meta,.stat-label,.subtle-note,.g-tag,.g-best,.footer-about p,.acc-body,.muted,.settings-label,.hint,.stat .l,.lb-empty{
  color:var(--muted);
}

.status-pill,.user-badge,.chip,.badge,.kbd,.pb-flash{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  border-radius:999px;
  border:1px solid rgba(88,166,255,.16);
  background:rgba(255,255,255,.03);
  color:#d7e9ff;
}

.status-ok,.user-badge.status-ok,.alert-ok,.toast-ok,.led-ok{
  border-color:rgba(40,224,168,.38);
  color:#bfffe6;
}
.status-warn,.user-badge.status-warn,.alert-warn,.toast-xp,.led-warn{
  border-color:rgba(255,209,102,.36);
  color:#ffe5a6;
}

.meter,.loading-bar,.xp-bar{
  height:12px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(88,166,255,.12);
  overflow:hidden;
}

.meter-fill,.loading-bar-fill,.xp-fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#2f7edc,#58a6ff,#74d8ff);
  transition:width .18s linear;
}

.loading-bar-fill{width:40%;animation:loading-slide 1.1s ease-in-out infinite}
@keyframes loading-slide{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}

.gradient-text,.hero h1,.hero .gradient-text,.stat .n,.stat-value,.crash-display,.arcade-balance-big,.overlay-score{
  background:linear-gradient(120deg,#9dd0ff 0%, #58a6ff 34%, #7e8cff 68%, #74d8ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

.hero{
  position:relative;
  padding:4.5rem 0 3.4rem;
  overflow:hidden;
}

.hero-inner{
  display:grid;
  grid-template-columns:1.06fr .94fr;
  gap:3rem;
  align-items:center;
}

.hero h1{
  font-size:clamp(2.3rem, 5.6vw, 4.2rem);
  line-height:1.04;
  margin:.4rem 0 1rem;
  letter-spacing:-.02em;
  font-weight:800;
}

.hero-sub,.section-head p,.overlay-card p,.save-gate p{
  font-size:1.03rem;
  color:#afc4dc;
  line-height:1.7;
}

.badge,.chip,.user-badge{
  padding:.35rem .75rem;
  font-size:.82rem;
  font-weight:600;
  background:rgba(88,166,255,.09);
}

.badge-green{background:rgba(40,224,168,.10);border-color:rgba(40,224,168,.28);color:#bfffe6}
.badge-purple{background:rgba(126,140,255,.12);border-color:rgba(126,140,255,.30);color:#ddd8ff}
.badge-pink{background:rgba(255,92,138,.10);border-color:rgba(255,92,138,.26);color:#ffd4e0}
.badge-amber{background:rgba(58,134,255,.12);border-color:rgba(88,166,255,.25);color:#d7ebff}

.hero-art{
  position:relative;
  min-height:340px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.9rem;
  align-content:center;
}

.art-tile,.game-tile,.ach,.video-tile,.bank-card,.ring-modal,.save-gate,.toast,.acc,.timeline-item::before{
  box-shadow:var(--shadow-soft);
}

.art-tile{
  min-height:104px;
  padding:1.1rem;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(88,166,255,.10);
  animation:float 6s ease-in-out infinite;
}
.art-tile .ico{font-size:1.7rem;line-height:1}
.art-tile .nm{font-weight:700;font-size:.95rem}
.art-tile .sc{color:var(--muted);font-size:.82rem}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

.stat-strip,.game-grid,.grid-3,.grid-4,.grid-auto,.ach-grid,.video-grid,.call-layout,.play-shell,.split,.grid-two,.footer-inner,.lb{
  display:grid;
  gap:1rem;
}

.stat{
  text-align:center;
  padding:1.25rem 1rem;
  border-radius:var(--radius-lg);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(88,166,255,.12);
}

.stat .n{font-size:2.1rem;font-weight:800;line-height:1}

.game-tile{
  position:relative;
  padding:1.2rem;
  background:rgba(12,22,36,.96);
  border:1px solid rgba(88,166,255,.12);
  overflow:hidden;
  color:var(--text);
}

.game-tile::before{
  content:'';
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:linear-gradient(90deg,var(--tile-accent,#58a6ff),transparent);
}
.game-tile::after{
  content:'';
  position:absolute;
  width:220px;height:220px;right:-90px;top:-90px;border-radius:50%;
  background:radial-gradient(circle, var(--tile-accent,#58a6ff), transparent 66%);
  opacity:.09;
  transition:opacity .35s ease,transform .5s ease;
}
.game-tile:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(0,0,0,.44)}
.game-tile:hover::after{opacity:.18;transform:scale(1.28)}
.game-tile .g-ico{font-size:2.5rem;line-height:1}
.game-tile .g-tag{line-height:1.55}
.game-tile .g-foot{border-top:1px solid rgba(88,166,255,.12);padding-top:.75rem}

.btn{cursor:pointer;overflow:hidden;position:relative;text-align:center}
.btn::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);
  transform:translateX(-130%);
  transition:transform .6s ease;
}
.btn:hover::after{transform:translateX(130%)}
.btn:active,.primary:active,.tiny:active,.linkbtn:active,.tab:active,.side-btn:active,.arcade-tab:active,.kal-tab:active{transform:translateY(0) scale(.985)}
.btn:focus-visible,.primary:focus-visible,.tiny:focus-visible,.linkbtn:focus-visible,.tab:focus-visible,.side-btn:focus-visible,.arcade-tab:focus-visible,.kal-tab:focus-visible{
  outline:2px solid rgba(88,166,255,.9);
  outline-offset:3px;
}

.btn-primary{
  background:linear-gradient(135deg,#3a86ff 0%, #5a64ff 55%, #6d5cff 100%);
  border-color:transparent;
  color:#fff;
}
.btn-ghost{background:rgba(255,255,255,.04)}
.btn-danger{background:linear-gradient(135deg,#9e2f2f,#611818);border-color:transparent;color:#fff}
.btn-play{background:linear-gradient(135deg,#1bb3a8,#16a34a);border-color:transparent;color:#fff}
.btn[disabled],.btn:disabled{opacity:.45;cursor:not-allowed;transform:none !important}

.table-wrap{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid rgba(88,166,255,.12)}
table.data{width:100%;border-collapse:collapse;font-size:.91rem;min-width:520px}
table.data th,table.data td{padding:.7rem .9rem;text-align:left;border-bottom:1px solid rgba(88,166,255,.12)}
table.data th{background:rgba(255,255,255,.04);text-transform:uppercase;letter-spacing:.07em;color:#b0c6df}
table.data tr:hover td{background:rgba(88,166,255,.06)}

.field{display:grid;gap:.4rem;margin-bottom:.95rem}
.field label{font-size:.88rem;color:#b6c8de;font-weight:600}
.field .hint,.code-block .c,.g-best,.lb-empty{color:var(--muted)}
.field textarea{min-height:140px;resize:vertical;line-height:1.6;font-family:inherit}

.alert,.banner,.copy-row,.status-line,.save-gate,.call-bar,.play-stage,.play-hud,.ring-modal,.toast{
  background:rgba(10,20,34,.82);
  border:1px solid rgba(88,166,255,.12);
}

.alert-ok,.banner:not(.error),.status-ok,.toast-ok{
  background:rgba(40,224,168,.08);
}
.alert-warn,.toast-xp{
  background:rgba(58,134,255,.08);
}
.alert-info{
  background:rgba(88,166,255,.08);
}

.accordion,.acc{
  border:1px solid rgba(88,166,255,.12);
  background:rgba(255,255,255,.03);
}
.acc summary:hover{background:rgba(88,166,255,.07)}
.acc[open] summary{background:rgba(88,166,255,.07)}

.kal-pill{
  color:#dcedff;
  background:linear-gradient(135deg, rgba(58,134,255,.14), rgba(109,92,255,.12));
  border-color:rgba(88,166,255,.28);
}
.kal-pill:hover{box-shadow:0 10px 24px rgba(88,166,255,.18)}
.kal-pill.up,.kal-pill.down{animation:none}

.bank-card{
  background:linear-gradient(135deg,#0f2238 0%, #102a47 46%, #081522 100%) !important;
  border-color:rgba(88,166,255,.28) !important;
}
.bank-card::after{
  background:radial-gradient(circle, rgba(88,166,255,.22), transparent 68%);
}

.mic-bars i{background:var(--cyan)}

.toast-host{
  position:fixed;
  right:1.1rem;
  top:1.1rem;
  z-index:200;
  display:grid;
  gap:.55rem;
  max-width:min(360px,90vw);
}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

.site-footer{
  margin-top:4rem;
  border-top:1px solid rgba(88,166,255,.12);
  background:linear-gradient(180deg, rgba(6,13,22,.4), rgba(4,8,14,.9));
}

.footer-col h5,.eyebrow{
  color:#8fbaf0;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.78rem;
  font-weight:700;
}

.footer-col a:hover{transform:translateX(2px);color:#fff}

@media (max-width:1100px){
  .app-shell,.call-grid,.hero-inner,.play-shell,.call-layout,.footer-inner,.grid-two,.split{
    grid-template-columns:1fr;
  }
  .sidebar{position:relative;top:0}
  .dm-grid .card:last-child{grid-column:auto}
}

@media (max-width:700px){
  .topbar,.call-topbar{flex-direction:column;align-items:stretch}
  .app-shell,.call-shell,.page-shell,.play-shell,.wrap,.wrap-narrow{width:min(100%, calc(100% - 1rem));padding-inline:0}
  .tabs,.row,.top-actions,.hero-cta,.overlay-actions,.overlay-card .row{width:100%}
  .tabs .tab,.row > *,.top-actions > *, .hero-cta > *, .overlay-actions > *{width:100%}
}

/* ==========================================================================
   Shop -- product grid, product cards, size/colour chips, order tracking.

   Fixed three-per-row grid (two under 900px, one under 560px) and every
   image cropped into the same 4:5 frame with object-fit:cover, so a tall
   poster and a square sticker line up in the same row instead of warping
   the grid to whatever shape each photo happens to be.
   ========================================================================== */

.product-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.3rem;
}
@media (max-width:900px){.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.product-grid{grid-template-columns:1fr}}

.product-card{
  display:flex;flex-direction:column;overflow:hidden;padding:0;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease);
}
.product-card:hover{transform:translateY(-5px);border-color:var(--stroke-hot);box-shadow:0 26px 60px rgba(0,0,0,.5)}
.product-card.is-test{opacity:.82}
.product-card.is-sold-out .product-media{filter:grayscale(.55) brightness(.75)}

.product-media{
  position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;
  background:var(--glass-2);border-bottom:1px solid var(--stroke);
}
.product-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.product-media .no-image{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:2.6rem;opacity:.35;
}
.product-badges{position:absolute;top:.6rem;left:.6rem;right:.6rem;display:flex;gap:.4rem;flex-wrap:wrap;z-index:2}
.product-badge{
  font-size:.72rem;font-weight:700;padding:.25rem .55rem;border-radius:999px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.18);color:#fff;background:rgba(20,32,50,.72);
}
.product-badge.test{background:rgba(255,209,102,.3);border-color:rgba(255,209,102,.6);color:#ffe6ad}
.product-badge.sold{background:rgba(211,69,63,.34);border-color:rgba(211,69,63,.62);color:#ffb3ae}
.product-badge.stock{background:rgba(90,164,246,.3);border-color:rgba(90,164,246,.6);color:#cfe4ff}

.product-body{display:flex;flex-direction:column;gap:.55rem;padding:1.1rem 1.2rem 1.3rem;flex:1}
.product-body h3{margin:0;font-size:1.08rem;line-height:1.3}
.product-desc{
  margin:0;color:var(--muted);font-size:.88rem;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.product-price{font-size:1.15rem;font-weight:800;color:#9ec9ff}

.size-row{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:.15rem 0}
.size-label{font-size:.76rem;color:var(--muted);min-width:3.6rem;text-transform:uppercase;letter-spacing:.05em}
.size-opt{position:relative;cursor:pointer;display:inline-flex}
.size-opt input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.size-opt span{
  display:inline-flex;align-items:center;justify-content:center;min-width:2.3rem;padding:.3rem .55rem;
  border-radius:9px;border:1px solid var(--stroke);background:var(--glass-2);font-size:.82rem;font-weight:600;
  transition:border-color .18s var(--ease),background .18s var(--ease),color .18s var(--ease);
}
.size-opt input:checked + span{border-color:var(--neon);background:rgba(90,164,246,.24);color:#fff}
.size-opt input:focus-visible + span{outline:2px solid var(--neon);outline-offset:1px}
.size-row.size-missing .size-label{color:#ffb3ae;animation:sizeFlash .4s ease 2}
@keyframes sizeFlash{50%{color:#ff8079}}

.product-note{margin:.1rem 0 0;font-size:.8rem;color:var(--muted)}
.product-note.warn{color:#ffe6ad}
.product-actions{margin-top:auto;display:flex;flex-direction:column;gap:.4rem;padding-top:.3rem}

/* -------------------------------------------------------- order tracking */

.order-steps{list-style:none;margin:1.1rem 0 0;padding:0;display:flex;flex-direction:column}
.order-steps .step{position:relative;display:flex;gap:.8rem;padding:0 0 1.4rem .1rem}
.order-steps .step:last-child{padding-bottom:0}
.order-steps .step::before{
  content:'';position:absolute;left:14px;top:30px;bottom:-2px;width:2px;background:var(--stroke);
}
.order-steps .step:last-child::before{display:none}
.order-steps .step.done::before{background:var(--neon-3)}
.step-dot{
  flex:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--glass-2);border:1px solid var(--stroke);font-size:.82rem;font-weight:700;color:var(--muted);
  z-index:1;
}
.order-steps .step.done .step-dot{background:rgba(40,224,168,.24);border-color:var(--neon-3);color:#9df5cf}
.order-steps .step.current .step-dot{background:var(--neon);border-color:var(--neon);color:#04101f}
.step-text{padding-top:.15rem}

/* -------------------------------------------------------------- playing cards */

.playing-card{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.7rem;height:3.7rem;margin:.15rem;border-radius:8px;
  background:linear-gradient(160deg,#f4f8ff,#dbe7fb);color:#0d1b2a;
  font-weight:800;font-size:1.08rem;letter-spacing:.02em;
  box-shadow:0 4px 12px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.6);
}
.playing-card.red{color:#c62839}
.playing-card.black{color:#151d27}

/* ------------------------------------------------------- call-return pill */

#call-return-pill{
  position:fixed;left:1rem;bottom:1rem;z-index:9000;
  display:none;align-items:center;gap:.6rem;
  padding:.55rem .65rem .55rem 1rem;border-radius:999px;
  background:var(--glass);backdrop-filter:blur(14px) saturate(130%);-webkit-backdrop-filter:blur(14px) saturate(130%);
  border:1px solid var(--stroke-hot);box-shadow:var(--shadow-lg);
  font-size:.86rem;color:var(--text);
}
#call-return-pill.show{display:flex}
#call-return-pill .crp-dot{
  width:9px;height:9px;border-radius:50%;background:var(--neon-3);flex:none;
  box-shadow:0 0 0 0 rgba(40,224,168,.6);animation:ping 2.1s ease-out infinite;
}
#call-return-pill .crp-label{font-weight:600;white-space:nowrap;max-width:34vw;overflow:hidden;text-overflow:ellipsis}
#call-return-pill .crp-btn{
  border:none;border-radius:999px;padding:.35rem .8rem;font-size:.8rem;font-weight:700;cursor:pointer;
  background:linear-gradient(120deg,var(--neon),var(--neon-2));color:#04101f;
}
@media (max-width:560px){
  #call-return-pill{left:.6rem;right:.6rem;bottom:.6rem}
  #call-return-pill .crp-label{max-width:none;flex:1}
}

/* -------------------------------------------------------- full-game cards */

.full-game-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.2rem}
.game-tile-full{padding:1.6rem}
.game-tile-full .g-ico{font-size:3rem}
.game-tile-full h3{font-size:1.4rem}

/* The tile shows `short_blurb` (see media_platform/store.py), which is written
   to fit. The clamp is a backstop, not the plan: if somebody later writes a
   long short_blurb, the grid keeps its shape instead of one card growing to
   three times the height of the one beside it and dragging the whole row with
   it. line-clamp needs the -webkit- prefixed properties even in 2026 -- the
   unprefixed spec version is still not what browsers actually implement. */
.game-tile-full .g-blurb{
  color:var(--muted);font-size:.92rem;line-height:1.6;margin:.1rem 0 0;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;
  overflow:hidden;
}
/* Give the row a shared floor so two cards with different amounts of text
   still line their footers up. */
.full-game-grid .game-tile-full{align-content:start}
.game-tile-full .g-controls{font-size:.8rem;color:var(--muted);margin:0;padding-top:.1rem}
.game-tile-full .g-controls b{color:var(--text)}
@media (max-width:560px){
  .full-game-grid{grid-template-columns:1fr}
  .game-tile-full{padding:1.15rem}
  .game-tile-full h3{font-size:1.2rem}
  .game-tile-full .g-ico{font-size:2.3rem}
  /* Less room on a phone, so less text -- the tagline above it is already
     doing the job of "what is this". */
  .game-tile-full .g-blurb{-webkit-line-clamp:3;font-size:.86rem}
}

/* ==========================================================================
   Email verification, password reset and the 4-digit code entry.
   ========================================================================== */

/* ---- step indicator ---- */
.auth-steps{display:flex;align-items:center;justify-content:center;gap:.55rem}
.auth-step{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;flex:none;
  border:1px solid var(--stroke);background:rgba(255,255,255,.03);
  font-size:.82rem;font-weight:700;color:var(--muted);
  transition:background .25s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease;
}
.auth-step i{
  position:absolute;top:calc(100% + .3rem);left:50%;transform:translateX(-50%);
  font-style:normal;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;
}
.auth-step.on{
  background:linear-gradient(120deg,var(--neon),var(--neon-2));border-color:transparent;color:#04101f;
  box-shadow:0 0 0 4px rgba(90,164,246,.14);
}
.auth-step.on i{color:var(--text)}
.auth-step.done{border-color:rgba(40,224,168,.55);color:var(--neon-3);background:rgba(40,224,168,.09)}
.auth-step-line{flex:0 0 46px;height:2px;border-radius:2px;background:var(--stroke)}
.auth-steps{margin-bottom:1.9rem}

/* ---- the 4-digit code boxes ----
   Big, widely spaced, monospace. A code field that looks like a normal text
   input gets typed into like a normal text input; this shape tells you
   without words that it wants exactly four digits. */
.code-box{display:flex;gap:.6rem;justify-content:center;margin:.4rem 0 .2rem}
.code-box input{
  width:clamp(52px,15vw,64px);height:clamp(60px,17vw,72px);
  text-align:center;font-size:clamp(1.5rem,5vw,1.9rem);font-weight:700;
  font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
  color:var(--text);caret-color:var(--neon);
  background:rgba(255,255,255,.035);border:1px solid var(--stroke);border-radius:14px;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
  /* Stops iOS zooming the whole page when one of these takes focus. */
  -webkit-text-size-adjust:100%;
}
.code-box input:focus{
  outline:none;border-color:var(--neon);background:rgba(90,164,246,.09);
  box-shadow:0 0 0 4px rgba(90,164,246,.16);
}
.code-box input:disabled{opacity:.55}
/* Chrome/Safari draw spinner arrows on numeric inputs; they are useless here. */
.code-box input::-webkit-outer-spin-button,
.code-box input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ---- "waiting for you" strip ---- */
.live-wait{
  display:flex;align-items:flex-start;gap:.65rem;margin-top:1rem;padding:.8rem .9rem;
  border:1px solid rgba(90,164,246,.3);border-radius:12px;background:rgba(90,164,246,.07);
  font-size:.85rem;line-height:1.55;color:var(--muted);
}
.live-wait.done{border-color:rgba(40,224,168,.42);background:rgba(40,224,168,.09)}
.live-wait.hidden{display:none}
.live-wait .lw-dot{
  width:10px;height:10px;border-radius:50%;background:var(--neon);flex:none;margin-top:.32rem;
  box-shadow:0 0 0 0 rgba(90,164,246,.6);animation:ping 1.9s ease-out infinite;
}
.live-wait .lw-tick{color:var(--neon-3);font-size:1.1rem;line-height:1.3;flex:none}
@media (prefers-reduced-motion:reduce){.live-wait .lw-dot{animation:none}}

/* ---- verification result page ---- */
.verify-mark{
  width:74px;height:74px;margin:0 auto;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:2.4rem;font-weight:700;line-height:1;
}
.verify-mark.ok{
  background:rgba(40,224,168,.13);border:1px solid rgba(40,224,168,.45);color:var(--neon-3);
  box-shadow:0 0 34px rgba(40,224,168,.2);
}
.verify-mark.bad{
  background:rgba(255,138,92,.12);border:1px solid rgba(255,138,92,.45);color:#ff8a5c;
}
.text-l{text-align:left}

/* ---- email row on the settings page ---- */
.email-state{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding:.7rem .85rem;border:1px solid var(--stroke);border-radius:12px;
  background:rgba(255,255,255,.025);
}
.email-state .es-badge{
  font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:.22rem .5rem;border-radius:999px;flex:none;
}
.email-state .es-badge.ok{background:rgba(40,224,168,.16);color:var(--neon-3)}
.email-state .es-badge.none{background:rgba(255,138,92,.16);color:#ff8a5c}
.email-state .es-addr{font-weight:600;color:var(--text);word-break:break-all;flex:1;min-width:0}

/* ==========================================================================
   Arcade -- touch controls, the rotate gate and the first-run guide.

   All of it lives inside .canvas-wrap and is absolutely positioned over the
   canvas, so a game never has to know it is there. On a device with no touch
   support none of this is ever created in the first place.
   ========================================================================== */

/* ---------------------------------------------------------- rotate gate */
.rotate-gate{
  position:absolute;inset:0;z-index:30;
  display:flex;align-items:center;justify-content:center;padding:1.2rem;
  background:rgba(4,8,15,.94);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  text-align:center;
}
.rotate-gate.hidden{display:none}
.rotate-gate .rg-card{max-width:340px}
.rotate-gate h3{margin:.9rem 0 .4rem;font-size:1.15rem;color:var(--text)}
.rotate-gate .rg-sub{margin:0 0 .9rem;font-size:.88rem;line-height:1.55;color:var(--muted)}
.rotate-gate .btn{margin:.3rem .2rem 0}

/* A little phone that tips onto its side, once every couple of seconds. It
   says "rotate" faster than the sentence underneath it does. */
.rg-phone{
  width:52px;height:86px;margin:0 auto;border-radius:10px;
  border:2.5px solid var(--neon);position:relative;
  animation:rg-tip 2.4s ease-in-out infinite;
}
.rg-phone span{
  position:absolute;left:50%;bottom:5px;transform:translateX(-50%);
  width:16px;height:3px;border-radius:2px;background:var(--neon);opacity:.7;
}
@keyframes rg-tip{
  0%,30%{transform:rotate(0deg)}
  55%,85%{transform:rotate(-90deg)}
  100%{transform:rotate(0deg)}
}
@media (prefers-reduced-motion:reduce){.rg-phone{animation:none;transform:rotate(-90deg)}}

.rotate-gate .rg-lock{
  margin:.2rem 0 .6rem;padding:.7rem .8rem;border-radius:10px;
  border:1px solid rgba(255,138,92,.4);background:rgba(255,138,92,.1);
  font-size:.82rem;line-height:1.55;color:var(--muted);text-align:left;
}
.rotate-gate .rg-lock b{color:#ffb894;display:block;margin-bottom:.25rem}
.rotate-gate .rg-lock p{margin:0}
.rotate-gate .rg-lock.hidden{display:none}
.rotate-gate .hidden{display:none}

/* ------------------------------------------------------- touch controls */
.touch-controls{
  position:absolute;inset:0;z-index:20;
  /* The container itself must not eat taps -- only its children do. A game
     that also wants canvas taps (menus, buttons drawn in-game) keeps them. */
  pointer-events:none;
  touch-action:none;
}
.touch-controls .tc-zone{
  position:absolute;top:0;bottom:0;width:46%;
  pointer-events:auto;touch-action:none;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
}
.touch-controls .tc-move{left:0}
.touch-controls .tc-look{right:0}

/* The stick is drawn where the thumb lands, not at a fixed corner. */
.touch-controls .tc-stick{
  position:absolute;width:112px;height:112px;margin:-56px 0 0 -56px;
  border-radius:50%;border:2px solid rgba(255,255,255,.22);
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.09),rgba(255,255,255,.02) 70%);
  opacity:0;transition:opacity .16s ease;pointer-events:none;
}
.touch-controls .tc-stick.on{opacity:1}
.touch-controls .tc-stick-nub{
  position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;
  border-radius:50%;background:rgba(255,255,255,.3);
  border:2px solid rgba(255,255,255,.5);box-shadow:0 2px 14px rgba(0,0,0,.4);
}

.touch-controls .tc-btn{
  position:absolute;pointer-events:auto;touch-action:none;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;border:2px solid rgba(255,255,255,.28);
  background:rgba(10,20,34,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  color:#eaf2ff;font-weight:700;line-height:1;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
  transition:transform .08s ease,background .08s ease,border-color .08s ease;
}
.touch-controls .tc-btn.held{
  transform:scale(.92);background:rgba(90,164,246,.42);border-color:rgba(140,200,255,.8);
}
.touch-controls .tc-btn-sm{width:48px;height:48px;font-size:.72rem}
.touch-controls .tc-btn-md{width:62px;height:62px;font-size:.82rem}
.touch-controls .tc-btn-lg{width:84px;height:84px;font-size:1rem}

/* ---------------------------------------------------- first-run guide */
.touch-hint{
  position:absolute;inset:0;z-index:40;
  opacity:0;transition:opacity .26s ease;
  background:rgba(4,8,15,.78);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
}
.touch-hint.in{opacity:1}
.touch-hint .th-regions{position:absolute;inset:0}
.touch-hint .th-region{
  position:absolute;top:0;bottom:0;width:46%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;
  border:2px dashed rgba(255,255,255,.28);border-radius:16px;margin:.5rem;
  text-align:center;padding:.6rem;
}
.touch-hint .th-left{left:0;background:rgba(90,164,246,.12);border-color:rgba(90,164,246,.5)}
.touch-hint .th-right{right:0;background:rgba(185,140,255,.12);border-color:rgba(185,140,255,.5)}
.touch-hint .th-ico{font-size:1.6rem;line-height:1}
.touch-hint .th-region b{font-size:1rem;color:#fff}
.touch-hint .th-region i{font-style:normal;font-size:.76rem;line-height:1.4;color:rgba(234,242,255,.8);max-width:15ch}

.touch-hint .th-card{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(300px,64%);padding:1rem 1.1rem;border-radius:16px;text-align:center;
  background:rgba(8,16,28,.94);border:1px solid var(--stroke-hot);box-shadow:var(--shadow-lg);
}
.touch-hint .th-card h4{margin:0 0 .5rem;font-size:.98rem;color:var(--text)}
.touch-hint .th-list{list-style:none;margin:0 0 .6rem;padding:0;text-align:left}
.touch-hint .th-list li{
  font-size:.8rem;line-height:1.5;color:var(--muted);
  display:flex;align-items:center;gap:.45rem;margin-bottom:.3rem;
}
.touch-hint .th-key{
  flex:none;min-width:30px;height:30px;padding:0 .35rem;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1.5px solid rgba(255,255,255,.3);background:rgba(255,255,255,.06);
  color:#eaf2ff;font-size:.72rem;font-weight:700;
}
.touch-hint .th-extra{font-size:.78rem;line-height:1.5;color:var(--muted);margin:0 0 .6rem}
.touch-hint .th-again{font-size:.7rem;color:var(--muted);margin:.5rem 0 0}

/* Landscape phones are short. Shrink everything that would otherwise push
   the "Got it" button off the bottom of a 375px-tall viewport. */
@media (max-height:460px){
  .touch-hint .th-card{width:min(340px,72%);padding:.7rem .8rem}
  .touch-hint .th-card h4{font-size:.86rem;margin-bottom:.35rem}
  .touch-hint .th-list li{font-size:.72rem;margin-bottom:.18rem}
  .touch-hint .th-key{min-width:24px;height:24px;font-size:.64rem}
  .touch-hint .th-again{display:none}
  .touch-hint .th-region i{display:none}
  .touch-controls .tc-btn-lg{width:66px;height:66px}
  .touch-controls .tc-btn-md{width:52px;height:52px}
  .rotate-gate .rg-card{max-width:420px}
  .rg-phone{width:34px;height:56px}
}

/* Fullscreen: the stage becomes the whole screen, so the canvas has to grow
   into it rather than keeping its page-sized aspect box. */
.play-stage:fullscreen,
.play-stage:-webkit-full-screen{
  width:100vw;height:100vh;border-radius:0;border:none;padding:0;
  display:flex;flex-direction:column;background:#02060b;
}
.play-stage:fullscreen .canvas-wrap,
.play-stage:-webkit-full-screen .canvas-wrap{flex:1;aspect-ratio:auto;height:auto;min-height:0;border-radius:0}
.play-stage:fullscreen canvas,
.play-stage:-webkit-full-screen canvas{width:100%;height:100%}
.play-stage:fullscreen .play-hud,
.play-stage:-webkit-full-screen .play-hud{padding:.3rem .6rem;font-size:.8rem;flex:none}
.play-stage:fullscreen .mobile-pad,
.play-stage:-webkit-full-screen .mobile-pad{display:none}

/* Hidden while a game is showing its own in-canvas menu. display:none rather
   than opacity so the zones stop intercepting taps entirely. */
.touch-controls.off{display:none}

/* --------------------------------------------------------- hero headline
   The H1 now leads with the brand name (it has to -- see the comment in
   templates/index.html). The tagline that follows it is longer than the
   brand, so at the H1's full clamp size it would wrap awkwardly and pull
   focus off the word that matters. Scaling the second line down keeps
   "KoulaChat" as the thing your eye lands on, and reads as a headline with
   a tagline rather than two competing lines. */
.hero h1 .gradient-text{
  display:block;
  font-size:.46em;
  line-height:1.22;
  letter-spacing:-.01em;
  margin-top:.35rem;
}
@media (max-width:600px){
  .hero h1 .gradient-text{font-size:.52em}
}

/* The "KoulaChat basics" FAQ block on the support page. Two columns where
   there is room, one where there is not -- five questions in a single column
   pushes the rest of the page a long way down. */
.faq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:.6rem 1.2rem;align-items:start}

/* Status chips in the admin mail panel. The three states map to the only
   three answers that matter: it works, it works but will not be delivered
   well, it cannot work. */
.chip-ok{background:rgba(40,224,168,.16);color:#28e0a8;border-color:rgba(40,224,168,.4)}
.chip-warn{background:rgba(255,209,102,.16);color:#ffd166;border-color:rgba(255,209,102,.4)}
.chip-bad{background:rgba(255,92,92,.16);color:#ff7a7a;border-color:rgba(255,92,92,.4)}
#mail-card .data code{font-size:.82rem;word-break:break-all}
#mail-card .data th{white-space:nowrap;vertical-align:top}
#mail-card details summary{cursor:pointer}