*{box-sizing:border-box}body{margin:0;background:#f8fbfc;color:#344b58;font-family:'Segoe UI',Arial,sans-serif}button,input,select{font:inherit}button{cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.45}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #4e97a9;outline-offset:4px}.header{display:flex;justify-content:space-between;align-items:center;gap:20px;background:#fffefa;border-bottom:1px solid #dfe8e9;padding:16px 4%}.brand{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:800;letter-spacing:1.2px}.brand-icon{display:grid;place-items:center;width:43px;height:43px;border-radius:13px;background:#e6f3f2;font-size:27px}.brand small{display:block;font-size:9px;letter-spacing:1.5px;color:#93a7ad;margin-top:5px}.header-actions{display:flex;gap:8px}.soft-btn{border:1px solid #dce7e8;background:#fffefa;border-radius:11px;padding:10px 14px;font-size:12px;font-weight:650}.soft-btn:hover{background:#eaf4f4}.shell{max-width:1520px;margin:auto;padding:26px 4% 18px}.intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:26px}.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:800;color:#92b0b6}.intro h1{font-size:clamp(30px,3.1vw,46px);letter-spacing:-1.4px;margin:9px 0 0;line-height:1.2}.intro h1 span{color:#60a2af}.badge{font-size:11px;background:#fff4dc;border:1px solid #efddb5;color:#ad915a;border-radius:22px;padding:11px 15px;white-space:nowrap}.game-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(340px,1fr);gap:23px;align-items:start}.picture-card{padding:22px;border:1px solid #dce8e9;background:#fffefa;border-radius:23px;box-shadow:0 5px 0 #dde9e733}.card-top{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:12px;color:#9babad;margin-bottom:19px}.card-top b{font-size:15px;color:#73979c}.picture-frame{aspect-ratio:2/1;position:relative;border:2px solid #dfebe8;border-radius:16px;overflow:hidden;background:#eff7f6;isolation:isolate}.piece-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);gap:0;z-index:2}.piece{background:#dceff3;border:1px solid #c3e0e6;display:flex;align-items:center;justify-content:center;font-size:29px;font-weight:800;color:#87b3bf;border-radius:0;opacity:1}.piece:nth-child(4n+2){background:#fff0ca;border-color:#f1dfb2;color:#c6aa65}.piece:nth-child(4n+3){background:#eadff4;border-color:#daccE7;color:#b298c7}.piece:nth-child(4n){background:#e2efdc;border-color:#cddfC4;color:#9bb588}.piece:disabled{opacity:1;cursor:default}.picture-caption{text-align:center;font-size:13px;color:#9aacae;line-height:1.7;margin:17px 0 2px}.hint-row{display:flex;gap:12px;align-items:center;justify-content:center;padding:14px;margin-top:16px;border:1px dashed #dce7e3;border-radius:13px;color:#9eac9b;font-size:12px}.hint-row span{font-size:22px}.side-card{border:1px solid #dce8e9;background:#fffefa;border-radius:23px;padding:25px;min-height:360px}.welcome{text-align:center;background:linear-gradient(135deg,#fffdf7,#eff8f6)}.welcome-icon{font-size:54px;margin:4px 0 17px}.welcome h2{font-size:27px;line-height:1.3;letter-spacing:-.6px;margin:12px 0}.welcome>p{font-size:15px;line-height:1.7;color:#91a7aa;margin:17px 0 23px}.primary{display:inline-flex;align-items:center;justify-content:center;gap:13px;border:1px solid #4b8b98;border-bottom:4px solid #377482;background:#5599a7;color:white;border-radius:12px;padding:14px 20px;font-size:16px;font-weight:750}.primary:hover{background:#458896}.wide{width:100%}.rule-chips{display:flex;justify-content:center;gap:13px;font-size:10px;color:#b19a73;margin-top:20px}.team-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-top:24px}.team-0{--team:#e5bb75;--tint:#fff5e2;--ink:#ac8750}.team-1{--team:#99c8c4;--tint:#eaf6f3;--ink:#6c9f98}.team-2{--team:#c2a5d6;--tint:#f5eefb;--ink:#a084b5}.team-3{--team:#9dbad6;--tint:#edf5fc;--ink:#7396b6}.team-card{display:flex;align-items:center;gap:13px;padding:17px 20px;border:1px solid #dfe8e7;background:#fffefa;border-radius:17px}.avatar{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--team);border-radius:13px;background:var(--tint);font-size:29px;flex:none}.team-name{flex:1;min-width:0}.team-name b{font-size:17px;overflow-wrap:anywhere;display:block}.team-name small{display:block;font-size:10px;color:#a0acad;margin-top:6px}.team-score{font-size:31px;color:var(--ink);font-weight:800}.team-score small{font-size:11px;font-weight:500;margin-left:4px}.footer{display:flex;justify-content:space-between;gap:20px;font-size:9px;color:#a9b6b7;padding:22px 3px 0}@media(max-width:1100px){.game-layout{grid-template-columns:1.2fr 1fr;gap:18px}.picture-card{padding:18px}.side-card{padding:22px}.intro h1{font-size:36px}.badge{display:none}.team-card{padding:15px}.team-name b{font-size:15px}.team-score{font-size:27px}.avatar{width:38px;height:40px;font-size:26px}}@media(max-width:760px){.game-layout{grid-template-columns:1fr}.intro h1{font-size:32px}.header-actions .soft-btn{font-size:11px;padding:9px}.brand{font-size:10px}.brand small{font-size:8px}.header{padding:14px 4%;gap:12px}.team-strip{grid-template-columns:1fr}.side-card{min-height:0}.picture-frame{aspect-ratio:1.6/1}.team-card{padding:14px}.footer{font-size:8px}.piece{font-size:25px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
