:root{font-family:ui-rounded,"Avenir Next","Trebuchet MS",system-ui,sans-serif;color:#24466a;--cream:#fff9e8;--navy:#153e78;--blue:#165ad5;--red:#ec5355;--gold:#f6be37}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;min-height:100%;overflow-x:hidden}body{background:#f5cc9a}button,select{font:inherit}button{cursor:pointer;touch-action:manipulation}button:focus-visible,select:focus-visible{outline:3px solid #ec5355;outline-offset:3px}[hidden]{display:none!important}.scene{min-height:100dvh;padding:9px 12px 0;background:linear-gradient(#fff4d818,#f6ca9370),url("4lu-sira-assets/bahce-arkaplan.webp") center center/cover fixed}.game{width:min(100%,740px);margin:0 auto}.masthead{height:57px;display:flex;align-items:center;justify-content:center;position:relative}.crest{display:flex;align-items:center;justify-content:center;gap:7px;padding:4px 13px;border:2px solid #fff6dc;border-radius:25px;background:#fff8dfed;box-shadow:0 4px 0 #bb8059,0 7px 18px #643d2b34;transform:rotate(-1deg)}.crest img{width:34px;height:34px;object-fit:contain}.crest span{font-size:clamp(23px,4vw,31px);font-weight:1000;line-height:1;letter-spacing:-.05em;color:#1c5bb2;text-shadow:0 1px white}.crest strong{color:#df664c}.help-button{position:absolute;right:0;top:8px;width:37px;height:37px;border:2px solid #fff4d5;border-radius:13px;background:#f6d18d;color:#8d4d2d;font-weight:1000;font-size:21px;box-shadow:0 3px 0 #bb8059}.help-button:active,.control:active,.mode:active,.column-pickers button:active,.big-play:active{transform:translateY(2px);box-shadow:none}.mode-row{display:flex;justify-content:center;align-items:center;gap:6px;margin:9px auto 10px;min-height:38px}.mode,.level-wrap{border:2px solid #fff7df;border-radius:13px;background:#fff9eadd;color:#396185;box-shadow:0 3px 0 #b98869;font-size:12px;font-weight:900}.mode{min-height:36px;padding:5px 12px}.mode.active{background:#f8ca70;color:#75452c}.level-wrap{display:flex;align-items:center;gap:7px;padding:2px 5px 2px 10px}.level-wrap span{font-size:11px}.level-wrap select{border:0;background:#ffffffb8;border-radius:9px;color:#24466a;padding:5px;font-size:12px;font-weight:900;outline-offset:2px}.play-area{width:min(100%,640px,calc((100dvh - 305px)*1.16));min-width:0;margin:auto}.score-ribbon{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;min-height:59px;margin:0 4px 4px}.player{display:flex;align-items:center;gap:6px;min-width:0;padding:5px 8px;border:2px solid #fff9e7;border-radius:16px;background:#fff9e7e8;box-shadow:0 3px 0 #bf8a63;color:#2d5681;transition:transform .2s,filter .2s}.player.active{transform:translateY(-2px);filter:drop-shadow(0 3px 5px #faebaa)}.player img{width:38px;height:38px;object-fit:contain}.player div{display:flex;align-items:baseline;gap:8px;min-width:0}.player small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:950}.player strong{font-size:21px;line-height:1}.player.right{justify-content:flex-end;text-align:right}.draws{display:flex;flex-direction:column;align-items:center;min-width:56px;color:#734c39;text-shadow:0 1px #fff9e6}.draws span{font-size:9px;font-weight:1000;letter-spacing:.04em}.draws strong{font-size:20px;line-height:1.1}.turn-bar{display:flex;align-items:center;justify-content:center;gap:7px;min-height:36px;margin:0 4px 7px;padding:3px 9px;border:2px solid #fff4d4;border-radius:12px;background:#fff5dce8;box-shadow:0 3px 0 #bd8e69;text-align:center}.turn-bar strong{font-size:13px;color:#2c5780}.turn-tip{font-size:10px;color:#7c766b}.turn-marker{width:17px;height:17px;flex:none;background:center/contain no-repeat url("4lu-sira-assets/kirmizi-tas.webp")}.turn-marker.yellow-marker{background-image:url("4lu-sira-assets/sari-tas.webp")}.board-frame{position:relative;padding:6px 8px 9px;border:4px solid #a5dbff;border-radius:22px;background:#1e67cf;box-shadow:0 8px 0 #0f3d88,0 19px 26px #162d6470,inset 0 2px 0 #d3efff}.column-pickers{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;align-items:end;margin:0 1px 5px;height:29px}.column-pickers button{position:relative;display:grid;place-items:center;min-width:0;height:27px;padding:0;border:2px solid transparent;border-radius:9px;background:#c9e9ff52;color:#fff;font-size:11px;font-weight:950;transition:transform .15s,background .15s}.column-pickers button:before{content:"";width:18px;height:18px;background:center/contain no-repeat var(--turn-asset);filter:drop-shadow(0 1px 1px #173e74)}.column-pickers button:hover,.column-pickers button.selected,.column-pickers button:focus-visible{background:#f9e0a995;transform:translateY(-2px)}.column-pickers button:disabled{opacity:.4;cursor:not-allowed}.game[data-turn="1"]{--turn-asset:url("4lu-sira-assets/kirmizi-tas.webp")}.game[data-turn="2"]{--turn-asset:url("4lu-sira-assets/sari-tas.webp")}.board{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(3px,.65vw,6px);padding:clamp(7px,1.1vw,12px);border:3px solid #6bb3f4;border-radius:15px;background:linear-gradient(115deg,#fff8 0%,transparent 14% 82%,#03246724),url("4lu-sira-assets/tahta-yuzeyi.webp") center/cover;box-shadow:inset 0 3px 4px #07377a95,0 2px 0 #def8ff}.slot{display:grid;place-items:center;min-width:0;padding:0;aspect-ratio:1;border:0;border-radius:50%;background:radial-gradient(circle at 50% 57%,#f9edca 0 52%,#dfbd82 68%,#0c347b 72%);box-shadow:inset 0 4px 8px #102e6c9c,0 1px 0 #9cdbffad;position:relative;overflow:visible;transition:filter .16s}.slot:not(:disabled):hover,.slot.selected{filter:brightness(1.11)}.slot:disabled{cursor:default}.disc{width:110%;height:110%;background:center/contain no-repeat;filter:drop-shadow(0 2px 1px #15346b80);position:relative}.disc.red{background-image:url("4lu-sira-assets/kirmizi-tas.webp")}.disc.yellowDisc{width:112%;height:112%;background-image:url("4lu-sira-assets/sari-tas.webp")}.disc.newly-placed{animation:drop .3s cubic-bezier(.2,.82,.45,1.12) both}.disc.win{animation:winner .8s ease-in-out infinite alternate;filter:drop-shadow(0 0 7px #fff9b7)}.controls{display:flex;align-items:center;justify-content:center;gap:8px;margin:17px 4px 0}.control{min-height:38px;padding:6px 16px;border:2px solid #fff6dd;border-radius:12px;background:#fff9e8;color:#355983;font-size:12px;font-weight:950;box-shadow:0 4px 0 #bb8460;transition:transform .14s,filter .14s}.control:hover:not(:disabled){filter:brightness(1.05);transform:translateY(-1px)}.control:disabled{opacity:.5;cursor:not-allowed}.control.primary{background:#ffca70;color:#7b4029}.control.sound{min-width:88px}.credit{margin:13px 0 0;text-align:center;font-size:11px;font-weight:900;letter-spacing:.12em;color:#674730;text-shadow:0 1px #fff4db}.dialog{position:fixed;z-index:20;inset:0;display:grid;place-items:center;padding:15px;background:#1e3a6580;backdrop-filter:blur(5px)}.dialog-card{position:relative;width:min(380px,100%);padding:20px 24px 22px;border:4px solid #fff4d9;border-radius:26px;background:linear-gradient(145deg,#fff9e7,#fce4b2);box-shadow:0 7px 0 #bc8c61,0 21px 45px #2d3e5480;text-align:center;color:#315779;animation:pop .25s both}.dialog-card h1,.dialog-card h2{margin:3px 0 9px;font-size:clamp(30px,8vw,43px);line-height:1;color:#18529a;text-shadow:0 2px #fff7e9}.dialog-card h2{font-size:30px}.dialog-card p{margin:7px auto 14px;line-height:1.45;font-size:14px}.dialog-card .eyebrow{margin:0;color:#c96f40;font-size:11px;font-weight:1000;letter-spacing:.16em}.dialog-card small{display:block;margin-top:14px;font-size:11px;color:#756b5d}.dialog-token{width:80px;height:80px;object-fit:contain;margin:0 1px;filter:drop-shadow(0 3px 2px #b7804d59)}.intro-card .red-token{transform:rotate(-14deg)}.intro-card .yellow-token{transform:rotate(14deg)}.result-card img{width:86px;height:86px;object-fit:contain}.big-play{display:block;width:100%;min-height:47px;border:3px solid #fff6d9;border-radius:14px;background:linear-gradient(#f8d47b,#edaa55);color:#78442e;font-size:18px;font-weight:1000;box-shadow:0 5px 0 #bc7c48}.help-card{text-align:left}.help-card h2{font-size:26px}.help-card p{font-size:13px}.close-help{position:absolute;right:11px;top:10px;width:32px;height:32px;border:0;border-radius:9px;background:#f2d197;color:#8f4f32;font-size:20px;font-weight:900}@keyframes drop{from{transform:translateY(-210px) scale(.82);opacity:.65}65%{transform:translateY(3px) scale(1.04)}to{transform:none;opacity:1}}@keyframes winner{from{transform:scale(.94)}to{transform:scale(1.07)}}@keyframes pop{from{transform:translateY(12px) scale(.95);opacity:0}to{transform:none;opacity:1}}@media(max-width:600px){.scene{padding:5px 6px 0;background-position:center}.masthead{height:48px}.crest{padding:3px 8px}.crest img{width:27px;height:27px}.crest span{font-size:23px}.help-button{top:4px;width:33px;height:33px}.mode-row{margin:5px auto 7px;gap:4px}.mode,.level-wrap{font-size:10px}.mode{padding:4px 6px;min-height:32px}.level-wrap{padding:2px 3px 2px 5px;gap:2px}.level-wrap span{font-size:9px}.level-wrap select{padding:3px;font-size:10px}.play-area{width:min(100%,calc((100dvh - 235px)*1.16))}.score-ribbon{gap:3px;min-height:49px;margin-bottom:3px}.player{padding:3px 4px;gap:3px;border-radius:11px}.player img{width:27px;height:27px}.player div{gap:4px}.player small{font-size:9px}.player strong{font-size:17px}.draws{min-width:45px}.draws span{font-size:7px}.draws strong{font-size:16px}.turn-bar{min-height:31px;margin-bottom:5px}.turn-bar strong{font-size:11px}.turn-tip{font-size:9px}.board-frame{padding:4px 4px 6px;border-width:3px;border-radius:15px}.column-pickers{height:23px;gap:2px;margin-bottom:3px}.column-pickers button{height:22px}.column-pickers button:before{width:16px;height:16px}.board{gap:3px;padding:6px;border-width:2px;border-radius:9px}.controls{gap:5px;margin-top:13px}.control{padding:5px 9px;min-height:34px;font-size:10px}.control.sound{min-width:65px}.credit{font-size:9px;margin-top:10px}}@media(max-width:350px){.crest span{font-size:20px}.mode{font-size:9px}.level-wrap span{display:none}.turn-tip{display:none}.player small{max-width:56px}.play-area{width:min(100%,calc((100dvh - 215px)*1.16))}.controls{margin-top:10px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}