:root {
  color-scheme: dark;
  --ink: #f6f0ff;
  --muted: #aaa1c3;
  --cyan: #70f7df;
  --violet: #a26cff;
  --gold: #ffd278;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { min-height: 100%; margin: 0; }
body {
  display: grid;
  place-items: center;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 0%, rgba(86, 48, 161, .28), transparent 38%),
    #06040e;
  font-family: "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif;
  overscroll-behavior: none;
}

button { font: inherit; }
.shell { width: min(100%, 1500px); padding: 14px 22px 10px; }
.topbar, footer { display: flex; align-items: center; justify-content: space-between; }
.topbar { margin: 0 4px 10px; }
.brand { display: flex; align-items: center; gap: 11px; }
.brand-rune {
  display: grid; place-items: center; width: 44px; aspect-ratio: 1;
  border: 1px solid rgba(112,247,223,.42); border-radius: 50% 50% 45% 45%;
  color: var(--cyan); background: rgba(88, 53, 152, .22);
  box-shadow: inset 0 0 16px rgba(109,247,226,.16), 0 0 25px rgba(112,247,223,.1);
  font: 800 23px/1 "KaiTi", serif;
}
h1, .brand p { margin: 0; }
h1 { font: 900 20px/1.2 "KaiTi", serif; letter-spacing: .15em; }
.brand p { margin-top: 2px; color: #7f7698; font-size: 10px; letter-spacing: .28em; }
.top-actions { display: flex; align-items: center; gap: 12px; }
.record { color: #776f8c; font-size: 10px; letter-spacing: .08em; }
.ghost-button {
  padding: 8px 13px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px;
  color: #c6bfd7; background: rgba(255,255,255,.045); cursor: pointer;
}
.admin-link { color:#70f7df; text-decoration:none; border-color:rgba(112,247,223,.24); }

.stage {
  position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden;
  border: 1px solid rgba(154, 113, 237, .25); border-radius: 22px;
  background: #0d091a; isolation: isolate;
  box-shadow: 0 28px 80px rgba(0,0,0,.58), inset 0 0 70px rgba(2,1,9,.58);
}
.stage::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  box-shadow: inset 0 0 95px rgba(1,0,8,.66); border-radius: inherit;
}
canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }
#gameCanvas { position:absolute; inset:0; background:#0a0b18; }
.home-hero {
  position: absolute; z-index: 3; right: 4.5%; bottom: -3%; width: min(42%, 570px); height: 94%;
  object-fit: contain; object-position: center bottom; pointer-events: none;
  filter: drop-shadow(0 22px 30px rgba(0,0,0,.62)) drop-shadow(0 0 26px rgba(112,247,223,.12));
  transition: opacity .24s ease, transform .3s ease;
}
.stage.playing .home-hero { opacity: 0; transform: translateX(5%) scale(.97); }

.panel {
  position: absolute; z-index: 5; top: 50%; left: 7%; width: min(560px, 48%);
  transform: translateY(-50%); padding: clamp(24px, 3vw, 48px);
  border: 1px solid rgba(141, 92, 230, .36); border-radius: 10px 34px 10px 34px;
  background: linear-gradient(145deg, rgba(29,17,60,.92), rgba(8,7,24,.83));
  box-shadow: 0 25px 70px rgba(0,0,0,.52), inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(13px); transition: opacity .24s ease, transform .24s ease;
}
.panel.hidden { display: block; opacity: 0; pointer-events: none; transform: translateY(-46%) scale(.97); }
.eyebrow { color: var(--cyan); font-size: 11px; font-weight: 800; letter-spacing: .3em; }
.panel h2 { margin: 11px 0 12px; font: 900 clamp(43px, 5.4vw, 76px)/.86 "KaiTi", serif; letter-spacing: .08em; }
.panel h2 span { color: var(--cyan); text-shadow: 0 0 28px rgba(112,247,223,.28); }
.panel > p { max-width: 450px; margin: 0 0 21px; color: #c2b9d5; font-size: clamp(12px, 1.08vw, 15px); line-height: 1.75; }
.skill-preview { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; margin: 0 0 24px; }
.skill-preview div { padding: 10px; border: 1px solid rgba(255,255,255,.09); border-radius: 9px; background: rgba(255,255,255,.035); }
.skill-preview b, .skill-preview strong, .skill-preview span { display: block; }
.skill-preview b { color: #847b9d; font-size: 9px; }
.skill-preview strong { margin: 4px 0 2px; color: #eee9f7; font-size: 13px; }
.skill-preview span { color: #7d748f; font-size: 9px; }
.primary-button {
  min-width: 172px; padding: 13px 27px; border: 0; border-radius: 6px 18px 6px 18px;
  color: #071512; background: linear-gradient(135deg, #7cffe8, #4bd7d0);
  box-shadow: 0 9px 30px rgba(63,226,209,.25); font-weight: 900; letter-spacing: .15em; cursor: pointer;
}
.primary-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.home-actions { display:flex; align-items:center; gap:10px; }
.secondary-button { padding:12px 19px; border:1px solid rgba(160,115,245,.4); border-radius:6px 16px 6px 16px; color:#cbbbe6; background:rgba(139,83,223,.1); font-weight:800; cursor:pointer; }
.home-wallet { display:flex; align-items:baseline; gap:8px; width:max-content; margin:-6px 0 15px; padding:8px 12px; border:1px solid rgba(255,210,120,.18); border-radius:9px; color:#81778e; background:rgba(255,196,88,.04); font-size:10px; }
.home-wallet strong { color:var(--gold); font-size:21px; }
.home-wallet span { color:#5f586b; font-size:8px; }
.panel .minor { margin-top: 11px; margin-bottom: 0; color: #6d647e; font-size: 9px; }

.end-panel { left: 50%; width: min(590px, 84%); text-align: center; transform: translate(-50%,-50%); }
.end-panel.hidden { transform: translate(-50%,-46%) scale(.97); }
.end-panel h2 { font-size: clamp(38px,5vw,66px); }
.results { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin: 19px 0; }
.results div { padding: 13px 6px; border: 1px solid rgba(255,255,255,.09); border-radius: 9px; background: rgba(255,255,255,.035); }
.results strong, .results span { display: block; }
.results strong { color: var(--gold); font-size: clamp(17px,2.4vw,29px); }
.results span { margin-top: 4px; color: #7c748d; font-size: 9px; }

.shop-panel { left:50%; width:min(1160px,94%); max-height:88%; transform:translate(-50%,-50%); padding:25px; overflow:hidden; background:linear-gradient(145deg,rgba(42,23,84,.97),rgba(12,12,36,.96)); border-radius:28px; }
.shop-panel.hidden { transform:translate(-50%,-46%) scale(.97); }
.shop-head { display:flex; align-items:flex-start; justify-content:space-between; }
.shop-head h2 { margin:6px 0 15px; font-size:clamp(30px,4vw,50px); }
.shop-close { width:36px; height:36px; border:1px solid rgba(255,255,255,.14); border-radius:50%; color:#bcb4cb; background:rgba(255,255,255,.05); font-size:23px; cursor:pointer; }
.premium-wallets { display:flex; gap:7px; margin:-8px 0 14px; overflow-x:auto; }
.currency { flex:none; padding:7px 11px; border-radius:999px; font-size:9px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); }
.currency strong { margin-left:5px; font-size:14px; }.currency.coin strong{color:#ffd278}.currency.star strong{color:#8fe9ff}.currency.dream strong{color:#e3a4ff}.currency.crown strong{color:#ff8fca}
.shop-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:9px; max-height:490px; padding:2px 4px 10px; overflow-y:auto; }
.shop-card { position:relative; display:flex; flex-direction:column; align-items:flex-start; min-height:190px; margin:0; padding:14px; border:1px solid rgba(255,255,255,.1); border-radius:20px; background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.025)); overflow:hidden; }
.shop-card::after{content:"";position:absolute;inset:auto -35% -55% 35%;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.12),transparent 67%);pointer-events:none}
.shop-card.rare{border-color:rgba(93,221,255,.48);background:linear-gradient(160deg,rgba(60,188,255,.18),rgba(104,72,210,.08))}
.shop-card.epic{border-color:rgba(209,116,255,.55);background:linear-gradient(160deg,rgba(177,72,255,.2),rgba(62,31,110,.09))}
.shop-card.mythic,.shop-card.blind-card{border-color:rgba(255,137,196,.58);background:linear-gradient(160deg,rgba(255,99,179,.2),rgba(131,59,214,.11))}
.rarity{position:absolute;right:9px;top:9px;padding:3px 7px;border-radius:999px;color:#fff;background:rgba(255,255,255,.13);font-size:7px;font-style:normal;letter-spacing:.08em}
.item-icon { display:grid; place-items:center; width:42px; height:42px; margin-bottom:11px; border-radius:12px; font:900 20px/1 "KaiTi",serif; }
.shop-art{width:72px;height:64px;margin:-3px 0 4px;object-fit:contain;filter:drop-shadow(0 8px 9px rgba(0,0,0,.3));align-self:center}
.item-icon.armor { color:#80efdd; background:rgba(92,239,213,.12); }
.item-icon.weapon { color:#b992ff; background:rgba(165,102,255,.13); }
.item-icon.potion { color:#ff8097; background:rgba(255,91,126,.13); }
.item-icon.life-pet { color:#83ffc3; background:rgba(74,234,150,.13); }
.item-icon.attack-pet { color:#8fd9ff; background:rgba(78,175,255,.13); }
.item-icon.phoenix{color:#ffd278;background:linear-gradient(145deg,#ff714a33,#ffca6433)}.item-icon.mount{color:#9ff3ff;background:#4ebeff24}.item-icon.star-effect{color:#ffd4ff;background:#c565ff24}.item-icon.void-effect{color:#d58aff;background:#7a35e233}.item-icon.blind{color:#fff;background:linear-gradient(145deg,#ff73bd,#8e65ff);box-shadow:0 0 18px #c06bff55}
.shop-card strong,.shop-card p,.shop-card small { display:block; }
.shop-card strong { font-size:14px; }
.shop-card p { min-height:34px; margin:5px 0 4px; color:#8e859e; font-size:10px; line-height:1.6; }
.shop-card small { color:#6f687b; font-size:9px; }
.shop-card button { width:100%; margin-top:auto; padding:9px; border:1px solid rgba(255,210,120,.28); border-radius:8px; color:#ffdb89; background:rgba(255,200,94,.08); font-weight:800; font-size:11px; cursor:pointer; }
.shop-card button:disabled { opacity:.35; cursor:not-allowed; }
.shop-message { min-height:20px; margin:12px 0 0!important; color:#7f768f!important; font-size:10px!important; text-align:center; }

.floor-banner {
  position: absolute; z-index: 6; left: 50%; top: 43%; transform: translate(-50%,-50%);
  min-width: 410px; padding: 22px 40px; text-align: center; pointer-events: none;
  border-top: 1px solid rgba(112,247,223,.38); border-bottom: 1px solid rgba(112,247,223,.38);
  background: linear-gradient(90deg, transparent, rgba(7,5,24,.88) 15%, rgba(7,5,24,.88) 85%, transparent);
  animation: bannerIn .35s ease both;
}
.floor-banner small, .floor-banner strong, .floor-banner span { display: block; }
.floor-banner small { color: var(--cyan); font-size: 10px; letter-spacing: .34em; }
.floor-banner strong { margin: 5px 0; font: 900 38px/1.2 "KaiTi",serif; letter-spacing: .12em; }
.floor-banner span { color: #8f86a3; font-size: 11px; }
@keyframes bannerIn { from { opacity:0; transform:translate(-50%,-44%) scale(.95); } }

.well-prompt {
  position: absolute; z-index: 6; left: 50%; bottom: 13%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; padding: 10px 17px; border-radius: 999px;
  border: 1px solid rgba(112,247,223,.4); background: rgba(7,5,23,.82); color: #dfd9ed;
  box-shadow: 0 0 30px rgba(86,238,215,.12); font-size: 11px; pointer-events: none;
}
.pause-badge { position:absolute; z-index:7; left:50%; top:45%; transform:translate(-50%,-50%); padding:11px 23px; border:1px solid rgba(255,255,255,.18); border-radius:999px; background:rgba(7,5,22,.86); letter-spacing:.2em; font-weight:800; }
.hidden { display: none !important; }

.mobile-skills, .mobile-move, .rotate-phone { display: none; }
footer { padding: 9px 5px 0; color: #575064; font-size: 9px; letter-spacing: .04em; }

@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  body { display:block; }
  .shell { padding:7px; }
  .topbar { margin:0 3px 7px; }
  .brand-rune { width:36px; font-size:19px; }
  h1 { font-size:16px; }
  .brand p, .record, footer { display:none; }
  .admin-link { display:none; }
  .stage { border-radius:14px; }
  .panel { left:4%; width:63%; padding:19px; }
  .panel > p { margin-bottom:12px; line-height:1.5; }
  .skill-preview { display:none; }
  .primary-button { min-width:135px; padding:10px 18px; }
  .panel .minor { display:none; }
  .end-panel { left:50%; width:88%; }
  .shop-panel { left:50%; width:92%; padding:18px; }
  .shop-grid { gap:6px; }
  .shop-card { min-height:150px; padding:10px; }
  .item-icon { width:32px; height:32px; margin-bottom:7px; font-size:16px; }
  .shop-card p { display:none; }
  .coin-purse { right:58px; top:22px; }
  .shop-grid { display:flex; overflow-x:auto; padding-bottom:5px; scroll-snap-type:x proximity; }
  .shop-card { min-width:125px; scroll-snap-align:start; }
  .stage.playing {
    position:fixed; z-index:50; top:50%; left:50%; width:min(100vw,177.778dvh); height:auto;
    max-width:none; aspect-ratio:16/9; transform:translate(-50%,-50%); border:0; border-radius:0;
    box-shadow:0 0 0 100vmax #02020a;
  }
  .stage.playing::after { border-radius:0; }
  .stage.playing #gameCanvas { cursor:default; }
  .mobile-skills {
    position:absolute; z-index:8; right:max(18px,env(safe-area-inset-right)); bottom:max(14px,env(safe-area-inset-bottom));
    width:174px; height:146px; pointer-events:none;
  }
  .mobile-move {
    position:absolute; z-index:8; left:max(22px,env(safe-area-inset-left)); bottom:max(17px,env(safe-area-inset-bottom));
    width:146px; height:154px; flex-direction:column; align-items:center; justify-content:flex-end;
    touch-action:none; user-select:none; -webkit-user-select:none;
  }
  .stage.playing .mobile-skills, .stage.playing .mobile-move { display:flex; }
  .joystick-ring {
    position:relative; width:126px; height:126px; border:2px solid rgba(147,242,255,.38); border-radius:50%;
    background:radial-gradient(circle,rgba(103,230,231,.14) 0 18%,rgba(11,10,33,.68) 20% 64%,rgba(84,72,143,.24));
    box-shadow:inset 0 0 25px rgba(109,247,226,.12),0 8px 28px rgba(0,0,0,.42); backdrop-filter:blur(7px);
  }
  .joystick-ring::before,.joystick-ring::after { content:""; position:absolute; left:50%; top:50%; background:rgba(173,238,255,.1); transform:translate(-50%,-50%); pointer-events:none; }
  .joystick-ring::before { width:1px; height:78%; }
  .joystick-ring::after { width:78%; height:1px; }
  .joystick-knob {
    position:absolute; left:50%; top:50%; width:58px; height:58px; transform:translate(-50%,-50%); border-radius:50%;
    border:2px solid rgba(224,255,255,.66); background:radial-gradient(circle at 35% 30%,rgba(224,255,255,.54),rgba(83,218,217,.34) 38%,rgba(14,21,49,.9) 74%);
    box-shadow:0 0 0 5px rgba(82,219,217,.08),0 7px 17px rgba(0,0,0,.4),inset 0 1px rgba(255,255,255,.42);
    transition:transform .08s ease-out; will-change:transform; pointer-events:none;
  }
  .mobile-move.active .joystick-knob { transition:none; box-shadow:0 0 0 7px rgba(82,219,217,.12),0 0 26px rgba(90,239,224,.28),inset 0 1px rgba(255,255,255,.55); }
  .joystick-arrow { position:absolute; z-index:1; color:rgba(211,252,255,.48); font:900 25px/1 system-ui; pointer-events:none; }
  .joystick-arrow.left { left:9px; top:49px; }.joystick-arrow.right { right:9px; top:49px; }.joystick-arrow.up { left:54px; top:5px; font-size:21px; }
  .joystick-hint { margin-top:5px; color:rgba(207,235,245,.62); font-size:9px; font-weight:800; letter-spacing:.08em; text-shadow:0 1px 4px #000; pointer-events:none; }
  .skill-button {
    position:absolute; overflow:hidden; width:58px; height:58px; padding:0; border-radius:50%; pointer-events:auto;
    border:1px solid rgba(255,255,255,.22); color:#e7e1ef; background:rgba(8,6,24,.7);
    box-shadow:0 7px 18px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.16); backdrop-filter:blur(7px);
    touch-action:none; user-select:none; -webkit-user-select:none; transition:transform .08s ease,filter .08s ease;
  }
  .skill-button.pressed { transform:scale(.9); filter:brightness(1.35); }
  .skill-button b, .skill-button span { position:relative; z-index:2; display:block; }
  .skill-button b { font:900 21px/1 "KaiTi",serif; text-shadow:0 2px 5px #000; }
  .skill-button span { margin-top:3px; color:#c3bbd0; font-size:8px; font-weight:800; }
  .skill-button i { position:absolute; z-index:1; left:0; right:0; bottom:0; height:0; display:grid; place-items:start center; padding-top:5px; color:#fff; background:rgba(21,16,43,.7); font-size:9px; font-style:normal; font-weight:900; pointer-events:none; transition:height .08s linear; }
  .skill-button.basic { right:0; bottom:0; width:74px; height:74px; border:2px solid rgba(112,247,223,.66); background:radial-gradient(circle at 34% 28%,rgba(134,255,238,.24),rgba(8,6,24,.82) 63%); box-shadow:0 0 22px rgba(112,247,223,.15),0 8px 22px rgba(0,0,0,.38); }
  .skill-button.basic b { font-size:28px; color:#dffff8; }
  .skill-button.medium { left:23px; bottom:2px; border-color:rgba(161,107,255,.62); }
  .skill-button.wave { left:0; top:18px; border-color:rgba(95,190,255,.68); }
  .skill-button.ultimate { right:16px; top:0; width:64px; height:64px; border:2px solid rgba(255,190,88,.72); background:radial-gradient(circle at 35% 28%,rgba(255,210,120,.25),rgba(20,10,26,.82) 66%); box-shadow:0 0 22px rgba(255,190,88,.13),0 7px 20px rgba(0,0,0,.38); }
  .skill-button.ultimate.ready { animation:ultimateReady 1s ease-in-out infinite alternate; }
  @keyframes ultimateReady { to { filter:brightness(1.25); box-shadow:0 0 32px rgba(255,190,88,.5),0 7px 20px rgba(0,0,0,.38); } }
  .skill-button.enter { right:0; bottom:0; width:68px; height:68px; color:var(--cyan); border-color:var(--cyan); box-shadow:0 0 25px rgba(112,247,223,.19); }
  .floor-banner { min-width:300px; padding:14px 24px; }
  .floor-banner strong { font-size:28px; }
  .well-prompt { display:none; }
}

@media (max-width: 560px) and (orientation: portrait), (hover:none) and (pointer:coarse) and (orientation:portrait) {
  .stage:not(.playing) { aspect-ratio:4/3; }
  .stage.playing { width:100vw; height:100dvh; aspect-ratio:auto; }
  .stage.playing .rotate-phone { position:fixed; z-index:30; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:#e9fefe; background:rgba(5,4,18,.96); text-align:center; }
  .rotate-phone span { color:var(--cyan); font-size:54px; line-height:1; animation:phoneTurn 1.4s ease-in-out infinite alternate; }
  .rotate-phone strong { font-size:20px; letter-spacing:.12em; }.rotate-phone small { color:#817a92; font-size:11px; }
  @keyframes phoneTurn { to { transform:rotate(90deg); } }
  .panel { top:45%; width:71%; }
  .panel h2 { font-size:38px; }
  .end-panel { width:91%; }
  .results { margin:10px 0; }
}

@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.001ms!important; transition-duration:.001ms!important; } }