:root{
  --ink:#2e3550;
  --ink-strong:#222942;
  --muted:#707991;
  --white:#ffffff;
  --panel:rgba(255,255,255,.78);
  --panel-strong:rgba(255,255,255,.9);
  --border:rgba(255,255,255,.88);
  --pink:#ff9dce;
  --pink-soft:#ffd7ec;
  --lav:#c8b8ff;
  --lav-soft:#eee8ff;
  --blue:#9edfff;
  --blue-soft:#dff4ff;
  --mint:#aeeed8;
  --mint-soft:#dcfaef;
  --yellow:#ffe494;
  --yellow-soft:#fff5c8;
  --coin:#f3b62f;
  --danger:#ff718e;
  --success:#54bb82;
  --shadow-soft:0 12px 34px rgba(96,111,164,.14);
  --shadow-card:0 9px 24px rgba(94,111,161,.12);
  --shadow-button:0 9px 18px rgba(131,121,206,.18);
  --radius-xl:28px;
  --radius-lg:22px;
  --radius-md:16px;
  --header-h:70px;
}

*{box-sizing:border-box}
html{background:#f8fbff;-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  font-family:ui-rounded,"Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,system-ui,sans-serif;
  font-weight:700;
  background:
    radial-gradient(circle at 10% 8%,rgba(255,157,206,.35) 0,transparent 24rem),
    radial-gradient(circle at 92% 12%,rgba(158,223,255,.38) 0,transparent 26rem),
    radial-gradient(circle at 80% 82%,rgba(174,238,216,.34) 0,transparent 25rem),
    radial-gradient(circle at 14% 88%,rgba(200,184,255,.32) 0,transparent 23rem),
    linear-gradient(180deg,#fbfdff 0%,#f7f9ff 52%,#f5faff 100%);
  padding-top:calc(var(--header-h) + 24px);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 22% 24%,rgba(255,255,255,.9) 0 1px,transparent 1.5px),
    radial-gradient(circle at 72% 30%,rgba(255,255,255,.86) 0 1px,transparent 1.5px),
    radial-gradient(circle at 45% 68%,rgba(255,255,255,.82) 0 1px,transparent 1.5px);
  background-size:86px 86px,110px 110px,132px 132px;
  opacity:.55;
  z-index:-1;
}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{touch-action:manipulation}
img{max-width:100%;display:block}

