/* ZATVORSKI HAOS – stilovi interfejsa */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0d0b14; color: #fff;
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif; user-select: none; -webkit-user-select: none; touch-action: none; }
canvas#game { position: fixed; inset: 0; display: block; }

.screen { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 10;
  background: radial-gradient(ellipse at center, rgba(10,8,20,0.35), rgba(10,8,20,0.82)); padding: 16px; overflow-y: auto; }
.screen.show { display: flex; animation: fadeIn .35s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.panel { background: linear-gradient(180deg, #2b2438 0%, #1b1626 100%); border: 3px solid #1c1922;
  box-shadow: 0 0 0 3px #4a3f5c, 0 18px 50px rgba(0,0,0,.6); border-radius: 22px; padding: 24px 30px; max-width: 760px; width: 100%;
  text-align: center; max-height: calc(100vh - 32px); overflow-y: auto; }
.small-panel { max-width: 460px; }
.title-panel { background: linear-gradient(180deg, rgba(43,36,56,.92), rgba(27,22,38,.92)); }

.studio { letter-spacing: 4px; font-size: 12px; color: #ffb36b; font-weight: bold; text-transform: uppercase; }
.logo { margin: 6px 0 0; line-height: .9; font-family: "Arial Black", Impact, sans-serif; }
.logo span { display: block; }
.logo .l1 { font-size: clamp(30px, 6vw, 58px); color: #ece4cf; letter-spacing: 3px;
  text-shadow: 3px 3px 0 #1c1922, -2px -2px 0 #1c1922, 2px -2px 0 #1c1922, -2px 2px 0 #1c1922, 0 6px 0 #4a3f5c; }
.logo .l2 { font-size: clamp(54px, 12vw, 116px); letter-spacing: 6px;
  background: repeating-linear-gradient(180deg, #ff8fc0 0 14px, #ffd43b 14px 28px); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 3px #1c1922; filter: drop-shadow(0 6px 0 #1c1922); transform: rotate(-2deg); animation: wob 3s ease-in-out infinite; }
@keyframes wob { 50% { transform: rotate(2deg) scale(1.03); } }
.ep { margin-top: 10px; display: inline-block; background: #c0392b; color: #fff; padding: 5px 14px; border-radius: 30px; font-weight: bold;
  letter-spacing: 2px; font-size: 13px; border: 2px solid #1c1922; }
.tag { color: #d9d2e6; font-size: 15px; line-height: 1.45; max-width: 560px; margin: 14px auto; }
h2 { font-family: "Arial Black", Arial, sans-serif; color: #ffd43b; margin: 0 0 10px; font-size: 26px; text-shadow: 2px 2px 0 #1c1922; }
h3 { color: #ffb36b; margin: 8px 0 6px; font-size: 16px; }
p { line-height: 1.45; color: #e3dcef; }
p.small, .small { font-size: 13.5px; color: #bdb4cc; }

.btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.btns.col { flex-direction: column; align-items: stretch; }
button { font: bold 15px "Trebuchet MS", Arial, sans-serif; color: #fff; background: #4a3f5c; border: 3px solid #1c1922; border-radius: 14px;
  padding: 10px 18px; cursor: pointer; box-shadow: 0 4px 0 #1c1922; transition: transform .08s, background .15s; }
button:hover { background: #5d4f74; }
button:active { transform: translateY(3px); box-shadow: 0 1px 0 #1c1922; }
button.big { font-size: 20px; padding: 12px 28px; background: linear-gradient(180deg, #ffcf4a, #f39c12); color: #1c1922; }
button.big:hover { background: linear-gradient(180deg, #ffe07a, #f5b041); }
.best { margin-top: 12px; color: #9be59b; font-weight: bold; font-size: 14px; }

.brief-list { text-align: left; list-style: none; padding: 0; margin: 12px auto; max-width: 560px; }
.brief-list li { background: rgba(255,255,255,.06); border: 2px solid rgba(255,255,255,.08); border-radius: 12px; padding: 8px 12px; margin: 6px 0; display: flex; flex-direction: column; }
.brief-list b { color: #ffe066; }
.brief-list span { color: #bdb4cc; font-size: 13px; }

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; text-align: left; }
@media (max-width: 640px) { .cols { grid-template-columns: 1fr; } }
table.keys { border-collapse: collapse; width: 100%; font-size: 14px; }
table.keys td { padding: 5px 4px; border-bottom: 1px solid rgba(255,255,255,.08); color: #e3dcef; }
table.keys td:first-child { white-space: nowrap; }
kbd { display: inline-block; min-width: 24px; padding: 2px 6px; margin: 0 2px; background: #ece4cf; color: #1c1922; border-radius: 6px; border: 2px solid #1c1922; box-shadow: 0 2px 0 #1c1922; font: bold 12px Arial; text-align: center; }
.tb { display: inline-block; padding: 3px 8px; border-radius: 8px; background: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.35); font-weight: bold; font-size: 12px; }
.tips { margin: 0; padding-left: 18px; color: #d9d2e6; font-size: 13.5px; line-height: 1.5; }

.stars { font-size: 54px; margin: 6px 0; letter-spacing: 6px; }
.star { color: rgba(255,255,255,.15); -webkit-text-stroke: 2px #1c1922; display: inline-block; }
.star.on { color: #ffd43b; animation: pop .5s ease backwards; }
.star.on:nth-child(2) { animation-delay: .25s; } .star.on:nth-child(3) { animation-delay: .5s; }
@keyframes pop { from { transform: scale(0) rotate(-90deg); } to { transform: scale(1); } }
.stats { text-align: left; margin: 8px auto; max-width: 360px; }
.stats div { display: flex; justify-content: space-between; padding: 6px 4px; border-bottom: 1px solid rgba(255,255,255,.1); }
.stats .total { font-size: 19px; color: #ffd43b; border-bottom: 2px solid #ffd43b; }
.stats .best { font-size: 14px; color: #9be59b; margin: 0; }
#end.lose h2 { color: #ff6b6b; }

#topbtns { position: fixed; top: 10px; right: 10px; z-index: 5; display: none; gap: 8px; }
#topbtns button { width: 46px; height: 46px; padding: 0; font-size: 20px; border-radius: 12px; background: rgba(43,36,56,.85); }

#touch { position: fixed; inset: auto 0 0 0; z-index: 6; display: none; justify-content: space-between; align-items: flex-end;
  padding: 0 max(14px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-right)); pointer-events: none; }
#touch.show { display: flex; }
#touch button { pointer-events: auto; touch-action: none; background: rgba(30,26,42,.55); border: 3px solid rgba(255,255,255,.35); color: #fff;
  box-shadow: none; border-radius: 50%; font-size: 26px; width: 74px; height: 74px; padding: 0; backdrop-filter: blur(2px); }
#touch button.on { background: rgba(255,212,59,.6); border-color: #ffd43b; color: #1c1922; transform: scale(.94); }
#touch .tl { display: flex; gap: 12px; }
#touch .tr { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
#touch .row { display: flex; gap: 10px; align-items: flex-end; }
#touch button.sm { width: 66px; height: 66px; font-size: 12px; font-weight: bold; }
#touch button.act { width: 84px; height: 84px; font-size: 30px; background: rgba(46,204,113,.45); }
@media (max-height: 420px) {
  #touch button { width: 62px; height: 62px; font-size: 22px; }
  #touch button.sm { width: 56px; height: 56px; font-size: 11px; }
  #touch button.act { width: 70px; height: 70px; }
  .panel { padding: 14px 18px; }
  .logo .l2 { font-size: 64px; }
  .tag { font-size: 13px; margin: 8px auto; }
}

#rotate { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; text-align: center;
  background: #14111d; font-size: 22px; font-weight: bold; color: #ffd43b; line-height: 1.6; }

.fenix { width: 96px; height: 96px; border-radius: 22px; border: 3px solid #1c1922; box-shadow: 0 0 0 3px #ff8a1e, 0 0 24px rgba(255,138,30,.55);
  display: block; margin: 0 auto 8px; object-fit: cover; animation: bob 2.6s ease-in-out infinite; }
.fenix.small { width: 64px; height: 64px; border-radius: 16px; }
@keyframes bob { 50% { transform: translateY(-4px) rotate(-2deg); } }
.langs { display: flex; gap: 6px; justify-content: center; margin-bottom: 8px; }
.langs button { font-size: 12px; padding: 5px 12px; border-radius: 20px; box-shadow: 0 2px 0 #1c1922; opacity: .65; }
.langs button.sel { opacity: 1; background: #ff8a1e; color: #1c1922; }
.btns.col .langs { margin: 4px 0 0; }
@media (max-height: 420px) { .fenix { width: 58px; height: 58px; margin-bottom: 4px; } }

/* Mobile-friendly camera controls: separate from movement and action buttons. */
#cameraControls { display:flex; gap:5px; align-items:center; background:rgba(19,20,35,.72); padding:5px; border-radius:14px; }
#cameraControls button { width:38px; height:38px; border-radius:9px; background:rgba(69,68,101,.88); font-size:21px; font-weight:900; }
#cameraControls button:active { background:#ffd43b; color:#1c1922; }
@media(max-width:800px) { #topbtns { top:calc(4px + env(safe-area-inset-top));right:calc(4px + env(safe-area-inset-right));gap:4px; }
#topbtns>button { width:35px;height:35px;font-size:16px; }
#cameraControls { gap:3px;padding:3px; }
#cameraControls button { width:32px;height:32px;font-size:19px; }
}
@media(max-height:400px) {#topbtns { transform:scale(.88);transform-origin:top right; }}

/* School Chaos responsive portrait: never cover gameplay with rotation prompt. */
#rotate{display:none!important}
@media (pointer:coarse) and (orientation:portrait){
 #touch{padding-left:max(5px,env(safe-area-inset-left));padding-right:max(5px,env(safe-area-inset-right));padding-bottom:max(7px,env(safe-area-inset-bottom))}
 #touch button{width:clamp(45px,12vw,64px);height:clamp(45px,12vw,64px);font-size:18px}
 #touch button.sm{width:clamp(43px,11vw,59px);height:clamp(43px,11vw,59px);font-size:11px}
 #touch button.act{width:clamp(50px,14vw,72px);height:clamp(50px,14vw,72px)}
 #topbtns{top:calc(5px + env(safe-area-inset-top));right:calc(5px + env(safe-area-inset-right))}
 .panel{max-height:calc(100dvh - 18px);overflow:auto}
}

/* School Chaos v3: portrait view and leaderboard must not cover E/action button. */
@media (pointer:coarse) and (orientation:portrait) and (max-width:800px){
 #fgRanksBtn{position:fixed!important;top:calc(74px + env(safe-area-inset-top))!important;right:8px!important;bottom:auto!important;left:auto!important;z-index:15!important;min-width:44px;min-height:44px;padding:8px!important;border-radius:12px!important}
 #touch .tr{padding-right:6px;gap:8px}
 #touch button.act{position:relative;z-index:12!important;background:rgba(46,204,113,.78)!important;border-color:#b7ffbc!important}
 #touch.show{z-index:20}
 #cameraControls{gap:2px}
}
@media (pointer:coarse) and (orientation:landscape) and (max-height:540px){
 #fgRanksBtn{bottom:auto!important;top:calc(55px + env(safe-area-inset-top))!important;right:8px!important;left:auto!important}
}