:root{--blue:#082b61;--blue2:#124783;--green:#2f8c32;--lime:#77ad28;--yellow:#f3c72e;--ink:#142038;--muted:#667085;--bg:#f3f7fb;--white:#fff;--red:#dc3030;--shadow:0 12px 35px rgba(8,43,97,.12)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--bg)}
button,input,select{font:inherit}
button{cursor:pointer}
.shell{min-height:100vh;padding:14px}
.brand{display:flex;align-items:center;gap:12px;max-width:1180px;margin:0 auto 14px}
.brand img{width:58px;height:58px;object-fit:contain;border-radius:50%;background:#fff}
.brand h1{font-size:clamp(1.05rem,2.4vw,1.55rem);line-height:1.05;margin:0;color:var(--blue)}
.brand small{display:block;color:var(--green);font-weight:800;margin-top:4px}
.status{margin-left:auto;background:#e7f4e7;color:#17651c;padding:7px 11px;border-radius:999px;font-size:.82rem;font-weight:800}
.status.preparing{background:#eaf0f7;color:var(--blue)}.status.verifying{background:#fff0c2;color:#765500}.status.finished{background:#e7f4e7;color:#17651c}
.game-notice{max-width:1180px;margin:0 auto 14px;padding:13px 18px;border-radius:13px;background:#eaf0f7;color:var(--blue);font-size:1.05rem;font-weight:900;text-align:center}.game-notice.verifying{background:#fff0c2;color:#765500}.game-notice.finished{background:#e7f4e7;color:#17651c}
.grid{max-width:1180px;margin:auto;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:14px}
.card{background:var(--white);border:1px solid #dce5ef;border-radius:18px;box-shadow:var(--shadow);padding:18px}
.eyebrow{margin:0 0 8px;color:var(--green);font-weight:900;text-transform:uppercase;letter-spacing:.09em;font-size:.78rem}
.figure-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
h2{margin:0;color:var(--blue);font-size:clamp(1.55rem,4vw,2.4rem)}
.prize{background:#fff5c9;border:1px solid #f3d761;padding:8px 12px;border-radius:12px;font-weight:900;color:#735500;text-align:right}
.figure-wrap{display:grid;grid-template-columns:220px 1fr;gap:22px;align-items:center;margin-top:16px}
.figure{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;background:var(--blue);padding:6px;border-radius:14px;aspect-ratio:1}
.figure div{background:#fff;border-radius:5px;display:grid;place-items:center;font-weight:900;color:#9aa5b5;font-size:.72rem}
.figure div.on{background:var(--yellow);color:var(--blue)}
.figure div.free{color:var(--green);font-size:1rem;box-shadow:inset 0 0 0 2px #83bd78}
.figure div.on.free{background:var(--yellow);color:var(--blue);box-shadow:inset 0 0 0 2px var(--green)}
.free-note{margin-top:6px;text-align:center;color:var(--green);font-size:.76rem;font-weight:900}
.instruction{font-size:clamp(1.1rem,2.6vw,1.55rem);line-height:1.35;font-weight:700}
.last-ball{display:grid;place-items:center;text-align:center;min-height:290px;background:linear-gradient(145deg,var(--blue),var(--blue2));color:#fff;overflow:hidden;position:relative}
.last-ball:after{content:"";position:absolute;width:230px;height:230px;border-radius:50%;background:rgba(255,255,255,.08);right:-70px;bottom:-90px}
.last-ball strong{font-size:clamp(4.8rem,14vw,9rem);line-height:.9;letter-spacing:-.06em;z-index:1}
.last-ball span{font-size:1rem;font-weight:800;opacity:.85;z-index:1}
.history{max-width:1180px;margin:14px auto 0}
.balls{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ball{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:900;box-shadow:inset 0 -4px rgba(0,0,0,.14)}
.b{background:#1769aa}.i{background:#d83a3a}.n{background:#697386}.g{background:#319348}.o{background:#d59b00}
.empty{color:var(--muted);padding:10px 0}
.overlay{position:fixed;inset:0;background:rgba(4,20,47,.96);display:grid;place-items:center;z-index:20;color:white;text-align:center;animation:fadeIn .18s ease}
.overlay.hidden{display:none}
.overlay.correction{background:rgba(126,20,28,.97)}
.overlay strong{display:block;font-size:min(42vw,20rem);line-height:.82;letter-spacing:-.08em}
.overlay p{font-size:clamp(1rem,3vw,1.5rem);font-weight:800;margin:28px 0 0}
@keyframes fadeIn{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}
.control-layout{max-width:1180px;margin:auto;display:grid;grid-template-columns:1fr 340px;gap:14px}
.control-board{display:grid;grid-template-columns:repeat(5,minmax(48px,1fr));gap:7px;margin-top:14px}
.number-column{display:grid;gap:6px;min-width:0}
.letter-head{height:52px;border-radius:12px;display:grid;place-items:center;color:#fff;font-size:1.8rem;font-weight:1000;box-shadow:inset 0 -4px rgba(0,0,0,.14)}
.letter-head.b{background:#1769aa}.letter-head.i{background:#d83a3a}.letter-head.n{background:#697386}.letter-head.g{background:#319348}.letter-head.o{background:#d59b00}
.num{border:1px solid #ccd8e5;background:white;border-radius:10px;min-height:46px;font-weight:900;color:var(--blue)}
.num.used{background:#dce5ef;color:#8a95a3;text-decoration:line-through}
.num.used:not(:disabled){cursor:pointer;border:2px solid #a11f1f;color:#8b1f25;background:#fff0f0}
.correction-help{margin:12px 0 0;color:#6b7280;font-size:.85rem;font-weight:700}
.number-column:nth-child(1) .num{border-color:#b9d4e9}.number-column:nth-child(2) .num{border-color:#efc0c0}.number-column:nth-child(3) .num{border-color:#ccd0d5}.number-column:nth-child(4) .num{border-color:#b9ddc1}.number-column:nth-child(5) .num{border-color:#ead39c}
.figure-preview{max-width:150px;margin:0 auto;width:100%}
.actions{display:grid;gap:10px}.actions button,.actions select,.actions input{width:100%;min-height:48px;border-radius:11px;border:1px solid #cbd6e2;padding:10px}
.primary{background:var(--blue);color:#fff;border:0!important;font-weight:900}.warn{background:#fff4d2;color:#755600;font-weight:800}.danger{background:#fff0f0;color:#a11f1f;font-weight:800}
.verify{background:var(--yellow);color:#5c4300;border:0!important;font-weight:1000}.success{background:var(--green);color:#fff;border:0!important;font-weight:900}
.links{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.links a{color:var(--blue);font-weight:800;text-decoration:none;background:#eaf0f7;padding:8px 11px;border-radius:9px}
.screen .shell{padding:18px 28px}.screen .brand img{width:72px;height:72px}.screen .grid{grid-template-columns:1.45fr .55fr}.screen .last-ball{min-height:360px}.screen .figure-wrap{grid-template-columns:min(31vh,280px) 1fr}.screen .history{font-size:1.2rem}.screen .ball{width:58px;height:58px;font-size:1.05rem}
.qr-welcome{max-width:1180px;margin:3vh auto 0;display:grid;grid-template-columns:1fr minmax(360px,46vh);gap:clamp(30px,6vw,90px);align-items:center;background:#fff;border:1px solid #dce5ef;border-radius:24px;box-shadow:var(--shadow);padding:clamp(28px,5vw,70px)}
.qr-welcome h2{font-size:clamp(2.4rem,6vw,5.5rem);line-height:1.02}.qr-welcome img{width:100%;height:auto;border-radius:14px}.qr-copy{font-size:clamp(1.15rem,2.2vw,1.8rem);line-height:1.35;color:#42526a}.qr-url{display:inline-block;margin-top:20px;padding:14px 20px;border-radius:12px;background:#e7f4e7;color:var(--green);font-size:clamp(1.15rem,2vw,1.7rem);font-weight:900}
@media(max-width:760px){.shell{padding:10px}.brand img{width:48px;height:48px}.status{font-size:.7rem;padding:6px 8px}.grid,.control-layout{grid-template-columns:1fr}.figure-head{display:block}.prize{margin-top:10px;text-align:left}.figure-wrap{grid-template-columns:145px 1fr;gap:13px}.card{padding:14px;border-radius:15px}.last-ball{min-height:170px}.last-ball strong{font-size:6.4rem}.ball{width:43px;height:43px}.control-board{gap:4px}.number-column{gap:4px}.letter-head{height:46px;font-size:1.55rem}.num{min-height:44px;padding:4px}.screen .grid{grid-template-columns:1fr}.screen .shell{padding:10px}.qr-welcome{grid-template-columns:1fr;text-align:center;margin-top:10px}.qr-welcome img{max-width:380px;margin:auto}.qr-url{font-size:1rem}}
@media(max-width:410px){.figure-wrap{grid-template-columns:125px 1fr}.instruction{font-size:1rem}.brand small{display:none}}