/* Shared aurora surface */
.glass-surface,
.profile-hero,
.login-card,
.profile-editor,
.payout-card,
.title-card,
.admin-panel,
.game-card{
  background:var(--panel);
  border:1px solid var(--border);
  box-shadow:var(--shadow-card);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

/* Fixed player header */
.topbar{
  position:fixed;
  top:10px;
  left:10px;
  right:10px;
  z-index:1000;
  height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:23px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.topbar::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  background:linear-gradient(120deg,rgba(255,215,236,.42),rgba(238,232,255,.4) 40%,rgba(223,244,255,.45) 72%,rgba(220,250,239,.35));
}
.topbar-user{display:flex;align-items:center;gap:9px;min-width:0;flex:1}
.avatar{
  width:44px;height:44px;flex:0 0 44px;border-radius:16px;object-fit:cover;
  border:2px solid rgba(255,255,255,.96);
  background:#fff;
  box-shadow:0 5px 14px rgba(105,119,167,.16)
}
.topbar-name{
  min-width:0;
  max-width:46vw;
  font-size:15px;
  font-weight:900;
  color:var(--ink-strong);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.coin-pill{
  display:flex;
  align-items:center;
  gap:5px;
  flex:0 0 auto;
  padding:10px 12px;
  border-radius:999px;
  white-space:nowrap;
  color:#7c5510;
  background:linear-gradient(135deg,#fff9db 0%,#ffe9a3 100%);
  border:1px solid rgba(255,219,105,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 5px 15px rgba(211,165,55,.12)
}
.coin-icon{font-size:18px}
.coin-pill strong{font-size:14px;font-weight:1000}
.coin-label{font-size:9px;font-weight:1000;letter-spacing:.08em}
.coin-pop{animation:coinPop .35s ease}
@keyframes coinPop{50%{transform:scale(1.18);color:#d98600}}

.page-shell{width:min(calc(100% - 20px),940px);margin:0 auto;padding:10px 0 58px}

/* Profile hero */
.profile-hero{
  position:relative;
  display:flex;
  align-items:center;
  gap:15px;
  padding:17px;
  border-radius:var(--radius-xl);
  overflow:hidden
}
.profile-hero::after{
  content:"";
  position:absolute;
  width:160px;height:160px;right:-54px;top:-72px;
  border-radius:50%;
  background:linear-gradient(135deg,rgba(255,157,206,.28),rgba(158,223,255,.3),rgba(174,238,216,.26));
  filter:blur(2px);
  pointer-events:none
}
.profile-big-avatar{
  width:78px;height:78px;flex:0 0 78px;border-radius:25px;object-fit:cover;
  border:4px solid rgba(255,255,255,.96);
  box-shadow:0 8px 20px rgba(91,110,163,.15)
}
.profile-copy{min-width:0;flex:1;position:relative;z-index:1}
.profile-copy h1{margin:0;font-size:clamp(23px,6vw,34px);font-weight:1000;letter-spacing:-.03em}
.selected-title{margin:2px 0 10px;color:#8667b5;font-weight:900;font-size:13px}
.level-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px}
.level-row strong{padding:4px 8px;border-radius:999px;background:var(--lav-soft);color:#6f58a7}
.xp-bar{height:9px;background:rgba(218,224,240,.68);border-radius:99px;overflow:hidden;margin-top:7px}
.xp-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--pink),var(--lav),var(--blue),var(--mint));border-radius:inherit}

/* Quick menu */
.quick-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:12px 0 24px}
.quick-nav a{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:0;
  min-height:72px;
  padding:8px 4px;
  border-radius:20px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.88);
  box-shadow:0 5px 16px rgba(87,105,155,.09);
  font-size:23px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px)
}
.quick-nav span{font-size:10px;font-weight:1000;margin-top:3px;white-space:nowrap}
.quick-nav small{position:absolute;top:5px;right:5px;font-size:7px;background:#efe9fa;color:#7c6b9c;padding:2px 5px;border-radius:9px;font-weight:1000}
.disabled-link{opacity:.52;pointer-events:none}

/* Section headings */
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:8px 2px 12px}
.section-heading h1,.section-heading h2{margin:0;color:var(--ink-strong);font-weight:1000;letter-spacing:-.02em}
.section-heading h2{font-size:22px}
.eyebrow{margin:0 0 2px;font-size:10px;letter-spacing:.16em;font-weight:1000;color:#aa65a1}
.mini-chip{font-size:10px;font-weight:1000;background:rgba(255,255,255,.74);border:1px solid rgba(255,255,255,.9);border-radius:99px;padding:7px 9px;box-shadow:0 4px 12px rgba(87,105,155,.07)}

/* Game cards: always 2 columns on phones */
.game-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.game-card{
  position:relative;
  min-width:0;
  min-height:176px;
  padding:14px;
  border-radius:25px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transform:translateZ(0)
}
.game-card::before{
  content:"";
  position:absolute;
  width:118px;height:118px;
  right:-38px;top:-36px;
  border-radius:50%;
  opacity:.72;
  background:radial-gradient(circle,rgba(255,255,255,.95) 0,rgba(255,255,255,.2) 46%,transparent 72%);
  pointer-events:none
}
.game-card::after{
  content:"✦";
  position:absolute;
  top:12px;right:13px;
  font-size:13px;
  color:rgba(255,255,255,.96);
  text-shadow:0 2px 8px rgba(85,96,146,.18);
  pointer-events:none
}
.game-card.ready{cursor:pointer}
.game-card.ready:active{transform:scale(.985)}
.game-card.locked{opacity:.64;filter:saturate(.72)}
.game-card.game-slot{background:linear-gradient(145deg,rgba(255,234,246,.94),rgba(255,255,255,.82) 62%,rgba(239,233,255,.8))}
.game-card.game-highlow{background:linear-gradient(145deg,rgba(230,245,255,.95),rgba(255,255,255,.82) 62%,rgba(235,230,255,.78))}
.game-card.game-roulette{background:linear-gradient(145deg,rgba(224,250,243,.94),rgba(255,255,255,.82) 62%,rgba(225,242,255,.8))}
.game-card.game-catch{background:linear-gradient(145deg,rgba(255,246,215,.95),rgba(255,255,255,.82) 62%,rgba(255,230,242,.78))}
.game-card.game-scratch{background:linear-gradient(145deg,rgba(244,232,255,.96),rgba(255,255,255,.82) 62%,rgba(224,247,255,.8))}
.game-card.game-crane{background:linear-gradient(145deg,rgba(255,228,241,.95),rgba(255,255,255,.82) 58%,rgba(221,251,240,.82))}
.game-emoji{
  position:relative;
  z-index:1;
  width:50px;height:50px;
  display:grid;place-items:center;
  border-radius:17px;
  font-size:29px;
  background:rgba(255,255,255,.68);
  border:1px solid rgba(255,255,255,.82);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 5px 12px rgba(87,105,155,.08)
}
.game-text{position:relative;z-index:1}
.game-text h3{margin:10px 0 4px;font-size:15px;line-height:1.15;font-weight:1000;letter-spacing:-.01em;overflow-wrap:anywhere}
.game-text p{margin:0;color:var(--muted);font-size:10.5px;line-height:1.5;font-weight:800}
.game-status{
  position:relative;z-index:1;
  margin-top:auto;
  align-self:flex-start;
  border-radius:99px;
  padding:6px 9px;
  font-size:9px;
  font-weight:1000;
  color:#6d5a9d;
  background:linear-gradient(135deg,rgba(255,226,241,.95),rgba(229,239,255,.96))
}
.game-card.ready .game-status{color:#624b9b;background:linear-gradient(135deg,#ffe2f1,#e4efff,#dff8ee)}
.logout-link,.back-link{display:inline-flex;align-items:center;min-height:44px;margin:5px 0 10px;font-weight:1000;color:#7f708e}

/* Bonus */
.bonus-banner{
  margin-bottom:12px;
  padding:13px 14px;
  border-radius:20px;
  background:linear-gradient(95deg,#fff3ba,#ffe3f2 36%,#eee4ff 68%,#dcf7ff);
  border:1px solid rgba(255,255,255,.82);
  font-size:13px;
  font-weight:1000;
  text-align:center;
  box-shadow:var(--shadow-card)
}
.bonus-banner span{display:inline-block;margin-left:5px;background:rgba(255,255,255,.82);padding:3px 7px;border-radius:99px}

/* Login & setup */
.login-page{display:grid;place-items:center;padding:28px 18px;min-height:100vh}
.login-wrap{width:min(100%,430px)}
.login-card{position:relative;padding:28px 24px;border-radius:32px;text-align:center;overflow:hidden}
.login-card::before{
  content:"";
  position:absolute;
  inset:-80px auto auto -70px;
  width:190px;height:190px;border-radius:50%;
  background:linear-gradient(135deg,rgba(255,157,206,.24),rgba(200,184,255,.22),rgba(158,223,255,.2));
  pointer-events:none
}
.logo-badge{
  position:relative;
  display:grid;place-items:center;
  width:76px;height:76px;
  margin:0 auto 9px;
  border-radius:27px;
  background:linear-gradient(135deg,#ffd8ed,#e6ddff 46%,#d7f2ff 73%,#dcfaef);
  border:2px solid rgba(255,255,255,.9);
  box-shadow:0 10px 22px rgba(111,105,173,.16);
  font-size:38px
}
.login-card h1{position:relative;margin:2px 0;font-size:32px;font-weight:1000;letter-spacing:-.03em}
.subcopy{position:relative;margin:6px 0 20px;color:var(--muted);font-size:13px;font-weight:800}
.form-stack{display:grid;gap:12px;text-align:left;position:relative}
.form-stack label,.admin-form-grid label{font-size:12px;font-weight:1000;color:#515a74}
.form-stack input,.admin-form-grid input,.coin-adjust-form input{
  width:100%;
  margin-top:5px;
  border:2px solid rgba(211,217,235,.8);
  background:rgba(255,255,255,.84);
  border-radius:15px;
  padding:12px 13px;
  font-size:16px;
  font-weight:800;
  color:var(--ink);
  outline:none
}
.form-stack input:focus,.admin-form-grid input:focus,.coin-adjust-form input:focus{border-color:#b6a8ef;box-shadow:0 0 0 4px rgba(200,184,255,.18)}
.primary-button,.small-button,.spin-button,.bet-button{border:0;cursor:pointer;font-weight:1000}
.primary-button{
  width:100%;min-height:48px;padding:13px 16px;border-radius:17px;
  background:linear-gradient(100deg,#ff9ccb,#c6b5ff 45%,#9adfff 73%,#aeeed8);
  color:#fff;
  text-shadow:0 1px 3px rgba(70,70,110,.16);
  box-shadow:var(--shadow-button)
}
.primary-button:active,.small-button:active,.spin-button:active{transform:scale(.985)}
.small-button{min-height:40px;padding:9px 12px;border-radius:13px;background:linear-gradient(135deg,#eee8ff,#e3f3ff);color:#665687}
.alert{padding:11px 13px;border-radius:15px;margin:10px 0;font-weight:900;font-size:12px}
.alert.danger{background:#ffe7ed;color:#9f4056}
.alert.success{background:#def7e9;color:#327653}

/* Slot */
.game-page{max-width:720px}
.slot-stage{text-align:center}
.slot-stage h1{font-size:36px;margin:2px;font-weight:1000}
.game-help{color:var(--muted);font-size:12px;line-height:1.6}
.slot-machine{
  position:relative;
  padding:15px;
  border-radius:30px;
  background:linear-gradient(135deg,#ffafd4 0%,#cdbbff 35%,#9cdefe 67%,#aeeed8 100%);
  box-shadow:0 18px 34px rgba(109,108,172,.2);
  overflow:hidden
}
.slot-machine::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(255,255,255,.45),transparent 34%,rgba(255,255,255,.18) 62%,transparent);
  pointer-events:none
}
.reels{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px;border-radius:22px;background:rgba(255,255,255,.9);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9)}
.reel-cell{aspect-ratio:1/1;display:grid;place-items:center;border-radius:16px;background:linear-gradient(145deg,#fff,#f9fbff);border:2px solid rgba(225,230,242,.8);overflow:hidden}
.reel-cell img{width:70%;height:70%;object-fit:contain}
.slot-message{position:relative;margin-top:12px;padding:10px;border-radius:16px;background:rgba(255,255,255,.88);font-weight:1000;color:#524768}
.bet-area{padding:18px 0}
.bet-area>p{font-size:10px;font-weight:1000;letter-spacing:.16em}
.bet-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.bet-button{min-height:48px;padding:8px 4px;border-radius:14px;background:rgba(255,255,255,.82);border:2px solid rgba(219,223,238,.9);color:var(--ink)}
.bet-button small{display:block;font-size:8px}
.bet-button.selected{border-color:#b8a7ef;background:linear-gradient(135deg,#fff0f7,#eef0ff,#e8f8ff);color:#694f9f;box-shadow:0 5px 14px rgba(132,112,197,.12)}
.spin-button{width:100%;min-height:54px;margin-top:11px;padding:14px;border-radius:18px;background:linear-gradient(100deg,#ff79b4,#b095ff 44%,#62ccef 72%,#73d5b6);color:#fff;font-size:19px;box-shadow:0 12px 24px rgba(124,104,190,.22)}
.spin-button:disabled{opacity:.55}
.payout-card{border-radius:24px;padding:16px;text-align:left}
.payout-card h2{text-align:center;margin:0 0 10px;font-size:13px;font-weight:1000;letter-spacing:.08em}
.payout-row{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:8px;padding:6px 4px;border-bottom:1px dashed rgba(210,215,231,.8);font-weight:900}
.payout-row:last-child{border-bottom:0}
.payout-row img{width:30px;height:30px}
.payout-row span{color:#8e5aa0}

/* Titles */
.title-grid{display:grid;gap:10px}
.title-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 15px;border-radius:20px}
.title-card h2{margin:0;font-size:15px;font-weight:1000}
.title-card p{margin:3px 0 0;font-size:11px;color:var(--muted);font-weight:800}
.locked-title{opacity:.5}
.selected-badge{font-size:10px;background:linear-gradient(135deg,#fff2bd,#ffe6aa);color:#7f5d18;border-radius:99px;padding:6px 9px;font-weight:1000;white-space:nowrap}

/* Admin */
.admin-panel{margin-bottom:14px;padding:16px;border-radius:24px}
.admin-panel h2{margin-top:0;font-size:17px;font-weight:1000}
.admin-form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.admin-form-grid .primary-button{align-self:end}
.admin-user-list{display:grid;gap:9px}
.admin-user-row{display:grid;grid-template-columns:1.4fr .7fr 1fr;align-items:center;gap:10px;padding:12px;border-radius:17px;background:rgba(250,252,255,.78);border:1px solid rgba(225,230,242,.8)}
.admin-user-row small{display:block;color:var(--muted);font-size:10px;margin-top:3px}
.admin-coin{text-align:right}
.coin-adjust-form{display:flex;gap:6px}
.coin-adjust-form input{margin:0;padding:9px;min-width:0}

/* Profile editor */
.profile-editor{padding:17px;border-radius:26px}
.profile-preview{display:flex;align-items:center;gap:14px;padding-bottom:16px;margin-bottom:16px;border-bottom:1px dashed rgba(211,216,233,.86)}
.profile-preview img{width:86px;height:86px;border-radius:27px;object-fit:cover;border:4px solid rgba(255,255,255,.96);box-shadow:0 7px 18px rgba(92,108,159,.13)}
.profile-preview strong{font-size:21px;font-weight:1000}
.profile-preview p{margin:3px 0;color:#8667b5;font-weight:900}
.profile-preview small{color:var(--muted)}
.profile-form small{font-weight:700;color:var(--muted)}
.profile-form input[type=file]{background:rgba(255,255,255,.86)}

/* Lightweight celebration */
.confetti-layer{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden}
.confetti-layer span{position:absolute;top:-40px;font-size:22px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg);opacity:.1}}

@media(min-width:700px){
  .topbar{left:50%;right:auto;width:min(calc(100% - 24px),940px);transform:translateX(-50%)}
  .game-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .game-card{min-height:190px;padding:17px}
  .game-text h3{font-size:17px}
  .game-text p{font-size:11.5px}
}

@media(max-width:520px){
  :root{--header-h:66px}
  body{padding-top:calc(var(--header-h) + 20px)}
  .topbar{top:8px;left:8px;right:8px;padding:9px 10px;border-radius:21px}
  .avatar{width:40px;height:40px;flex-basis:40px;border-radius:14px}
  .topbar-name{max-width:36vw;font-size:13px}
  .coin-pill{padding:9px 10px;gap:4px}
  .coin-pill strong{font-size:13px}
  .coin-label{display:none}
  .page-shell{width:min(calc(100% - 16px),940px)}
  .profile-hero{padding:13px;gap:12px;border-radius:24px}
  .profile-big-avatar{width:65px;height:65px;flex-basis:65px;border-radius:21px}
  .profile-copy h1{font-size:21px}
  .selected-title{font-size:11px;margin-bottom:8px}
  .level-row{font-size:10px}
  .quick-nav{gap:6px;margin:10px 0 20px}
  .quick-nav a{min-height:64px;border-radius:17px;font-size:21px}
  .quick-nav span{font-size:9px}
  .game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .game-card{min-height:168px;padding:12px;border-radius:22px}
  .game-emoji{width:46px;height:46px;border-radius:15px;font-size:27px}
  .game-text h3{font-size:14px}
  .game-text p{font-size:9.7px}
  .game-status{font-size:8px;padding:5px 8px}
  .section-heading h2{font-size:20px}
  .admin-form-grid{grid-template-columns:1fr}
  .admin-user-row{grid-template-columns:1fr auto}
  .coin-adjust-form{grid-column:1/-1}
  .bet-buttons{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:350px){
  .topbar-name{max-width:30vw}
  .coin-pill{padding:8px}
  .game-card{min-height:164px;padding:11px}
  .game-text h3{font-size:13px}
  .game-text p{font-size:9px}
  .quick-nav{grid-template-columns:repeat(3,1fr)}
}

@media(hover:hover) and (pointer:fine){
  .game-card.ready,.quick-nav a,.primary-button,.small-button,.spin-button,.bet-button{transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
  .game-card.ready:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(86,105,159,.16)}
  .quick-nav a:hover{transform:translateY(-2px)}
  .primary-button:hover,.spin-button:hover{filter:saturate(1.06) brightness(1.02)}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ===== Phase 3: responsive game UI / mobile-safe ===== */
html,body{max-width:100%;overflow-x:hidden}
body{padding-top:calc(var(--header-h) + 24px + env(safe-area-inset-top,0px))}
.topbar{top:calc(10px + env(safe-area-inset-top,0px))}
.page-shell,.game-page,.game-page *{min-width:0}
.game-page{width:min(calc(100% - 16px),680px)}
.back-link{gap:6px;padding:8px 4px;margin:0 0 7px;color:#76688a;font-size:12px}
.logout-link{
  width:100%;margin:18px 0 4px;min-height:50px;padding:12px 16px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  border-radius:18px;color:#8d526d;font-size:13px;font-weight:1000;
  background:linear-gradient(135deg,rgba(255,236,244,.92),rgba(245,238,255,.94),rgba(235,247,255,.94));
  border:1px solid rgba(255,255,255,.95);box-shadow:var(--shadow-card)
}
.logout-link:active{transform:scale(.985)}

.game-hero{width:100%;margin-bottom:12px;padding:17px 14px;border-radius:25px;text-align:center;border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow-card)}
.game-hero h1{margin:2px 0 5px;font-size:clamp(25px,8vw,34px);line-height:1.05;font-weight:1000;letter-spacing:-.03em;overflow-wrap:anywhere}
.game-hero .game-help{margin:0 auto;max-width:540px;font-size:11.5px;line-height:1.65}
.aurora-blue-hero{background:linear-gradient(135deg,rgba(221,244,255,.96),rgba(241,237,255,.92),rgba(255,240,248,.9))}
.aurora-mint-hero{background:linear-gradient(135deg,rgba(220,250,239,.96),rgba(228,247,255,.92),rgba(241,237,255,.9))}
.aurora-purple-hero{background:linear-gradient(135deg,rgba(242,232,255,.96),rgba(255,231,245,.92),rgba(225,246,255,.9))}
.aurora-yellow-hero{background:linear-gradient(135deg,rgba(255,247,210,.96),rgba(255,231,243,.92),rgba(229,245,255,.9))}
.control-card,.rule-card,.highlow-board,.roulette-stage,.scratch-stage,.catch-stage{width:100%;margin-bottom:12px;padding:14px;border-radius:24px;overflow:hidden}
.control-label{margin:0 0 8px;text-align:center;font-size:10px;font-weight:1000;letter-spacing:.15em;color:#7c708f}
.primary-game-button{width:100%;min-height:52px;margin-top:11px;padding:12px;border:0;border-radius:18px;cursor:pointer;background:linear-gradient(100deg,#ff83bc,#b39cff 44%,#65cfee 72%,#77d8b8);color:#fff;font-size:16px;font-weight:1000;box-shadow:var(--shadow-button)}
.primary-game-button:disabled{opacity:.55;cursor:default}
.game-result-message{width:100%;margin-top:12px;padding:11px 10px;border-radius:16px;background:rgba(255,255,255,.84);font-size:12px;line-height:1.55;font-weight:1000;text-align:center;color:#574c69;overflow-wrap:anywhere}
.rule-card h2{margin:0 0 10px;text-align:center;font-size:13px;letter-spacing:.08em;font-weight:1000}
.rule-card>p{margin:9px 0 0;text-align:center;color:var(--muted);font-size:10px;line-height:1.6}
.rule-chip-row{display:flex;flex-wrap:wrap;justify-content:center;gap:7px}
.rule-chip-row span{padding:8px 10px;border-radius:99px;background:rgba(255,255,255,.82);font-size:10px}
.rule-chip-row strong{color:#775ba2}
.game-page .bet-buttons{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.game-page .bet-button{min-width:0;min-height:48px;padding:7px 2px;font-size:12px;overflow:hidden}
.game-page .bet-button small{font-size:7px;letter-spacing:-.01em}

/* High & Low */
.highlow-board{background:linear-gradient(145deg,rgba(225,245,255,.84),rgba(255,255,255,.84),rgba(240,231,255,.8))}
.highlow-card-row{width:100%;display:flex;align-items:center;justify-content:center;gap:clamp(6px,2.5vw,12px)}
.playing-card{width:clamp(112px,34vw,190px);aspect-ratio:3/4;flex:0 1 190px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:20px;background:linear-gradient(150deg,#fff,#f8faff);border:3px solid rgba(255,255,255,.96);box-shadow:0 12px 24px rgba(82,103,159,.14);overflow:hidden}
.playing-card .card-value{font-size:clamp(34px,11vw,52px);font-weight:1000;line-height:1}
.playing-card .card-suit{font-size:clamp(28px,9vw,42px);line-height:1.1;color:#31384f}
.playing-card .card-suit.is-red{color:#ed6885}
.playing-card.card-back{background:linear-gradient(135deg,#ffb7db,#c6b5ff 46%,#a5e2ff 75%,#b8efd9);color:#fff}
.playing-card.card-back .card-value,.playing-card.card-back .card-suit{color:#fff;text-shadow:0 2px 6px rgba(76,75,125,.16)}
.versus-badge{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:50%;background:#fff;color:#806aab;box-shadow:var(--shadow-card);font-size:9px;font-weight:1000}
.highlow-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.choice-button{min-width:0;min-height:54px;border:0;border-radius:18px;color:#fff;font-size:16px;font-weight:1000;cursor:pointer;box-shadow:var(--shadow-button)}
.choice-button.low{background:linear-gradient(135deg,#79c9f1,#8eaef5)}
.choice-button.high{background:linear-gradient(135deg,#ff92bd,#d49ef4)}
.choice-button:disabled{opacity:.55}

/* Roulette */
.roulette-stage{text-align:center;background:linear-gradient(145deg,rgba(225,250,241,.82),rgba(255,255,255,.84),rgba(229,244,255,.82));overflow:hidden}
.roulette-pointer{position:relative;z-index:3;height:22px;margin:0 auto -5px;font-size:27px;line-height:1;color:#705e91;text-shadow:0 2px 4px #fff}
.roulette-wheel{position:relative;width:min(100%,320px);aspect-ratio:1/1;margin:0 auto;border-radius:50%;border:8px solid rgba(255,255,255,.94);box-shadow:0 15px 35px rgba(71,98,139,.18),inset 0 0 0 4px rgba(255,255,255,.38);background:conic-gradient(#54c4dc 0deg 168deg,#62c58e 168deg 192deg,#f282a2 192deg 360deg);transition:transform 2.5s cubic-bezier(.12,.72,.08,1);will-change:transform}
.roulette-wheel::before{content:"";position:absolute;inset:10%;border-radius:50%;border:2px dashed rgba(255,255,255,.7)}
.roulette-center{position:absolute;inset:34%;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.94);color:#76648c;font-size:10px;font-weight:1000;line-height:1.15;box-shadow:0 6px 16px rgba(70,85,130,.12)}
.roulette-result{width:100%;margin-top:12px;padding:10px;border-radius:16px;background:rgba(255,255,255,.84);font-size:12px;line-height:1.5;font-weight:1000;overflow-wrap:anywhere}
.roulette-choices{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.72fr);gap:6px;margin-bottom:14px}
.roulette-choice{min-width:0;min-height:50px;padding:7px 3px;border:3px solid transparent;border-radius:16px;color:#fff;font-size:12px;font-weight:1000;cursor:pointer;opacity:.68;overflow:hidden}
.roulette-choice small{display:block;font-size:8px}
.roulette-choice.red{background:#ef7898}.roulette-choice.blue{background:#5cbcd7}.roulette-choice.zero{background:#58b97f}
.roulette-choice.selected{opacity:1;border-color:#fff;box-shadow:0 7px 16px rgba(73,91,137,.15),0 0 0 2px rgba(179,156,255,.28)}
.roulette-choice:disabled{cursor:default}

/* Scratch */
.scratch-stage{background:linear-gradient(145deg,rgba(246,234,255,.86),rgba(255,255,255,.84),rgba(228,246,255,.82))}
.scratch-grid{width:min(100%,420px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 auto}
.scratch-cell{position:relative;min-width:0;aspect-ratio:1/1;border-radius:16px;overflow:hidden;background:rgba(255,255,255,.96);border:2px solid rgba(255,255,255,.94);box-shadow:inset 0 0 0 1px rgba(221,225,239,.6)}
.scratch-symbol{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(27px,10vw,42px);filter:drop-shadow(0 4px 5px rgba(71,89,129,.1))}
.scratch-grid.is-empty .scratch-symbol{opacity:.45}
.scratch-cover{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}
.scratch-cell.revealed{animation:scratchPop .25s ease}
@keyframes scratchPop{50%{transform:scale(1.04)}}
.scratch-prize-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.scratch-prize-list span{min-width:0;padding:8px 9px;border-radius:14px;background:rgba(255,255,255,.8);font-size:10px;white-space:nowrap}
.scratch-prize-list strong{float:right;color:#7e5ca5}

/* Catch */
.catch-stage{background:linear-gradient(145deg,rgba(255,247,216,.88),rgba(255,255,255,.84),rgba(230,245,255,.84))}
.catch-hud{width:100%;display:flex;justify-content:space-between;gap:8px;margin-bottom:8px;padding:9px 10px;border-radius:15px;background:rgba(255,255,255,.82);font-size:11px;font-weight:1000}
.catch-canvas-wrap{position:relative;width:min(100%,360px);margin:0 auto;border-radius:20px;overflow:hidden;border:3px solid rgba(255,255,255,.95);box-shadow:0 12px 26px rgba(84,102,151,.14);background:#f6f9ff}
.catch-canvas{display:block;width:100%;height:auto;max-width:100%;touch-action:none}
.catch-overlay{position:absolute;inset:0;display:grid;place-items:center;padding:10px;background:rgba(246,249,255,.62);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.catch-overlay[hidden]{display:none}
.catch-overlay-card{width:min(82%,270px);padding:17px;border-radius:21px;background:rgba(255,255,255,.94);text-align:center;box-shadow:var(--shadow-card)}
.catch-overlay-card strong{display:block;margin:7px 0;font-size:13px}
.catch-big-icon{font-size:44px}
.catch-controls{width:min(100%,360px);display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px auto 0}
.catch-controls button{min-width:0;min-height:48px;border:0;border-radius:16px;background:rgba(255,255,255,.9);color:#6e6090;font-size:21px;font-weight:1000;box-shadow:var(--shadow-card);touch-action:none}
.catch-items{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.catch-items span,.reward-table span{min-width:0;padding:8px 4px;border-radius:13px;background:rgba(255,255,255,.82);font-size:9.5px;text-align:center;overflow-wrap:anywhere}
.reward-table{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin-top:7px}
.reward-table strong{display:block;margin-top:2px;color:#7c5b9f}

/* Slot winning line overlay */
.reels{isolation:isolate}
.reel-cell{position:relative;z-index:1}
.slot-win-lines{position:absolute;z-index:5;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);pointer-events:none;overflow:visible}
.slot-win-lines line{opacity:0;stroke:#ff4fa8;stroke-width:8;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px rgba(255,79,168,.75));transition:opacity .2s ease}
.slot-win-lines line.is-win{opacity:1;animation:slotLineGlow .65s ease-in-out 2}
@keyframes slotLineGlow{0%,100%{stroke-width:8;opacity:1}50%{stroke-width:12;opacity:.78}}

@media(max-width:520px){
  body{padding-top:calc(var(--header-h) + 20px + env(safe-area-inset-top,0px))}
  .topbar{top:calc(8px + env(safe-area-inset-top,0px))}
  .game-page{width:min(calc(100% - 12px),680px)}
  .game-hero{padding:14px 10px;border-radius:22px}
  .control-card,.rule-card,.highlow-board,.roulette-stage,.scratch-stage,.catch-stage{padding:10px;border-radius:21px}
  .game-page .bet-buttons{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
  .game-page .bet-button{min-height:45px;padding:5px 1px;font-size:10.5px;border-radius:12px}
  .playing-card{width:clamp(105px,33.5vw,150px);border-radius:18px}
  .highlow-card-row{gap:5px}
  .versus-badge{width:30px;height:30px;flex-basis:30px;font-size:8px}
  .roulette-wheel{width:min(100%,290px);border-width:7px}
  .scratch-grid{gap:5px}
  .scratch-cell{border-radius:14px}
  .catch-items{grid-template-columns:repeat(2,minmax(0,1fr))}
  .logout-link{min-height:48px;border-radius:17px}
}

@media(max-width:360px){
  .game-page .bet-button{font-size:9.5px}
  .playing-card{width:103px}
  .versus-badge{width:28px;height:28px;flex-basis:28px}
  .roulette-choice{font-size:10.5px}
  .scratch-prize-list{grid-template-columns:1fr}
}

@media(hover:hover) and (pointer:fine){
  .primary-game-button,.choice-button,.roulette-choice,.catch-controls button,.logout-link{transition:transform .18s ease,filter .18s ease}
  .primary-game-button:hover,.choice-button:hover,.roulette-choice:hover,.catch-controls button:hover,.logout-link:hover{transform:translateY(-2px);filter:brightness(1.02)}
}