:root{--r:20px;--r2:16px;--winH:176px;--itemH:46px;--bg:#061126;--card:#081a38;--card2:#06152e;--text:#f5f7ff;--txt:#ffffff;--muted:#b8c4dc;--primary:#37d8ff;--primary2:#43f5ff;--secondary:#6d3cff;--accent:#2bffe1;--blue:#175ba3;--blue2:#26579c;--blue3:#101823;--blue4:#3a518a;--dark:#070f2a;--dark2:#08102a;--dark3:#091235;--dark4:#0b163a;--border:#2a3c7d;--border2:#3551b8;--border-light:rgba(25,118,255,.65);--success:#47e69b;--warning:#ffd34d;--danger:#ff3f6e;--yellow:#e4f60b;--warn-bg:#1a1407;--warn-border:#4b3a12;--warn-text:#f6d08a;--hero-text:#000;--hero-muted:#131313;--shadow:0 26px 90px #000;--shadow2:0 18px 45px rgba(0,0,0,.42);--shadow3:0 18px 55px #000;--shadow4:0 14px 40px #000;--stroke:var(--border);--stroke2:var(--primary);--aqua:var(--primary)}
.random-page{color:var(--text)}
.random-page .random-card{position:relative;overflow:hidden;border-radius:25px;background:radial-gradient(520px 220px at 82% 6%,#34caff38,transparent 70%),linear-gradient(180deg,var(--card) 0%,var(--bg) 100%);padding:22px 22px 24px}
.random-page .random-card::before{content:"🎰";position:absolute;right:0;top:8px;width:200px;height:150px;display:flex;align-items:center;justify-content:center;font-size:118px;filter:drop-shadow(0 0 18px #23cdffbf);opacity:.18;pointer-events:none}
.random-page h1{position:relative;z-index:2;margin:0;font-size:clamp(34px,5vw,54px);line-height:1.05;font-weight:900;letter-spacing:-1.8px;color:var(--txt);text-shadow:0 2px 0 #00000040}
.random-page h1::first-letter{color:var(--primary)}
.random-page .sub{position:relative;z-index:2;margin:7px 0 20px;color:#e8edf8;font-size:20px;font-weight:600}
.hero{padding:3.5rem 0;text-align:left;color:var(--hero-text)}
.hero h1{font-size:30px;line-height:1.15;margin:0 0 12px;letter-spacing:.2px}
.hero p{margin:0;color:var(--hero-muted);line-height:1.65;font-size:15px}
.stamp{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:30px;border:1px solid var(--stroke);background:linear-gradient(180deg,#0b1430,#091027);box-shadow:var(--shadow4);color:var(--muted);font-weight:800;font-size:12px;letter-spacing:.2px;white-space:nowrap}
.stamp .orb{width:12px;height:12px;border-radius:30px;background:linear-gradient(180deg,var(--aqua),#2b59ff);box-shadow:0 0 0 4px #0a1533}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.panel{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);background-color:#2e468b;background:linear-gradient(180deg,var(--blue2) 0%,var(--blue3) 100%);border:2px solid var(--blue4);user-select:none}
.panel::before{content:"";position:absolute;top:0;right:0;width:86px;height:86px;background:linear-gradient(135deg,#255598 0%,#98b2ff 45%,#f7fbff 45%,#23508e 100%);clip-path:polygon(0 0,100% 0,100% 100%);pointer-events:none}
.hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px 10px}
.k-title{display:flex;align-items:center;gap:10px;font-weight:950;letter-spacing:.4px;text-transform:uppercase;color:var(--yellow)}
.k-ico{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;border:1px solid var(--stroke);background:linear-gradient(180deg,#0c1737,var(--dark2))}
.k-meta{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;font-weight:800;z-index:1}
.pill{padding:6px 10px;border-radius:30px;border:1px solid var(--stroke);background:var(--dark2);display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.bd{padding:12px}
.window{position:relative;height:var(--winH);border-radius:var(--r2);border:1px solid var(--stroke);overflow:hidden}
.window::after{content:"";position:absolute;inset:0;background:#000;opacity:.22;pointer-events:none;z-index:2}
.maskTop,.maskBot{position:absolute;left:0;right:0;height:52px;z-index:3;pointer-events:none}
.focus{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:calc(var(--itemH) + 10px);border-radius:14px;border:1px solid var(--stroke2);background:linear-gradient(180deg,#0b1433,#07102a);z-index:4}
.focus::before,.focus::after{content:"";position:absolute;top:50%;transform:translateY(-50%);width:10px;height:26px;border:2px solid var(--aqua);border-right:none;border-radius:8px 0 0 8px;left:10px}
.focus::after{left:auto;right:10px;border-right:2px solid var(--aqua);border-left:none;border-radius:0 8px 8px 0}
.reel{position:absolute;left:0;right:0;top:0;transform:translateY(0);will-change:transform;z-index:4}
.item{height:var(--itemH);display:flex;align-items:center;padding:0 25px;color:var(--muted);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item.is-final{color:var(--txt);font-weight:950;letter-spacing:.2px}
.actions{margin-top:12px;display:flex;gap:10px;align-items:center}
.spin{width:100%;border:0;padding:0;background:none;cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent}
.spin .cap{position:relative;height:54px;border-radius:16px;border:1px solid var(--border2);background:linear-gradient(180deg,var(--accent),var(--blue));box-shadow:var(--shadow3);overflow:hidden}
.spin .spin-row{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 12px;z-index:3}
.spin .left{display:flex;align-items:center;gap:10px;font-weight:950;letter-spacing:.6px;text-transform:uppercase;color:var(--txt)}
.spin .disc{width:34px;height:34px;border-radius:14px;display:grid;place-items:center;border:1px solid var(--border);background:linear-gradient(180deg,var(--dark4),var(--dark3))}
.spin .right{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:900;color:#cfe0ff;padding:7px 10px;border-radius:30px;border:1px solid var(--border);background:var(--dark);letter-spacing:.2px;white-space:nowrap}
.spark{width:10px;height:10px;border-radius:30px;background:var(--aqua);box-shadow:0 0 0 4px #071235}
.spin:hover .cap{transform:translateY(-1px)}
.spin:active .cap{transform:translateY(1px)}
.spin:focus-visible .cap{outline:3px solid #60a5fa;outline-offset:3px}
.spin[disabled]{cursor:not-allowed;opacity:.72}
.spin[disabled] .cap{transform:none}
.spin.is-spinning .spark{animation:spark 650ms ease-in-out infinite}
.spin.is-spinning .left .label{opacity:.95}
.spin.is-spinning .disc i{animation:rot 700ms linear infinite}
.result{margin-top:10px;padding:10px 12px;border-radius:14px;border:1px solid var(--stroke);background:linear-gradient(180deg,var(--dark2),#070c1f);color:var(--muted);font-size:13px;line-height:1.45;min-height:42px;display:flex;align-items:center;gap:10px}
.result b{color:var(--txt)}
.result .tag{flex:0 0 auto;padding:5px 9px;border-radius:30px;border:1px solid var(--border);background:var(--dark);color:#cfe0ff;font-weight:900;font-size:12px;letter-spacing:.2px}
.warnbox{margin-top:14px;padding:10px 12px;border-radius:14px;border:1px solid var(--warn-border);background:var(--warn-bg);color:var(--warn-text);font-size:13px}
@keyframes spark {
0%,100%{transform:scale(1)}
50%{transform:scale(1.6)}
}
@keyframes rot {
to{transform:rotate(360deg)}
}
@media (max-width:980px) {
.hero p{font-size:11px}
.grid{grid-template-columns:1fr}
}
@media (min-width:768px) {
.hero{text-align:center}
.hero h1{font-size:46px}
.hero p{max-width:760px;margin:auto;font-size:18px}
}