@import"https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap";:root{color-scheme:light;font-family:Poppins,Verdana,sans-serif;color:#004158;background:#f4f9fb;--ink: #004158;--blue: #006e96;--blue-soft: #e4f3f8;--muted: #527282;--paper: #ffffff;--line: #c7dde6;--accent: #ff6e00;--accent-light: #fff0e4;--win: #ffb347;--shadow: 0 24px 80px rgb(0 65 88 / 18%)}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0;background:radial-gradient(circle at 82% 12%,rgb(255 110 0 / 22%),transparent 26%),linear-gradient(120deg,#0041581a,#006e960f 42%,#fff)}button{font:inherit}.shell{width:min(100% - 28px,900px);min-height:100vh;margin:0 auto;padding:28px 0;display:grid;grid-template-rows:auto auto 1fr auto;gap:18px}.brand{min-height:72px;padding:14px 18px;border-radius:8px;display:flex;align-items:center;justify-content:space-between;gap:18px;background:#ffffffeb;box-shadow:0 10px 34px #0041581a}.brand-logo{width:clamp(156px,28vw,250px);height:auto;display:block}.brand p{max-width:360px;margin:0;color:var(--ink);font-size:clamp(.8rem,2vw,.98rem);font-weight:600;line-height:1.3;text-align:right}.brand span{color:var(--accent)}.hero,.actions{display:flex;align-items:center;justify-content:space-between;gap:12px}.eyebrow{margin:0 0 2px;color:var(--accent);font-size:.82rem;font-weight:800;letter-spacing:0;text-transform:uppercase}h1{margin:0;color:var(--ink);font-size:clamp(2.2rem,8vw,5rem);font-weight:800;line-height:.95;letter-spacing:0}.status{min-width:116px;padding:10px 14px;border:2px solid var(--blue);border-radius:8px;background:var(--paper);box-shadow:5px 5px 0 var(--blue);text-align:right}.status span,.status small{display:block}.status span{color:var(--ink);font-size:1.35rem;font-weight:700}.status small{color:var(--muted);font-size:.76rem}.status--win{background:var(--accent)}.status--win span,.status--win small{color:#fff}.board{align-self:center;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(6px,1.5vw,12px);padding:clamp(8px,2vw,16px);border:2px solid var(--line);border-radius:8px;background:linear-gradient(to right,rgb(0 65 88 / 8%),transparent 32%,transparent 68%,rgb(255 110 0 / 8%)),#ffffffdb;box-shadow:var(--shadow)}.cell{aspect-ratio:1;min-width:0;border:2px solid var(--blue);border-radius:8px;padding:clamp(5px,1.5vw,12px);display:grid;place-items:center;background:var(--paper);color:var(--ink);box-shadow:4px 4px #006e96e5;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease}.cell:hover{transform:translate(-1px,-1px);box-shadow:5px 5px #006e96e5}.cell:focus-visible,.action:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.cell span{max-width:100%;overflow-wrap:anywhere;font-size:clamp(.63rem,2.6vw,1.08rem);font-weight:700;line-height:1.05;text-align:center}.cell--marked{background:var(--blue-soft);color:var(--ink);transform:translate(3px,3px);box-shadow:1px 1px #006e96e5}.cell--line{background:var(--accent);color:#fff}.actions{flex-wrap:wrap;justify-content:flex-end}.action{min-height:44px;border:2px solid var(--blue);border-radius:8px;padding:9px 14px;background:var(--paper);color:var(--ink);box-shadow:3px 3px 0 var(--blue);cursor:pointer;font-weight:700}.action--primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:3px 3px #b84f00}@media(max-width:620px){.shell{width:min(100% - 18px,540px);padding:16px 0;gap:12px}.brand{min-height:0;padding:12px;align-items:flex-start;flex-direction:column;gap:8px}.brand p{max-width:none;text-align:left}.hero{align-items:flex-end}.status{min-width:92px;padding:8px 10px;box-shadow:3px 3px 0 var(--blue)}.status span{font-size:1rem}.board{gap:6px}.cell{border-width:1.5px;box-shadow:2px 2px #006e96e5}.cell:hover{transform:none;box-shadow:2px 2px #006e96e5}.actions{display:grid;grid-template-columns:1fr 1fr}.action{width:100%;padding:8px 10px;font-size:.9rem}}