/* Old School Necati's Night Shift — arcade edition (v20260927c). */
.cs-section{--cs-cream:#fff0d6;--cs-red:#df1725;margin:64px 0;color:var(--cs-cream);scroll-margin-top:30px;font-family:Arial,sans-serif}
.cs-section *{box-sizing:border-box}
.cs-section [hidden]{display:none!important}

/* Invite + guide */
.cs-invite{border-block:1px solid #745638;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:32px 4px;background:radial-gradient(ellipse at right,#58211444,transparent 65%)}
.cs-kicker{font-size:11px!important;letter-spacing:2px;color:#c5a373!important;font-weight:700}
.cs-invite h2{font:900 clamp(28px,4vw,50px)/.98 Impact,'Arial Narrow',sans-serif;letter-spacing:-1px;margin:15px 0}
.cs-invite h2 em{font-style:normal;color:var(--cs-red)}
.cs-invite p{font-size:14px;color:#cbbba7}
.cs-section button{cursor:pointer;font:700 13px Arial,sans-serif}
.cs-open{flex-shrink:0;border:1px solid #ff4e4e;border-radius:5px;background:var(--cs-red);color:var(--cs-cream);padding:20px 26px;box-shadow:0 4px 0 #720b12}
.cs-open span{margin-left:22px}
.cs-panel{padding-top:32px}
.cs-layout{display:grid;grid-template-columns:minmax(210px,330px) minmax(320px,660px);gap:48px;max-width:1060px;margin:auto;align-items:center}
.cs-guide h3{font:900 clamp(28px,4vw,52px)/1 Impact,'Arial Narrow',sans-serif;margin:20px 0}
.cs-guide ol{padding-left:22px;line-height:1.8;font-size:15px}
.cs-guide p{line-height:1.65;font-size:14px;color:#cbbba7}
.cs-guide small{color:#9a8c7c;font-size:11px;line-height:1.7;display:block;margin-top:24px}

/* Cabinet: artwork + full-size canvas on top */
.cs-cabinet{position:relative;width:100%;aspect-ratio:1122/1402;isolation:isolate}
.cs-cabinet:before{content:'';position:absolute;inset:6% 4% 0;z-index:-1;border-radius:40%;background:radial-gradient(ellipse at 50% 45%,#ff9a3a2e,transparent 70%);filter:blur(30px);pointer-events:none}
.cs-art,.cs-cabinet canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.cs-art{user-select:none;-webkit-user-drag:none}
.cs-cabinet canvas{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;outline:none}
.cs-cabinet canvas:focus-visible{outline:3px solid #fff0d6;outline-offset:-3px;border-radius:12px}
.cs-section .cs-hit{position:absolute;padding:0;border:0;border-radius:50%;background:transparent;color:transparent;font-size:0;overflow:hidden;pointer-events:none}
.cs-section .cs-hit:focus-visible{outline:3px solid #fff0d6;outline-offset:2px}
.cs-hit-drop{left:53.3%;top:80.46%;width:8.91%;height:4.42%}
.cs-hit-pause{left:48.04%;top:83.31%;width:9.27%;height:4.42%}
.cs-hit-sound{left:85.74%;top:29.96%;width:5.35%;height:4.28%}
.cs-hit-name{left:22%;top:68.6%;width:26.5%;height:4.4%;border-radius:12px}
/* Player name form: sits on the cabinet screen */
.cs-cabinet{container-type:inline-size}
.cs-name{position:absolute;left:8.8%;top:30.5%;width:82.4%;height:44.6%;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.3cqw;padding:3cqw;border-radius:2.4cqw;background:radial-gradient(ellipse at 50% 42%,rgba(24,13,6,.93),rgba(8,4,2,.97));color:#fff0d6;text-align:center;font-family:'Barlow Condensed','Roboto Condensed','Avenir Next Condensed','Arial Narrow',Arial,sans-serif;box-shadow:inset 0 0 0 1px rgba(233,191,124,.18)}
.cs-section .cs-name[hidden]{display:none!important}
.cs-name-k{margin:0;font-weight:700;font-size:12px;font-size:clamp(9px,1.9cqw,14px);letter-spacing:.45em;color:#e9bf7c}
.cs-name label{font-weight:900;font-size:34px;font-size:clamp(22px,7cqw,52px);line-height:1;letter-spacing:.03em;color:#fff0d6;text-shadow:0 3px 0 #6e140a,0 0 24px rgba(255,120,50,.35)}
.cs-section .cs-name input{width:min(76%,430px);margin-top:1cqw;padding:.3em .6em;border:2px solid #c9934c;border-radius:12px;background:#0c0806;color:#fff3df;font:700 28px/1.15 'Barlow Condensed','Roboto Condensed','Arial Narrow',Arial,sans-serif;font-size:clamp(20px,6cqw,42px);text-align:center;text-transform:uppercase;letter-spacing:.08em;outline:none;box-shadow:inset 0 3px 12px #000,0 0 0 4px rgba(201,147,76,.14)}
.cs-section .cs-name input:focus{border-color:#ffcf7a;box-shadow:inset 0 3px 12px #000,0 0 0 4px rgba(255,207,122,.28)}
.cs-name-msg{min-height:1.25em;margin:0;font-weight:700;font-size:15px;font-size:clamp(12px,2.7cqw,19px);color:#ff7a6c}
.cs-section .cs-name-go{border:0;border-radius:999px;padding:.5em 1.6em;background:linear-gradient(#f2343e,#b10d17);color:#fff3df;font:800 18px 'Barlow Condensed','Roboto Condensed','Arial Narrow',Arial,sans-serif;font-size:clamp(14px,3.5cqw,25px);letter-spacing:.08em;box-shadow:0 4px 0 #5e060c,0 8px 18px rgba(0,0,0,.5);cursor:pointer}
.cs-section .cs-name-go:active{transform:translateY(3px);box-shadow:0 1px 0 #5e060c,0 4px 10px rgba(0,0,0,.5)}
.cs-section .cs-name-alt{border:0;padding:.2em .4em;background:none;color:#d9b27a;font:600 15px 'Barlow Condensed','Roboto Condensed','Arial Narrow',Arial,sans-serif;font-size:clamp(12px,2.7cqw,19px);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cs-name small{max-width:86%;font-size:12px;font-size:clamp(9px,2cqw,14px);line-height:1.3;color:rgba(241,223,196,.62);letter-spacing:.03em}
.cs-section .cs-name button:focus-visible{outline:3px solid #fff0d6;outline-offset:3px}
.cs-section .cs-name input:focus-visible{outline:none}
.cs-shake{animation:csShake .38s}
@keyframes csShake{20%{transform:translateX(-1.2%)}40%{transform:translateX(1.2%)}60%{transform:translateX(-.8%)}80%{transform:translateX(.6%)}}
@media(prefers-reduced-motion:reduce){.cs-shake{animation:none}}
.cs-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

@media(max-width:860px){.cs-layout{grid-template-columns:minmax(180px,260px) minmax(300px,1fr);gap:28px}}
@media(max-width:680px){
  .cs-section{margin:38px 0}
  .cs-invite{padding:24px 0;gap:14px}
  .cs-invite p:not(.cs-kicker){max-width:230px;font-size:12px}
  .cs-kicker{font-size:8px!important;letter-spacing:1.4px}
  .cs-invite h2{font-size:29px}
  .cs-open{padding:16px 12px;font-size:10px!important}
  .cs-open span{margin-left:5px}
  .cs-layout{display:flex;flex-direction:column;gap:22px}
  .cs-guide{order:2}
  .cs-guide h3{display:none}
  .cs-guide ol{font-size:13px}
  .cs-guide small{margin-top:10px}
  .cs-panel{padding-top:24px}
  .cs-cabinet{max-width:560px;margin:auto}
}
@media(max-width:520px){.cs-cabinet{width:100%;max-width:none;margin-inline:0}.cs-invite>div{min-width:0}.cs-invite h2{overflow-wrap:break-word}}
@media(prefers-reduced-motion:reduce){.cs-section *{scroll-behavior:auto}}

.cs-section[hidden]{display:none!important}.cs-competition-info{padding:16px 4px;color:#d8c6a8;font:14px/1.6 Arial,sans-serif}.cs-competition-info small{font-size:11px;color:#a99b88}#csAwards p{border:1px solid #b88a47;padding:12px;color:#fff0d6}
/* Üst menü: oyun bağlantısı eklenince yazılar tek satırda kalsın, dar ekranda menü yana kaysın */
.topbar nav a{white-space:nowrap}
@media(max-width:700px){.topbar nav{overflow-x:auto;scrollbar-width:none}.topbar nav::-webkit-scrollbar{display:none}.topbar nav a{flex:1 0 auto;padding-left:7px;padding-right:7px}}
/* Bir Kahve Molası: iki oyunlu bölüm (Necati's Night Shift + Saklı 17) */
.km-section{margin:64px 0;scroll-margin-top:30px;color:#fff0d6;font-family:Arial,sans-serif;border-bottom:1px solid #745638}
.km-head{padding:0 4px 26px}
.km-head h2{font:900 clamp(28px,4vw,50px)/.98 Impact,'Arial Narrow',sans-serif;letter-spacing:-1px;margin:15px 0}
.km-head h2 em,.cs-invite h3 em{font-style:normal;color:#df1725}
.km-head p:not(.cs-kicker){font-size:14px;color:#cbbba7;margin:0}
.km-section .cs-section{margin:0;border-top:1px solid #745638}
.km-section .cs-invite{border-block:0}
.cs-invite h3{font:900 clamp(22px,3vw,36px)/1 Impact,'Arial Narrow',sans-serif;letter-spacing:-.5px;margin:12px 0}
.km-frame{padding-bottom:24px}
.km-frame iframe{display:block;width:100%;height:640px;border:0}
@media(max-width:700px){.km-section{margin:38px 0}.km-head{padding-bottom:18px}.km-head h2{font-size:29px}.km-head p:not(.cs-kicker){font-size:12px}.cs-invite h3{font-size:22px}}