* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:root { --g: #2bff6a; --gd: #13a84a; --red: #d8342a; --redd: #8e1b14; --txt: #e6ffee; --mut: #86a894; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #010302; }
body { font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--txt);
  user-select: none; -webkit-user-select: none; touch-action: manipulation; }
#stage { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
#cv { display: block; touch-action: none; }
#ui { position: absolute; pointer-events: none; }
#ui > * { pointer-events: auto; }
.hidden { display: none !important; }
a { color: var(--g); }

.panel.center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px; padding: 24px; pointer-events: none; }
.panel.center > * { pointer-events: auto; }
#menu { justify-content: flex-end; padding-bottom: 20%; }
.title { font-size: 44px; font-weight: 900; color: #fff; text-align: center; line-height: 1.05;
  text-shadow: 0 3px 0 var(--red), 0 0 18px rgba(43,255,106,.35); letter-spacing: .5px;
  position: absolute; top: 9%; left: 0; right: 0; }
.sub { font-size: 16px; font-weight: 700; color: var(--mut); text-align: center; }
#menu .sub { color: var(--g); text-shadow: 0 0 8px rgba(43,255,106,.5); }

.btn { border: 1.5px solid rgba(43,255,106,.55); border-radius: 14px; padding: 12px 20px; font: inherit; font-size: 17px;
  font-weight: 800; color: var(--txt); background: rgba(10,22,15,.88); box-shadow: 0 0 12px rgba(43,255,106,.15);
  cursor: pointer; min-width: 120px; }
