:root{
  --bg:#121214;
  --panel:#1b1b1f;
  --line:#9f7548;
  --line-2:#d3b27c;
  --text:#f5e8cb;
  --muted:#ccb796;
  --gold1:#f1e1bc;
  --gold2:#dfc48d;
  --goldText:#2b2018;
  --shadow:0 16px 34px rgba(0,0,0,0.28);
}

*{
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
}

html,body{
  margin:0;
  padding:0;
  min-height:100%;
  font-family:Inter,Arial,sans-serif;
  background:
    radial-gradient(circle at top, rgba(255,255,255,0.05), transparent 24%),
    linear-gradient(180deg, #151517, #0c0c0d 78%);
  color:var(--text);
  text-transform:uppercase;
}

body{
  letter-spacing:.4px;
}

button{
  font:inherit;
  cursor:pointer;
  text-transform:uppercase;
}

.app{
  width:100%;
  min-height:100vh;
  padding:14px 14px calc(24px + env(safe-area-inset-bottom)) 14px;
}

.app-shell{
  max-width:920px;
  margin:0 auto;
}

.screen{
  display:none;
}

.screen.active{
  display:block;
}

.screen-topbar,
.screen-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
}

.brand,
.screen-title{
  font-size:26px;
  font-weight:900;
  letter-spacing:1.8px;
  color:var(--text);
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}

.header-spacer{
  width:86px;
}

.top-btn{
  min-width:86px;
  min-height:52px;
  padding:12px 18px;
  border-radius:18px;
  border:2px solid var(--line);
  background:
    linear-gradient(180deg, #1f1f22, #121214);
  color:var(--gold1);
  font-weight:900;
  font-size:14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 10px 20px rgba(0,0,0,.24);
}

.hero-card,
.status-card,
.center-card,
.profile-card,
.game-shell-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    linear-gradient(180deg, #1e1e22, #121214);
  border:2px solid var(--line);
  border-radius:28px;
  box-shadow:var(--shadow);
}

.hero-card{
  padding:26px 18px 22px;
  text-align:center;
  margin-bottom:16px;
}

.hero-avatar-wrap{
  position:relative;
  width:100px;
  height:100px;
  margin:0 auto 14px;
}

.hero-avatar-ring{
  position:absolute;
  inset:-6px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(245,225,176,.75), transparent 68%);
  filter:blur(8px);
}

.hero-avatar{
  position:relative;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:50%;
  border:3px solid #d7bf96;
  box-shadow:0 10px 20px rgba(0,0,0,.28);
}

.hero-name,
.profile-name{
  font-size:22px;
  font-weight:900;
  color:var(--text);
  margin-bottom:6px;
}

.hero-subtitle{
  font-size:12px;
  font-weight:700;
  color:var(--muted);
}

.menu-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.menu-btn,
.action-btn,
.outline-btn,
.status-btn,
.theme-btn{
  width:100%;
  min-height:58px;
  padding:14px 18px;
  border-radius:18px;
  font-size:16px;
  font-weight:900;
  border:2px solid var(--line);
}

.menu-btn,
.action-btn,
.status-btn,
.theme-btn{
  background:
    linear-gradient(180deg, var(--gold1), var(--gold2));
  color:var(--goldText);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 10px 22px rgba(0,0,0,.22);
}

.outline-btn{
  background:
    linear-gradient(180deg, #211f1d, #111110);
  color:var(--gold1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 10px 20px rgba(0,0,0,.24);
}

.status-card{
  padding:18px;
  margin-bottom:18px;
}

.status-title{
  font-size:15px;
  font-weight:900;
  color:var(--text);
  margin-bottom:14px;
}

.status-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:14px;
}

.status-box{
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  padding:14px;
}

.status-label{
  font-size:11px;
  font-weight:700;
  color:var(--muted);
  margin-bottom:8px;
}

.status-value{
  font-size:28px;
  font-weight:900;
  color:#fff4dc;
}

.status-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:10px;
}

.status-note{
  font-size:12px;
  line-height:1.45;
  color:var(--muted);
}

.themes-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.theme-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    linear-gradient(180deg, #1d1d21, #111112);
  border:2px solid var(--line);
  border-radius:26px;
  overflow:hidden;
  box-shadow:var(--shadow);
}

.theme-card--active{
  border-color:var(--line-2);
  box-shadow:
    0 0 0 2px rgba(225,196,134,.22),
    var(--shadow);
}

.theme-preview{
  padding:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
}

