@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',Arial,sans-serif;color:#242927;background:#f5f2e9}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 10% 20%,#fffdf8 0,transparent 35%),#f5f2e9}button{font:inherit;cursor:pointer}.shell{max-width:1290px;margin:auto;padding:0 38px 60px}.topbar{height:94px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d8d9d0}.brand{display:flex;align-items:center;gap:12px;font-family:Manrope,sans-serif;font-size:24px;font-weight:800;letter-spacing:-1.5px}.brand-mark{width:25px;height:25px;display:grid;grid-template-columns:repeat(2,7px);grid-template-rows:repeat(2,7px);gap:5px;transform:rotate(-12deg)}.brand-mark i{border-radius:50%;background:#3575a8}.brand-mark i:last-child{background:#e36a58}.top-note{font-size:13px;color:#81867f}.intro{position:relative;min-height:calc(100vh - 94px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:50px 0 85px}.intro-art{position:relative;width:122px;height:122px;margin-bottom:34px;background-image:linear-gradient(#ccd8d0 1px,transparent 1px),linear-gradient(90deg,#ccd8d0 1px,transparent 1px);background-size:24px 24px;background-position:12px 12px;transform:rotate(-8deg);border-radius:6px}.art-dot{position:absolute;width:15px;height:15px;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 2px 3px #38546e22}.art-dot.blue{background:#397aaf}.art-dot.red{background:#e86957}.a{left:24px;top:24px}.b{left:48px;top:24px}.c{left:72px;top:24px}.d{left:72px;top:48px}.e{left:48px;top:72px}.f{left:24px;top:48px}.g{left:48px;top:48px}h1{font-family:Manrope,sans-serif;font-weight:800;letter-spacing:-.065em}.intro h1{font-size:clamp(45px,6.7vw,82px);line-height:1.06;margin:0}.intro h1 em{font-style:normal;color:#397aaf}.intro p{max-width:430px;color:#757d77;font-size:17px;line-height:1.6;margin:24px 0 32px}.primary{border:0;color:#fff;background:#273f38;border-radius:16px;padding:17px 22px;font-weight:700;min-width:205px;display:flex;justify-content:space-between;gap:25px;box-shadow:0 8px 20px #233b3320}.primary:hover{background:#325348}.intro-foot{font-size:12px;color:#9aa19b;margin-top:24px}.hidden{display:none!important}.game{padding-top:45px}.game-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:30px}.eyebrow{font-size:11px;letter-spacing:.17em;font-weight:800;color:#989f99}.game-heading h1{font-size:42px;line-height:1.1;margin:11px 0 0}.text-button{background:none;border:0;color:#3878aa;font-weight:700;padding:12px 0}.text-button span{margin-left:9px}.play-layout{display:grid;grid-template-columns:minmax(0,760px) minmax(230px,1fr);gap:30px;align-items:start}.board-wrap{background:#fffdf7;border:1px solid #e0e3da;box-shadow:0 16px 45px #3d514414;border-radius:22px;padding:21px;max-width:760px}.board-wrap canvas{display:block;width:100%;height:auto;aspect-ratio:1;touch-action:manipulation;cursor:crosshair}.side{display:flex;flex-direction:column;gap:18px}.turn-card,.players,.help{border:1px solid #e0e3da;border-radius:18px;background:#fffdf8;padding:22px}.turn-card{min-height:145px}.turn-line{display:flex;align-items:center;gap:12px;margin-top:18px}.turn-line strong{font-family:Manrope,sans-serif;font-size:18px}.turn-indicator,.player-dot{width:13px;height:13px;border-radius:50%;flex:none;background:#397aaf}.turn-indicator.red,.player-dot.red{background:#e86957}.turn-card p,.help p{font-size:13px;line-height:1.6;color:#8b928c;margin:9px 0 0}.players{padding:2px 20px}.player{display:flex;align-items:center;gap:13px;padding:17px 0}.player+.player{border-top:1px solid #eeeee8}.player>div{display:flex;flex-direction:column;gap:3px;flex:1}.player strong{font-size:14px}.player small{color:#a2a9a2;font-size:11px}.player b{font-family:Manrope,sans-serif;font-size:21px}.help p{margin-top:14px}.quiet{background:transparent;border:1px solid #d7dcd4;color:#587368;padding:14px;border-radius:13px;font-weight:700}.quiet:hover{background:#fffdf8}.message{color:#bd5b4b;font-size:13px;min-height:20px}.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,15px);background:#273f38;color:white;padding:12px 19px;border-radius:11px;font-size:13px;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:850px){.shell{padding:0 20px 40px}.topbar{height:70px}.game{padding-top:28px}.game-heading h1{font-size:32px}.play-layout{grid-template-columns:1fr}.board-wrap{padding:9px}.side{display:grid;grid-template-columns:1fr 1fr}.quiet{grid-column:1/-1}.help{grid-column:1/-1}.intro{min-height:calc(100vh - 70px)}}@media(max-width:560px){.game-heading{align-items:start;gap:10px}.game-heading h1{font-size:27px}.text-button{font-size:12px;text-align:right}.side{display:flex}.intro h1{font-size:45px}.intro p{font-size:15px}}
.color-choice{display:grid;gap:10px;width:min(100%,330px);margin-top:2px}.color-button{display:flex;align-items:center;gap:14px;width:100%;padding:17px 18px;border:1px solid #d8ded6;border-radius:14px;background:#fffdf8;color:#273f38;font-weight:700;text-align:left}.color-button span:nth-child(2){flex:1}.color-button:hover{border-color:#809b8b;background:#fff}.color-button .player-dot{width:15px;height:15px}
.quiet.reset{color:#bb6557;border-color:#ebcfc7}.quiet.reset:hover{background:#fff3ef}
.game-actions{display:flex;align-items:center;gap:22px}.text-button.danger{color:#bb6557}@media(max-width:650px){.game-heading{display:block}.game-actions{justify-content:space-between;margin-top:12px;gap:12px}.game-actions .text-button{font-size:13px;text-align:left}}
.game-actions .text-button:disabled{opacity:.38;cursor:not-allowed}@media(max-width:1100px){.game-heading{display:block}.game-actions{justify-content:flex-start;flex-wrap:wrap;margin-top:12px;gap:8px 20px}}