.btn:active { transform: translateY(2px); }
.btn.big { font-size: 24px; padding: 16px 40px; min-width: 220px; background: linear-gradient(#e8463b, var(--red));
  border: 0; color: #fff; box-shadow: 0 5px 0 var(--redd), 0 0 22px rgba(255,120,40,.35); }
.btn.big:active { box-shadow: 0 2px 0 var(--redd); transform: translateY(3px); }
.btn.ghost { background: transparent; border-color: rgba(134,168,148,.5); color: var(--mut); }
.row { display: flex; gap: 12px; }

.card { background: rgba(6,14,10,.92); border: 1.5px solid rgba(43,255,106,.4); border-radius: 20px; padding: 16px 34px;
  text-align: center; box-shadow: 0 0 30px rgba(43,255,106,.12); min-width: 220px; }
.cap { font-size: 13px; font-weight: 800; text-transform: uppercase; color: var(--mut); letter-spacing: 2px; }
.score { font-size: 64px; font-weight: 900; color: var(--g); line-height: 1; margin: 4px 0; text-shadow: 0 0 16px rgba(43,255,106,.45); }
.newrec { display: inline-block; background: #ff9a1f; color: #2a1300; font-weight: 900; border-radius: 10px;
  padding: 3px 10px; margin-bottom: 6px; animation: pop .6s ease; }
@keyframes pop { 0% { transform: scale(.3); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }

.panel.sheet { position: absolute; left: 10px; right: 10px; top: 10px; bottom: 10px; background: #07100b;
  border: 1.5px solid rgba(43,255,106,.35); border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,.6);
  display: flex; flex-direction: column; overflow: hidden; }
.head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 8px; font-size: 22px; font-weight: 900; }
.x { border: 1px solid rgba(43,255,106,.4); background: #0d1c13; color: var(--g); width: 36px; height: 36px;
  border-radius: 50%; font-size: 17px; font-weight: 900; cursor: pointer; }
.grid { flex: 1; overflow-y: auto; display: grid; align-content: start; grid-template-columns: 1fr 1fr; gap: 10px; padding: 6px 12px 14px; }
.skin { background: #0d1812; border-radius: 14px; padding: 6px 6px 8px; text-align: center; cursor: pointer;
  border: 2px solid rgba(43,255,106,.12); position: relative; }
.skin img { width: 100%; height: auto; display: block; }
.skin.on { border-color: var(--g); box-shadow: 0 0 14px rgba(43,255,106,.3); }
.skin .nm { font-weight: 800; font-size: 15px; }
.skin .how { font-size: 12px; color: var(--mut); }
.skin.locked img { filter: grayscale(1) brightness(.5); }
.skin.locked::after { content: "🔒"; position: absolute; top: 8px; right: 10px; font-size: 18px; }

.tabs { display: flex; gap: 6px; padding: 0 12px 8px; }
.tabs button { flex: 1; border: 1px solid rgba(43,255,106,.25); border-radius: 12px; padding: 9px 4px; font: inherit;
  font-weight: 800; background: #0d1812; color: var(--mut); cursor: pointer; }
.tabs button.on { background: var(--gd); color: #fff; border-color: var(--g); }
.list { flex: 1; overflow-y: auto; padding: 0 12px; }
.ln { display: flex; align-items: center; gap: 8px; background: #0d1812; border-radius: 12px; padding: 4px 10px; margin-bottom: 6px; }
.ln.mine { background: #16301f; border: 1px solid rgba(43,255,106,.45); }
.ln .rk { width: 30px; font-weight: 900; color: var(--mut); text-align: center; }
.ln .rk.g1 { color: #ffc93c; } .ln .rk.g2 { color: #c9d2dc; } .ln .rk.g3 { color: #d98a4a; }
.ln img { width: 44px; height: 33px; }
.ln .nm { flex: 1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ln .sc { font-weight: 900; color: var(--g); font-size: 18px; }
.me { padding: 4px 12px; }
.login { padding: 6px 12px 14px; text-align: center; font-size: 14px; color: var(--mut); }
.login input { background: #0d1812; color: var(--txt); }
.empty { text-align: center; color: var(--mut); padding: 30px 10px; }

.round { position: absolute; top: 10px; right: 10px; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(43,255,106,.4); background: rgba(10,22,15,.8); font-size: 19px; cursor: pointer; }

.nftbtn { border-color: rgba(255,154,31,.7); color: #ffd08a; }
.buybtn { margin-top: 10px; min-width: 220px; border-color: rgba(255,154,31,.85); color: #1b1206; font-weight: 700;
  background: linear-gradient(#ffc04a, #ff9a1f); box-shadow: 0 3px 0 #b8650a; }
body.menubg #menu .btn.buybtn:not(.big) { background: linear-gradient(#ffc04a, #ff9a1f); border-color: #b8650a; color: #1b1206; box-shadow: 0 3px 0 #b8650a; }
.prod { background: #0d1812; border: 1px solid rgba(43,255,106,.18); border-radius: 14px; padding: 12px; margin-bottom: 12px; }
.prod .nm { font-weight: 900; font-size: 17px; }
.prod .ds { font-size: 13px; color: var(--mut); margin: 4px 0 10px; line-height: 1.35; }
.prod .buy { display: flex; gap: 8px; }
.prod .buy .btn { flex: 1; min-width: 0; padding: 10px 8px; font-size: 15px; }
.prod .own { color: var(--g); font-weight: 900; }
.prod .st { font-size: 13px; color: #ffd08a; margin-top: 8px; }
#access .cap { margin: 4px 2px 8px; }
.tier { background: #0b140f; border: 1px solid rgba(134,168,148,.2); border-radius: 12px; padding: 9px 12px; margin-bottom: 8px; }
.tier .tn { font-weight: 800; }
.tier .td { font-size: 13px; color: var(--mut); margin-top: 2px; }
.tier.got { border-color: rgba(43,255,106,.6); }
.tier.got .tn::before { content: "✓ "; color: var(--g); }
.tier.nft { border-color: rgba(255,154,31,.5); background: #17110a; }
.tier.nft.got { border-color: var(--g); }

.prod.test { border-color: rgba(255,200,60,.55); background: rgba(60,45,0,.35); }
.prod.test .btn { flex: 1 1 22%; min-width: 0; padding: 9px 4px; font-size: 14px; }
.prod.test .btn.on { background: #2bff6a; color: #02140a; }

/* меню на светлом японском фоне: тушь и киноварь */
body.menubg #menu .title { color: #17171c; text-shadow: 0 3px 0 rgba(216,52,42,.85), 0 0 14px rgba(255,255,255,.6); }
body.menubg #menu .sub { color: #8e1b14; text-shadow: none; }
body.menubg #menu .btn:not(.big) { background: rgba(23,23,28,.86); border-color: rgba(23,23,28,.9); color: #f4efe6; box-shadow: 0 3px 10px rgba(0,0,0,.18); }
body.menubg #sound { background: rgba(23,23,28,.7); }