:root{--bg:#eef5fb;--card:#fff;--ink:#172534;--muted:#6c7b89;--line:#dce7f0;--red:#d53d4c;--blue:#276ed8;--green:#27875a;--shadow:0 10px 28px rgba(31,55,77,.09);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}
*{box-sizing:border-box}body{margin:0;color:var(--ink);background:linear-gradient(#f8fbfe,#edf4f9);min-height:100vh}.hidden{display:none!important}
.app{max-width:1120px;margin:auto;padding:14px}header{display:flex;align-items:center;justify-content:space-between;padding:8px 2px 16px}h1{font-size:clamp(1.45rem,4vw,2.15rem);margin:0}h2{margin:.15rem 0 .55rem}h3{font-size:.9rem;margin:10px 0 7px}.eyebrow{display:block;font-size:.68rem;font-weight:900;letter-spacing:.12em;color:var(--muted)}
.panel{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px;margin-bottom:14px;box-shadow:var(--shadow)}.login{max-width:430px;margin:10vh auto}.login input{width:100%;padding:15px;border:1px solid var(--line);border-radius:13px;font-size:16px;margin:12px 0}.login button{width:100%}
button{border:0;border-radius:13px;padding:13px 16px;min-height:48px;font-weight:850;font-size:1rem}.primary{background:var(--ink);color:#fff}.soft{background:#eef3f7;color:var(--ink)}.danger{background:var(--red);color:#fff}.outline{background:transparent;border:1px solid var(--line)}
.identity{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.identity>div{background:#f7fafc;border-radius:13px;padding:12px}.identity strong{font-size:1.05rem}
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-bottom:14px}.stats div{background:#fff;border:1px solid var(--line);border-radius:15px;padding:12px;box-shadow:var(--shadow)}.stats span{display:block;color:var(--muted);font-size:.75rem}.stats b{font-size:1.18rem}
.title-row,.nextbox{display:flex;justify-content:space-between;align-items:center;gap:14px}.active{background:#eaf7ef;color:var(--green);font-weight:850;padding:7px 11px;border-radius:999px}
.road{display:grid;grid-template-rows:repeat(6,27px);grid-auto-flow:column;grid-auto-columns:27px;gap:2px;overflow-x:auto;background:#f7fafc;border:1px solid var(--line);border-radius:12px;padding:8px;min-height:181px}.road.small{grid-template-rows:repeat(6,18px);grid-auto-columns:18px;min-height:127px}.dot{border-radius:50%;border:2px solid;display:grid;place-items:center;font-size:.7rem;font-weight:900}.dot.B{color:var(--red);border-color:var(--red)}.dot.P{color:var(--blue);border-color:var(--blue)}.dot.T{color:var(--green);border-color:var(--green)}.dot.fill{border:0;background:currentColor}.three{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.predict{text-align:center}.choices,.actions{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:14px}.choices button{background:#f6f8fa;border:2px solid transparent}.banker{color:var(--red)}.player{color:var(--blue)}.choices button.selected.banker{border-color:var(--red);background:#fff0f2}.choices button.selected.player{border-color:var(--blue);background:#edf5ff}.feedback{margin-top:13px;border-radius:13px;padding:13px;font-weight:900}.feedback.good{background:#eaf8ef;color:var(--green)}.feedback.bad{background:#fff0f2;color:var(--red)}.feedback.info{background:#edf5ff;color:var(--blue)}
.history{display:grid;gap:8px;margin-top:10px}.history div{display:flex;justify-content:space-between;background:#f2f4f6;color:#78828c;border-radius:11px;padding:11px}.history .current{background:#edf5ff;color:var(--ink)}
.modal{position:fixed;inset:0;background:rgba(10,20,30,.58);display:grid;place-items:center;padding:16px}.modal-card{background:white;border-radius:20px;padding:22px;width:min(430px,100%);box-shadow:0 25px 80px rgba(0,0,0,.3)}
@media(max-width:760px){.app{padding:10px;padding-top:max(10px,env(safe-area-inset-top))}.stats{grid-template-columns:repeat(2,1fr)}.stats .accuracy{grid-column:span 2}.three{grid-template-columns:1fr}.identity{grid-template-columns:1fr 1fr}.identity>div:first-child{grid-column:span 2}.nextbox{align-items:flex-start;flex-direction:column}.nextbox button{width:100%}.road{grid-template-rows:repeat(6,24px);grid-auto-columns:24px}}
@media(max-width:420px){.choices,.actions{grid-template-columns:1fr}.panel{padding:15px;border-radius:17px}}