/* 官方场景、战术字体与抽奖界面的视觉层。 */
@font-face {
  font-family: "Delta Display";
  src: url("official/delta-display.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --bg: #090f13;
  --panel: #101c20;
  --text: #edf4f2;
  --muted: #94a6a8;
  --green: #48efb1;
  --line: #b5ddd51b;
  --display: "Delta Display", "Microsoft YaHei", sans-serif;
  --mono: "Bahnschrift", "Consolas", monospace;
}

body { font-family: "Microsoft YaHei", "PingFang SC", sans-serif; }
.lottery-page { background: var(--bg); position: relative; isolation: isolate; }
.page-scenery {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: 0 0 auto;
  height: 1050px;
  background:
    linear-gradient(180deg, #060d10b3, #08101454 23%, #091014b0 65%, var(--bg) 100%),
    linear-gradient(90deg, #061014d1, #07141666 48%, #081013d4),
    url("official/island-scene.webp") 50% 0 / cover no-repeat;
}
.page-scenery::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("official/tactical-map.webp") center / 1600px auto;
  mix-blend-mode: screen;
  opacity: .2;
  mask-image: linear-gradient(transparent, #000 55%, transparent);
}
.site-header {
  position: relative;
  z-index: 2;
  height: 88px;
  background: #050d10b8;
  border-bottom-color: #a8d5c52b;
  backdrop-filter: blur(18px);
}
.site-header::after {
  content: "";
  position: absolute;
  width: 160px;
  height: 1px;
  background: linear-gradient(90deg, var(--green), transparent);
  bottom: -1px;
  left: clamp(20px, 3.6vw, 66px);
}
.game-brand img { width: 185px; }
.school-brand img { width: 43px; height: 43px; }
.school-brand > span { font-size: 15px; font-weight: 500; }
.school-brand small { color: #91a8a9; font: 6px var(--mono); letter-spacing: 1.1px; margin-top: 7px; }
.header-link { padding: 9px 0 9px 17px; border-left: 1px solid #bedfd62b; color: #b5c5c5; }
.header-link:hover { color: var(--green); }
.lottery-page main { max-width: 1600px; position: relative; }
.event-strip { font-size: 11px; color: #b3c4c2; padding: 18px 0; border-color: #cce9dc20; }
.status-dot { background: var(--green); box-shadow: 0 0 10px #48efb15c; }
.strip-mark { display: inline-block; width: 30px; height: 6px; margin-left: 8px; background: repeating-linear-gradient(120deg, #62a99877 0 3px, transparent 3px 7px); }
.lottery-layout { grid-template-columns: minmax(220px, .82fr) minmax(390px, 1.8fr) minmax(270px, 1fr); gap: 30px; padding: 36px 0 30px; }
.intro { padding-top: 17px; }
.eyebrow { font: 10px var(--mono); letter-spacing: 2px; color: #afc2c2; }
.eyebrow-line { display: inline-block; height: 2px; width: 16px; padding: 0 !important; margin: 0 7px 3px 0; background: var(--green); }
.intro h1 { font: 700 clamp(42px, 3.8vw, 62px)/1.17 var(--display); letter-spacing: 2px; margin: 20px 0 18px; text-shadow: 0 4px 24px #0008; }
.intro h1 em { display: inline-block; color: #74f5c1; text-shadow: 0 0 30px #1cff9320; }
.intro-copy { color: #bdcfcd; font-size: 12px; letter-spacing: 1px; }
.intro-line { width: 55px; margin: 24px 0; background: linear-gradient(90deg, var(--green) 0 30px, #48efb127 30px); }
.stock-stats { gap: 36px; }
.stock-stats dt { color: #a2b4b4; font-size: 11px; }
.stock-stats dd { font: 700 43px/1.2 var(--display); margin-top: 9px; font-variant-numeric: tabular-nums; }
.stock-stats small { color: #9fb1af; margin-left: 8px; font-size: 11px; }
.operator-art {
  height: 310px;
  margin-top: 22px;
  margin-left: -12px;
  margin-right: -14px;
  background:
    linear-gradient(180deg, #09121500 40%, #091215dc 100%),
    url("official/operator-wolf.jpg") 65% 35% / auto 100% no-repeat;
  mask-image: linear-gradient(180deg, transparent, #000 13%, #000 83%, transparent);
}
.operator-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #142b2530, transparent, #09151925); pointer-events: none; }
.art-caption { bottom: 31px; left: 13px; z-index: 1; border-color: var(--green); padding-left: 10px; }
.art-caption span { font: 700 15px var(--display); letter-spacing: 2px; }
.art-caption b { display: block; margin-top: 7px; color: #99b6b1; font-size: 8px; letter-spacing: 2px; }
.art-mark { position: absolute; z-index: 1; width: 32px; height: auto; right: 16px; bottom: 36px; opacity: .65; }
.art-corner { position: absolute; top: 37px; left: 14px; z-index: 1; height: 18px; width: 18px; border-left: 1px solid #bbf2dd77; border-top: 1px solid #bbf2dd77; }

.wheel-column { padding-top: 2px; }
.wheel-heading { max-width: 580px; padding: 0 24px; margin-bottom: 15px; font-size: 13px; color: #e0eeea; }
.wheel-heading > span:first-child { display: flex; align-items: center; gap: 8px; }
.wheel-heading > span:first-child::before { content: ""; width: 5px; height: 5px; border: 1px solid var(--green); transform: rotate(45deg); }
.wheel-heading .micro { color: #9cb6b2; font-size: 10px; }
.wheel-stage { width: min(100%, 580px); margin: 0 auto 22px; overflow: visible; }
.wheel-stage::before { inset: 0; border: 1px solid #91cfb71a; background: radial-gradient(circle, #57e5ab0b 45%, transparent 68%); }
.wheel-stage::after { inset: 7%; border-color: #a5efd13d; box-shadow: 0 0 18px #57ecbc14, inset 0 0 15px #07130f99; }
.wheel-frame { position: absolute; inset: 3.4%; border-radius: 50%; border: 1px solid #9dbbae5c; background: conic-gradient(from 20deg, #182c2c, #44615b 13%, #16282a 24%, #102125 46%, #5f807369 57%, #15262b 70%, #597a6b 88%, #182c2c); box-shadow: 0 20px 45px #000b, inset 0 0 0 4px #0b1619, 0 0 0 5px #0a131666; }
.wheel-halo { position: absolute; inset: -1.3%; border-radius: 50%; border: 1px solid #76aa9514; overflow: hidden; }
.wheel-halo::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; border-top-color: #68f5ba8c; border-bottom-color: #5aa78b55; transform: rotate(-26deg); mask: conic-gradient(#000 0deg 35deg, transparent 35deg 180deg, #000 180deg 209deg, transparent 209deg); }
.wheel-reticle { position: absolute; inset: -1.8%; }
.wheel-reticle span { position: absolute; width: 19px; height: 19px; border-color: #79c8ac6b; border-style: solid; }
.wheel-reticle span:nth-child(1) { left: 12%; top: 12%; border-width: 1px 0 0 1px; }
.wheel-reticle span:nth-child(2) { right: 12%; top: 12%; border-width: 1px 1px 0 0; }
.wheel-reticle span:nth-child(3) { right: 12%; bottom: 12%; border-width: 0 1px 1px 0; }
.wheel-reticle span:nth-child(4) { left: 12%; bottom: 12%; border-width: 0 0 1px 1px; }
.wheel-ticks { inset: .4%; background: repeating-conic-gradient(from -.1deg, #a3dac8aa 0deg .28deg, transparent .28deg 3deg); mask: radial-gradient(circle, transparent 66.2%, #000 66.6%, #000 68.3%, transparent 68.8%); }
.wheel-shell { inset: 5.2%; border: 6px solid #0a191b; box-shadow: 0 0 0 1px #7bbaa073, 0 0 0 3px #061013, inset 0 0 25px #000; background: #102322; }
.wheel-coordinate { color: #7ca696; background: #0b171c; font-size: 8px; }
.coordinate-top { top: -12px; }
.coordinate-left { left: -10px; }
.coordinate-right { right: -10px; }
.wheel-pointer { top: 1.2%; width: 26px; height: 45px; background: linear-gradient(90deg, #71ebaa 49%, #c7ffde 50%, #94ecc4 63%); filter: drop-shadow(0 3px 6px #000); }
.wheel-hub { width: 22%; height: 22%; gap: 5px; border: 5px solid #203d36; background: radial-gradient(circle at 40% 20%, #355346, #13272a 62%, #061114); box-shadow: 0 0 0 1px #a1dfb88c, 0 0 0 6px #071719a6, 0 9px 18px #000b, inset 0 1px 5px #a4ddc149; color: #e9fff3; font-family: var(--display); font-size: 14px; letter-spacing: 1px; }
.wheel-hub:hover:not(:disabled) { background: radial-gradient(circle at 40% 20%, #46765e, #1a3a35 62%, #0b201d); box-shadow: 0 0 0 1px #baffdc, 0 0 0 6px #071719a6, 0 0 30px #40efaa33; }
.wheel-hub small { font: 6px var(--mono); color: #94b9a8; letter-spacing: 1.4px; }
.delta-symbol { width: 42px; height: 35px; filter: drop-shadow(0 0 7px #00efa735); }
.wheel-label { font-family: var(--display); font-weight: 700; letter-spacing: .7px; paint-order: stroke; stroke: #092420bd; stroke-width: 1.4px; }
.wheel-label-light { fill: #f4fff8; }
.wheel-sub-label { font-family: var(--mono); font-size: 13px; font-weight: 400; letter-spacing: 1px; fill: #d2e9dc; }
.sector-path { stroke: #092224; stroke-width: 1.4px; }
.sector-path.winner { filter: brightness(1.75); }
.sector-texture { mix-blend-mode: screen; pointer-events: none; stroke: none; }
.wheel-stage[aria-busy="true"] .wheel-halo { animation: wheel-scan 3s linear infinite; }
.wheel-stage[aria-busy="true"] .wheel-pointer { filter: drop-shadow(0 0 10px #79ffc6); }
@keyframes wheel-scan { to { transform: rotate(360deg); } }

.primary-button { background: #54edab; border-color: #7affa9; color: #09211c; font: 700 16px var(--display); padding: 15px 28px; min-height: 52px; letter-spacing: 2px; position: relative; white-space: nowrap; transition: background .2s, filter .2s; }
.primary-button::before { content: ""; position: absolute; pointer-events: none; inset: 3px; border-top: 1px solid #e3ffe67a; }
.primary-button:hover:not(:disabled) { background: #9bffd3; filter: drop-shadow(0 0 14px #5cedad33); }
.primary-button:disabled { background: #293e3e; color: #9ab5ad; border-color: #3e5750; }
.spin-button { width: 70%; max-width: 338px; min-height: 57px; font-size: 21px; }
.button-arrow { font-family: var(--mono); right: 23px; font-size: 26px; }
.spin-status { font-size: 12px; color: #c9d9d5; margin-top: 15px; }
.wheel-note { display: flex; gap: 9px; justify-content: center; align-items: center; color: #87a19b; margin-top: 7px; }
.wheel-note span { width: 18px; height: 1px; background: #7bc3a14a; }

.prizes-panel { position: relative; border: 1px solid #89b7aa32; border-top: 2px solid #89b7aa55; padding: 22px 20px 0; background: linear-gradient(135deg, #20363280, #0b1a1edb 45%, #122528d6), url("official/tactical-map.webp") center / cover; box-shadow: 0 15px 45px #0003; backdrop-filter: blur(10px); }
.prizes-panel::before { content: ""; position: absolute; top: -2px; left: -1px; width: 66px; height: 2px; background: var(--green); }
.panel-heading { margin-bottom: 20px; }
.panel-heading .eyebrow { font-size: 8px; color: #8ea8a4; letter-spacing: 1.7px; }
.panel-heading h2 { font: 700 25px var(--display); letter-spacing: 2px; margin-top: 7px; }
.pool-badge { border-color: #47aa8040; color: #9cc8b9; display: flex; align-items: center; gap: 5px; padding: 3px 6px; font-size: 9px; }
.pool-badge .status-dot { width: 4px; height: 4px; box-shadow: none; }
.prize-columns { color: #89a39f; border-color: #9cbeb12e; font-size: 10px; padding-bottom: 10px; }
.prize-list { max-height: 575px; scrollbar-color: #648d7a transparent; }
.prize-item { min-height: 49px; padding: 9px 0; gap: 11px; border-color: #96b3a919; transition: background .2s; }
.prize-item:hover { background: #acffe805; }
.prize-number { color: #92b8ac; font: 10px var(--mono); position: relative; width: 19px; }
.prize-number::after { content: ""; display: block; height: 2px; width: 12px; margin-top: 6px; background: var(--swatch); box-shadow: 0 0 7px color-mix(in srgb, var(--swatch), transparent 60%); }
.prize-name { font-size: 12px; font-weight: 500; color: #e3eeeb; line-height: 1.55; }
.prize-stock { font-size: 10px; color: #87a59d; margin-top: 2px; }
.prize-probability { color: #e6f6eb; font: 700 14px var(--display); }
.prize-progress { left: 30px; opacity: .3; }
.prize-footnote { padding: 16px 0; gap: 11px; color: #86a79d; }
.prize-footnote p { font-size: 10px; line-height: 1.8; }
.small-cross { color: #56dbac; }
.session-bar { background: linear-gradient(90deg, #1c393233, #0b161c50); padding: 17px 18px; border-color: #a8d1c029; }
.session-bar p { color: #c9dcd6; font-size: 12px; }
.session-bar > .micro { color: #90b0a6; }
.text-button { color: #9bb4ad; }

.battlefield-banner { height: 360px; position: relative; isolation: isolate; overflow: hidden; margin-top: 32px; background: #111b1f; }
.battlefield-banner::before { content: ""; position: absolute; z-index: -2; inset: 0; background: url("official/battlefield-footer.webp") center 48% / cover no-repeat; transform: scale(1.01); }
.battlefield-banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--bg), #0912152e 26%, #09121524 58%, #061015ef), linear-gradient(90deg, #071014e3 5%, #06101481 42%, #0710140d 75%, #0710145c); }
.banner-edge { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, #a9dac73a 20%, #a9dac73a 80%, transparent); }
.banner-content { height: 100%; max-width: 1600px; margin: auto; padding: 66px clamp(20px, 3.6vw, 66px) 55px; display: flex; align-items: center; justify-content: space-between; }
.banner-content .eyebrow { color: #a9cac0; font-size: 9px; letter-spacing: 3px; }
.banner-content img { display: block; width: 290px; height: auto; margin: 21px 0 19px; filter: drop-shadow(0 4px 15px #0009); }
.banner-content p { font: 700 19px var(--display); letter-spacing: 3px; color: #cde2d8; }
.official-link { align-self: flex-end; display: flex; gap: 45px; align-items: center; padding: 12px 0; color: #cde2d7; font-size: 12px; border-bottom: 1px solid #b2d5bf66; }
.official-link span { font-size: 24px; color: var(--green); }
.official-link:hover { color: var(--green); border-color: var(--green); }
.site-footer { position: relative; max-width: none; background: #060f12; border-top: 1px solid #a1c2b318; color: #778f8d; font-size: 10px; padding-top: 22px; padding-bottom: 22px; }
.site-footer a { color: #a9c2ba; }

.result-dialog { overflow: hidden; isolation: isolate; padding: 40px 34px 33px; border-color: #69b79799; background: #0b191d; box-shadow: 0 0 0 6px #0c1c20aa, 0 30px 120px #000d; }
.result-dialog::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, #0612146e, #08161bc9 50%, #08161b 80%); }
.result-scene { position: absolute; z-index: -2; inset: 0 0 auto; height: 320px; background: url("official/operation-scene.webp") 65% 45% / cover; opacity: .8; }
.result-dialog > .eyebrow { color: #c3eedb; }
.result-dialog::backdrop { background: #02090dce; backdrop-filter: blur(12px); }
.result-emblem { border-color: #6af0b675; background: radial-gradient(circle, #b4ffcc29, #0d201899); box-shadow: 0 0 24px #68ffb223, inset 0 0 14px #a6ffce11; }
.result-emblem .delta-symbol { width: 54px; height: 46px; }
.result-kicker { font-family: var(--display); color: #81eebb; font-size: 16px; }
.result-dialog h2 { font: 700 34px/1.4 var(--display); text-shadow: 0 2px 15px #000; }
.result-copy { color: #b0c9c0; }
.dialog-close { color: #a1c2b9; z-index: 1; }

.admin-page { background: linear-gradient(#081216eb, #081216f5), url("official/island-scene.webp") 50% 0 / 100% auto fixed no-repeat, #091216; }
.admin-main { max-width: 1080px; padding-top: 36px; }
.admin-title { padding: 8px 0 24px; margin-bottom: 15px; position: relative; }
.admin-title h1 { font: 700 39px var(--display); margin: 13px 0 8px; }
.admin-title p { color: #9bb5b1; font-size: 12px; }
.admin-title .eyebrow { color: #74b7a3; }
.save-indicator { font-size: 11px; color: #8fa9a3; border-left: 2px solid #54766b; padding-left: 10px; }
.save-indicator.dirty { color: var(--green); border-color: var(--green); }
.config-toolbar { border-color: #97c2b431; padding: 21px 0; }
.field-heading { color: #b7cec6; }
.segmented { background: #081418; border-color: #3b5b52; }
.segmented button { color: #91aea4; }
.segmented button[aria-pressed="true"] { background: #2a695743; color: #8effc8; box-shadow: inset 0 -1px var(--green); }
.admin-total { color: #9bb4aa; }
.admin-total strong { font-family: var(--display); font-size: 25px; }
.form-hint { color: #92aaa2; font-size: 12px; line-height: 1.8; }
.editor-panel { background: #0c1b20ed; border-color: #4e72615c; box-shadow: 0 20px 60px #0003; }
.editor-head { background: linear-gradient(90deg, #25483d99, #152b2b); border-color: #6388743d; color: #a6c4b6; padding-top: 15px; padding-bottom: 15px; }
.editor-row { border-color: #99beae12; padding-top: 12px; padding-bottom: 12px; }
.editor-row:hover { background: #90fed308; }
.editor-row input:not([type="checkbox"]) { background: #091619; border-color: #47675870; color: #dcefe5; padding-top: 10px; padding-bottom: 10px; }
.editor-row input:focus { border-color: #5beab1; }
.editor-row input:disabled { color: #647f74; border-color: #5b7e631f; }
.probability-field > span { color: #7d9e8c; top: 11px; }
.switch input:checked + .switch-track { background: #30645166; border-color: #58d398; }
.switch input:checked + .switch-track::after { background: #66efb3; }
.switch-track { background: #324640; border-color: #5a746a; }
.switch-label { color: #b6cfc0; }
.item-index { color: #799e8a; }
.delete-button { color: #7d9b8b; }
.editor-summary { background: #1b342b9c; color: #9abaad; }
.editor-summary strong { font-family: var(--display); color: #7ef7bd; }
.add-button { color: #6ae8b1; }
.secondary-button { color: #b1cabb; border-color: #527762a6; }
.admin-actions { margin-top: 25px; border-top: 1px solid #63887430; padding-top: 22px; }
.storage-hint { color: #87a598; }
.notice { background: #3b391de8; border-color: #b7a45c66; color: #e0d89e; }
.notice.success { background: #1543308c; border-color: #51c88955; color: #97f7c5; }

@media (min-width: 1650px) {
  .lottery-layout { gap: 34px; padding-top: 40px; }
  .wheel-stage { width: 610px; }
  .wheel-heading { max-width: 610px; }
  .operator-art { height: 350px; }
  .prize-item { padding-top: 11px; padding-bottom: 11px; }
  .prize-list { max-height: 620px; }
}

@media (min-width: 1151px) and (max-height: 900px) {
  .site-header { height: 74px; }
  .event-strip { padding: 14px 0; }
  .lottery-layout { padding-top: 25px; gap: 26px; }
  .intro { padding-top: 10px; }
  .intro h1 { font-size: 46px; margin: 17px 0 13px; }
  .intro-line { margin: 18px 0; }
  .stock-stats dd { font-size: 36px; }
  .operator-art { height: 236px; margin-top: 13px; }
  .wheel-stage { width: min(100%, calc(100vh - 315px)); }
  .wheel-heading { max-width: 480px; margin-bottom: 11px; }
  .wheel-hub { font-size: 12px; }
  .wheel-hub small { font-size: 5px; }
  .prizes-panel { padding: 16px 17px 0; }
  .panel-heading { margin-bottom: 15px; }
  .panel-heading h2 { font-size: 23px; }
  .prize-item { min-height: 43px; padding-top: 6px; padding-bottom: 6px; }
  .prize-footnote { padding: 12px 0; }
}

@media (max-width: 1150px) {
  .site-header { gap: 18px; }
  .game-brand img { width: 160px; }
  .school-brand small { font-size: 5px; }
  .lottery-layout { grid-template-columns: minmax(330px, 1.65fr) minmax(265px, 1fr); gap: 32px; padding-top: 28px; }
  .intro { grid-column: 1 / -1; min-height: 202px; padding: 11px 0 28px; margin-bottom: 0; }
  .intro h1 { font-size: 46px; margin: 15px 0; }
  .intro h1 br { display: none; }
  .intro h1 em { margin-left: 18px; }
  .operator-art { position: absolute; height: auto; width: 51%; top: -18px; bottom: -1px; right: 0; margin: 0; opacity: .28; background-size: cover; mask-image: linear-gradient(90deg, transparent, #000 40%, #000 85%, transparent); }
  .art-caption, .art-mark, .art-corner { display: none; }
  .stock-stats { margin-right: 4px; gap: 27px; }
  .wheel-column { padding: 0 8px; }
  .wheel-stage { margin-top: 21px; }
  .wheel-heading { padding: 0 7px; }
  .wheel-hub { font-size: 12px; }
  .prizes-panel { padding-left: 17px; padding-right: 17px; }
  .prize-item { gap: 9px; }
  .prize-probability { font-size: 13px; }
}

@media (max-width: 760px) {
  .site-header { height: 72px; padding: 0 20px; gap: 13px; }
  .game-brand img { width: 130px; }
  .school-brand img { width: 33px; height: 33px; }
  .school-brand > span { font-size: 11px; letter-spacing: 0; }
  .school-brand small { display: none; }
  .header-link { padding-left: 0; border-left: 0; font-size: 10px; gap: 5px; }
  .page-scenery { height: 950px; background-position: 0 0, 0 0, 56% 0; }
  .event-strip { font-size: 9px; padding: 15px 0; }
  .strip-mark { display: none; }
  .lottery-layout { grid-template-columns: 1fr; padding-top: 23px; gap: 28px; }
  .intro { grid-column: auto; padding-top: 0; min-height: 212px; padding-bottom: 21px; }
  .intro .eyebrow { font-size: 8px; letter-spacing: 1.2px; }
  .eyebrow-line { width: 12px; margin-right: 4px; }
  .intro h1 { font-size: 42px; line-height: 1.18; margin: 16px 0 12px; }
  .intro h1 br { display: block; }
  .intro h1 em { margin-left: 0; }
  .intro-copy { font-size: 10px; letter-spacing: 0; }
  .stock-stats { gap: 19px; margin: 7px 0 0 12px; }
  .stock-stats dd { font-size: 29px; }
  .stock-stats dt { font-size: 10px; }
  .stock-stats small { font-size: 9px; margin-left: 4px; }
  .operator-art { width: 62%; top: -15px; bottom: 0; opacity: .4; background-position: 64% 22%; }
  .wheel-column { padding: 0 5px; }
  .wheel-heading { font-size: 12px; padding: 0; margin-bottom: 18px; }
  .wheel-heading .micro { font-size: 9px; }
  .wheel-stage { max-width: 480px; margin-top: 17px; margin-bottom: 24px; }
  .wheel-frame { box-shadow: 0 15px 30px #0008, inset 0 0 0 3px #0b1619; }
  .wheel-shell { border-width: 4px; }
  .wheel-pointer { width: 19px; height: 33px; }
  .wheel-hub { border-width: 3px; font-size: 10px; gap: 3px; }
  .wheel-hub small { font-size: 4px; letter-spacing: .8px; }
  .wheel-hub .delta-symbol { width: 28px; height: 24px; }
  .wheel-reticle span { width: 12px; height: 12px; }
  .coordinate-top { top: -9px; }
  .coordinate-left { left: -9px; }
  .coordinate-right { right: -9px; }
  .spin-button { min-height: 54px; font-size: 19px; width: 75%; }
  .spin-status { font-size: 10px; }
  .wheel-note { font-size: 9px; gap: 6px; }
  .prizes-panel { padding: 19px 17px 0; }
  .panel-heading { margin-bottom: 15px; }
  .panel-heading h2 { font-size: 23px; }
  .prize-list { max-height: none; column-gap: 20px; }
  .prize-item { padding-top: 11px; padding-bottom: 11px; gap: 7px; }
  .prize-name { font-size: 12px; }
  .prize-number { width: 14px; font-size: 9px; }
  .prize-number::after { width: 10px; }
  .prize-stock { font-size: 10px; }
  .prize-probability { font-size: 12px; }
  .prize-progress { left: 21px; }
  .prize-footnote { padding: 15px 0; }
  .prize-footnote p br { display: initial; }
  .prize-footnote p { font-size: 9px; }
  .session-bar { padding: 15px 10px; gap: 10px; }
  .session-bar p { font-size: 10px; }
  .session-bar button { font-size: 9px; }
  .battlefield-banner { height: 280px; margin-top: 25px; }
  .battlefield-banner::before { background-position: 28% 50%; }
  .battlefield-banner::after { background: linear-gradient(180deg, var(--bg), #0711144a 30%, #061015ef), linear-gradient(90deg, #08121680, #08121611); }
  .banner-content { padding: 39px 23px 25px; flex-direction: column; align-items: flex-start; }
  .banner-content .eyebrow { font-size: 8px; letter-spacing: 2px; }
  .banner-content img { width: 200px; margin: 15px 0 13px; }
  .banner-content p { font-size: 14px; letter-spacing: 2px; }
  .official-link { align-self: flex-end; font-size: 10px; gap: 21px; padding: 7px 0; }
  .official-link span { font-size: 20px; }
  .site-footer { font-size: 8px; gap: 7px; line-height: 1.8; }
  .result-dialog { padding: 34px 25px 27px; }
  .result-dialog h2 { font-size: 30px; }
  .admin-main { padding: 28px 20px 20px; }
  .admin-title { padding-bottom: 15px; margin-bottom: 7px; }
  .admin-title h1 { font-size: 33px; }
  .save-indicator { font-size: 10px; padding-left: 8px; }
  .config-toolbar { gap: 18px; padding: 19px 0; }
  .admin-total strong { font-size: 22px; }
  .form-hint { font-size: 11px; }
  .editor-row { padding: 17px 16px; }
  .probability-field > span { top: 33px; }
  .editor-row input:not([type="checkbox"]) { font-size: 12px; }
  .editor-summary { padding: 15px 16px; }
  .admin-actions { gap: 16px; }
  .admin-actions .primary-button { min-width: 140px; font-size: 15px; padding: 13px 16px; gap: 14px; }
  .storage-hint { line-height: 1.9; font-size: 10px; }
}

@media (max-width: 400px) {
  .site-header { padding: 0 16px; gap: 9px; }
  .game-brand img { width: 112px; }
  .school-brand img { width: 29px; height: 29px; }
  .school-brand > span { font-size: 10px; }
  .header-link { font-size: 9px; }
  .intro h1 { font-size: 36px; }
  .intro { min-height: 196px; }
  .stock-stats { gap: 14px; }
  .stock-stats dd { font-size: 26px; }
  .intro-copy { font-size: 9px; }
  .prizes-panel { padding-left: 13px; padding-right: 13px; }
  .prize-list { column-gap: 12px; }
  .prize-item { gap: 5px; }
  .prize-name { font-size: 12px; }
  .prize-probability { font-size: 12px; }
  .wheel-hub { font-size: 9px; }
  .wheel-hub small { font-size: 3.5px; }
}

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