*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Inter,system-ui,sans-serif;background:radial-gradient(circle at top,#1e293b,#020617);color:#fff;display:flex;justify-content:center;align-items:center}.app{width:100%;max-width:1600px;margin:0 auto;padding:20px;text-align:center;min-height:100vh;display:flex;flex-direction:column}.header{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:10px;margin-bottom:20px}.header h1{font-size:2.4rem;font-family:Bungee,cursive;background:linear-gradient(90deg,#60a5fa,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.disk-select{display:flex;align-items:center;gap:5px;font-size:1.1rem;background-color:inherit}.disk-select select{color:#fff;background:transparent;border:1px solid currentColor;margin-left:6px;padding:5px 6px;border-radius:8px;background-color:#0a162f}.disk-select select:hover{transform:translateY(-.5px)}.stats{font-size:1.1rem}.time{font-size:1.05rem}.win{color:#22c55e;font-size:1.4rem}.game-card{background:#0f172aa6;border-radius:20px;padding:30px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 20px 40px #0009;flex:1}.layout{display:grid;grid-template-columns:minmax(260px,320px) 1fr minmax(260px,320px);grid-template-areas:"left main right";gap:28px;align-items:start;width:100%;padding:8px 18px;justify-items:center}.main-area{grid-area:main;display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:1100px;margin:0 auto}.panel{background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:20px;color:#e6eefc;-webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);box-shadow:0 10px 40px #04061799,0 0 18px #6366f10f;transition:transform .35s ease,box-shadow .25s ease,border-color .25s;opacity:0;animation:fadeIn .6s ease forwards,float 6s ease-in-out infinite;animation-delay:.12s;min-width:260px;width:100%;box-sizing:border-box;overflow-wrap:break-word;position:relative;z-index:3}.left-panel{grid-area:left;justify-self:end;max-width:320px;min-width:260px}.right-panel{grid-area:right;justify-self:start;max-width:320px;min-width:260px}.panel-title{font-size:1.15rem;margin:0 0 8px;color:#a9d6ff;text-shadow:0 0 8px rgba(96,165,250,.2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rules,.tips{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}.rule,.tip{display:flex;gap:12px;align-items:flex-start;font-size:1.02rem;line-height:1.6;opacity:.95}.rule-icon{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;font-size:1.12rem;border-radius:10px;background:linear-gradient(90deg,#60a5fa1f,#a78bfa0f);box-shadow:0 6px 18px #6366f10f;animation:iconPulse 4s ease-in-out infinite}@keyframes iconPulse{0%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.04)}to{transform:translateY(0) scale(1)}}.rule:hover .rule-icon{transform:scale(1.06);box-shadow:0 12px 30px #6366f11f}.formula-box{margin-top:12px;padding:14px;border-radius:14px;background:linear-gradient(90deg,#0a142f8c,#0a121e6b);border:1px solid rgba(96,165,250,.22);box-shadow:0 8px 40px #60a5fa14,0 0 30px #60a5fa1f;display:flex;flex-direction:column;align-items:center;gap:10px}.formula-box{margin-top:12px;padding:18px;border-radius:16px;background:#0a142f8c;border:1px solid rgba(96,165,250,.22);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;position:relative;overflow:hidden}.formula-box:before,.formula-box:after,.formula-clean:before,.formula-clean:after,.formula-clean *:before,.formula-clean *:after{content:none!important;display:none!important;background:none!important;border:none!important;box-shadow:none!important}.formula-clean{display:flex;align-items:flex-start;justify-content:center;gap:4px;line-height:1;font-weight:800;position:relative}.formula-clean .num{font-size:2.6rem;color:#bde0ff}.formula-clean .power{font-size:1rem;margin-top:2px;color:#e0f2ff}.formula-clean .minus{font-size:1.4rem;margin-left:6px;color:#fff}.formula-text{font-size:1rem;color:#dbeafe;text-align:center}.formula-box{justify-content:center;min-height:86px}.formula-box,.formula-clean{position:relative;z-index:4}@media(max-width:768px){.formula-clean .num{font-size:2rem}.formula-clean .power{font-size:.9rem}.formula-clean .minus{font-size:1.1rem}}@media(max-width:420px){.formula-clean .num{font-size:1.8rem}.formula-clean .power{font-size:.8rem}.formula-clean .minus{font-size:1rem}}.panel:hover{transform:translateY(-6px);box-shadow:0 18px 50px #60a5fa1f,0 0 30px #60a5fa1f;border-color:#60a5fa59}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-6px)}to{transform:translateY(0)}}@media(max-width:1400px){.layout{grid-template-columns:minmax(280px,320px) 1fr minmax(280px,320px);gap:26px}.left-panel,.right-panel{max-width:300px;min-width:240px}}@media(max-width:1200px){.layout{grid-template-columns:minmax(240px,300px) 1fr minmax(240px,300px);gap:22px;padding:8px 14px}.left-panel,.right-panel{max-width:280px;min-width:220px}.panel{padding:18px}}@media(max-width:992px){.layout{grid-template-columns:minmax(220px,260px) 1fr minmax(220px,260px);gap:20px}.left-panel,.right-panel{max-width:260px;min-width:200px}}@media(max-width:768px){.layout{grid-template-columns:1fr;grid-template-areas:"main" "left" "right";gap:18px;padding:8px 12px}.main-area{grid-area:main;order:0}.left-panel{grid-area:left;order:1;justify-self:stretch;max-width:none;min-width:auto;margin-top:8px}.right-panel{grid-area:right;order:2;justify-self:stretch;max-width:none;min-width:auto;margin-top:8px}.panel{animation:none;opacity:1;padding:16px;border-radius:12px}.panel-title{white-space:normal;overflow:visible}.rules,.tips{gap:10px}.game{gap:20px}}@media(max-width:576px){.panel{padding:14px;border-radius:10px}.panel-title{font-size:1.05rem}.rule,.tip{font-size:1rem;line-height:1.55}.tower{width:100px;height:220px}.game{gap:16px}.top-controls{justify-content:center}.controls{gap:12px}}.game{display:flex;justify-content:center;align-items:flex-end;gap:90px;flex-wrap:wrap}.tower{width:180px;height:340px;border-radius:16px;background:#ffffff0d;border:1px solid rgba(255,255,255,.15);display:flex;flex-direction:column-reverse;align-items:center;padding-bottom:14px;position:relative;cursor:pointer;transition:transform .25s ease}.tower:hover{transform:translateY(-4px)}.tower.selected{outline:3px solid #facc15}.tower.goal{border-color:#facc15;box-shadow:0 0 25px #facc1559}.goal-label{position:absolute;top:-32px;font-size:1.3rem;font-weight:700;letter-spacing:2px;color:#facc15}.pole{position:absolute;bottom:26px;width:6px;height:220px;background:linear-gradient(#fde047,#eab308);border-radius:4px}.base{width:120px;height:12px;background:linear-gradient(90deg,#facc15,#fde047);border-radius:8px;margin-top:6px}.disk{height:18px;margin:4px 0;border-radius:8px;max-width:95%;transition:all .25s ease}.disk[data-size="1"]{background:#22c55e}.disk[data-size="2"]{background:#3b82f6}.disk[data-size="3"]{background:#6366f1}.disk[data-size="4"]{background:#8b5cf6}.disk[data-size="5"]{background:#ec4899}.disk[data-size="6"]{background:#f97316}.disk[data-size="7"]{background:#ef4444}.controls{margin-top:10px;display:flex;justify-content:center;gap:18px}.restart{font-size:1rem;font-weight:700;padding:12px 26px;border-radius:999px;border:2px solid #000000;cursor:pointer;background:linear-gradient(90deg,#22c55e,#4ade80);color:#022c22}.restart:hover:enabled{background:linear-gradient(90deg,#16a34a,#22c55e);transform:translateY(-3px)}.restart:disabled{opacity:.6;cursor:not-allowed}.top-controls{display:flex;justify-content:left;align-items:center;gap:18px;margin-bottom:12px;flex-wrap:wrap}.volume-control{display:flex;align-items:center;gap:6px}.volume-control input[type=range]{width:90px;cursor:pointer}.icon-btn{background:transparent;border:1px solid currentColor;color:inherit;border-radius:999px;padding:6px 10px;cursor:pointer;font-size:1rem;transition:background .2s,transform .1s}.icon-btn:hover{background:#ffffff1a;transform:translateY(-1px)}.app.dark{background:radial-gradient(circle at top,#1e293b,#020617);color:#e5e7eb}.app.light{background:linear-gradient(to bottom,#f8fafc,#e2e8f0);color:#0f172a}.app.light .panel{background:#ffffffb8;border:1px solid rgba(148,163,184,.25);color:#0f172a;box-shadow:0 10px 30px #0f172a14,0 2px 10px #0f172a0d;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.app.light .panel-title{color:#2563eb;text-shadow:none}.app.light .rule,.app.light .tip,.app.light .formula-text{color:#1e293b;opacity:1}.app.light .formula-box{background:linear-gradient(135deg,#dbeafee6,#bfdbfebf);border:1px solid rgba(96,165,250,.25);box-shadow:0 8px 24px #3b82f614}.app.light .formula-clean .num{color:#2563eb}.app.light .formula-clean .power{color:#1d4ed8}.app.light .formula-clean .minus{color:#0f172a}.app.light .game-card{background:#ffffff8c;box-shadow:0 20px 40px #0f172a1f}.app.light .tower{background:#ffffff80;border:1px solid rgba(148,163,184,.35)}.app.light .footer{background:linear-gradient(to bottom,#ffffffd9,#e2e8f0f2);color:#334155;border-top:1px solid rgba(148,163,184,.2)}.app.light .icon-btn{background:#ffffffb3;border:1px solid rgba(148,163,184,.4);color:#0f172a}.app.light .disk-select select{background:#ffffffd9;color:#0f172a;border:1px solid rgba(148,163,184,.5)}@media(max-width:768px){.game{gap:25px}.tower{width:110px;height:240px}.pole{height:150px}.base{width:80px}.controls{flex-direction:column}.restart{width:160px}}.footer{margin-top:30px;padding:14px 10px;display:flex;justify-content:center;align-items:center;gap:12px;font-size:14px;color:#cbd5f5;background:linear-gradient(to bottom,#0f172acc,#020617f2);border-top:1px solid rgba(148,163,184,.15);border-radius:10px}.footer-divider{color:#475569}.footer-icon{margin-right:4px;vertical-align:middle}.footer-dev{display:flex;align-items:center}.footer-name{margin-left:4px;color:#22d3ee;font-weight:500}.footer-link{display:flex;align-items:center;color:#22d3ee;text-decoration:none}.footer-link:hover{text-decoration:underline}.footer-link:hover .footer-name{color:#06b6d4}