.preview-board{
  position:relative;
  height:180px;
  border-radius:20px;
  overflow:hidden;
  background:#201712;
  border:3px solid #6f5030;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}

.preview-half{
  position:absolute;
  top:0;
  bottom:0;
  width:calc(50% - 11px);
  background:linear-gradient(180deg, #ead3a7, #c09a68);
}

.preview-half.left{ left:0; }
.preview-half.right{ right:0; }

.preview-bar{
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:22px;
  transform:translateX(-50%);
  background:linear-gradient(180deg, #6a492d, #4b331f);
}

.preview-half.left::before,
.preview-half.left::after,
.preview-half.right::before,
.preview-half.right::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:45%;
  background-size:16.66% 100%;
  background-repeat:no-repeat;
}

.preview-half.left::before{
  top:0;
  background-image:
    linear-gradient(to bottom, #7f3e2b, transparent),
    linear-gradient(to bottom, transparent, transparent),
    linear-gradient(to bottom, #f3eddc, transparent),
    linear-gradient(to bottom, transparent, transparent),
    linear-gradient(to bottom, #7f3e2b, transparent),
    linear-gradient(to bottom, transparent, transparent);
}

.preview-half.left::after{
  bottom:0;
  background-image:
    linear-gradient(to top, transparent, transparent),
    linear-gradient(to top, #f3eddc, transparent),
    linear-gradient(to top, transparent, transparent),
    linear-gradient(to top, #7f3e2b, transparent),
    linear-gradient(to top, transparent, transparent),
    linear-gradient(to top, #f3eddc, transparent);
}

.preview-half.right::before{
  top:0;
  background-image:
    linear-gradient(to bottom, transparent, transparent),
    linear-gradient(to bottom, #7f3e2b, transparent),
    linear-gradient(to bottom, transparent, transparent),
    linear-gradient(to bottom, #f3eddc, transparent),
    linear-gradient(to bottom, transparent, transparent),
    linear-gradient(to bottom, #7f3e2b, transparent);
}

.preview-half.right::after{
  bottom:0;
  background-image:
    linear-gradient(to top, #f3eddc, transparent),
    linear-gradient(to top, transparent, transparent),
    linear-gradient(to top, #7f3e2b, transparent),
    linear-gradient(to top, transparent, transparent),
    linear-gradient(to top, #f3eddc, transparent),
    linear-gradient(to top, transparent, transparent);
}

.preview-checker{
  position:absolute;
  width:26px;
  height:26px;
  border-radius:50%;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.08),
    0 6px 12px rgba(0,0,0,.25);
}

.preview-checker-a{ background:#f8f1df; }
.preview-checker-b{ background:#7b5640; }

.p-a1{ left:14px; top:14px; }
.p-a2{ left:14px; top:46px; }
.p-a3{ left:14px; bottom:14px; }
.p-b1{ right:14px; top:14px; }
.p-b2{ right:14px; bottom:14px; }
.p-b3{ right:46px; bottom:14px; }

.preview-die{
  position:absolute;
  width:34px;
  height:34px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:900;
  box-shadow:0 8px 16px rgba(0,0,0,.28);
}

.preview-die-a{
  left:calc(50% - 42px);
  top:calc(50% - 17px);
  transform:rotate(-10deg);
  background:#f4ecda;
  color:#1f1a16;
}

.preview-die-b{
  left:calc(50% + 8px);
  top:calc(50% - 17px);
  transform:rotate(10deg);
  background:#7d5840;
  color:#fff;
}

.theme-card-body{
  padding:16px;
}

.theme-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}

.theme-name{
  font-size:24px;
  font-weight:900;
  color:var(--text);
  margin-bottom:8px;
}

.theme-description{
  font-size:12px;
  color:var(--muted);
  line-height:1.35;
}

.theme-badge{
  flex-shrink:0;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line-2);
  color:var(--gold1);
  font-size:11px;
  font-weight:900;
}

.theme-price-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  margin-bottom:14px;
}

.theme-price-label{
  font-size:11px;
  color:var(--muted);
}

.theme-price-value{
  font-size:16px;
  font-weight:900;
  color:var(--text);
}

.center-card{
  min-height:360px;
  padding:24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
}

.loader{
  width:58px;
  height:58px;
  border-radius:50%;
  border:4px solid rgba(255,255,255,.14);
  border-top-color:#e0c288;
  animation:spin 1s linear infinite;
}

@keyframes spin{
  to{ transform:rotate(360deg); }
}

.center-title{
  font-size:18px;
  font-weight:900;
  color:var(--text);
  text-align:center;
}

.pill{
  padding:10px 16px;
  border-radius:999px;
  background:linear-gradient(180deg, #f1e2bf, #dfc28e);
  color:#2d2117;
  font-weight:900;
  border:2px solid #b9925b;
}

.game-shell-card{
  padding:12px;
}

.game-frame{
  display:block;
  width:100%;
  height:calc(100vh - 150px);
  min-height:560px;
  border:none;
  border-radius:20px;
  background:#0d0d0f;
}

.profile-card{
  padding:22px 18px;
}

.profile-avatar-wrap{
  margin-bottom:14px;
}

.balance-card{
  margin-bottom:14px;
  padding:16px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.balance-label{
  font-size:12px;
  font-weight:800;
  color:var(--muted);
}

.balance-value{
  font-size:24px;
  font-weight:900;
  color:#f7e4b7;
}

.profile-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:14px;
}

.stat-box{
  padding:16px 12px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  text-align:center;
}

.stat-box-wide{
  grid-column:1 / -1;
}

.stat-number{
  font-size:24px;
  font-weight:900;
  color:#f5e3b8;
  margin-bottom:6px;
}

.stat-label{
  font-size:12px;
  color:var(--muted);
}

.profile-actions{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.rules-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.rule-card{
  overflow:hidden;
  border-radius:22px;
  border:2px solid var(--line);
  background:linear-gradient(180deg, #1b1b1e, #111113);
  box-shadow:var(--shadow);
}

.rule-head{
  padding:12px 16px;
  text-align:center;
  font-size:15px;
  font-weight:900;
  color:#3b2b1c;
  background:linear-gradient(180deg, #f3e6c9, #e6d0a2);
  border-bottom:1px solid rgba(0,0,0,.18);
}

.rule-body{
  padding:18px 16px;
  text-align:center;
  font-size:16px;
  font-weight:900;
  color:var(--text);
  line-height:1.35;
}

@media (max-width: 860px){
  .themes-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 560px){
  .brand,
  .screen-title{
    font-size:22px;
  }

  .status-grid,
  .status-actions,
  .profile-stats{
    grid-template-columns:1fr;
  }

  .theme-card-top{
    flex-direction:column;
    align-items:flex-start;
  }

  .game-frame{
    height:calc(100vh - 130px);
    min-height:500px;
  }

  .top-btn{
    min-width:76px;
    padding:10px 14px;
  }
}