/* Mobiltilpasning, valgfri fokusvisning og spillfeiring for Vennesla by */
:root{--vb-safe-bottom:env(safe-area-inset-bottom,0px)}
.vb-focus-top,.vb-focus-floating{font:900 12px ui-monospace,monospace;cursor:pointer;background:#17382b;color:#f6f7dc;border:2px solid #8db68e;padding:8px 12px;white-space:nowrap}
.vb-focus-top{align-self:center;margin-left:auto}
.vb-focus-floating{position:absolute;right:6px;bottom:8px;z-index:55;width:33px;height:32px;padding:4px;display:grid;place-items:center;background:#172d25d9;border-color:#d9edc5;font-size:17px;opacity:.9}
.vb-focus-floating:hover,.vb-focus-top:hover{background:#326749}
.vb-focus-mode body{overflow:hidden!important;margin:0;padding:0!important}
.vb-focus-mode .shell{position:fixed;inset:0;z-index:100;width:100vw;height:100dvh;max-width:none;display:grid;place-items:center;background:#101b1a;border:0;box-shadow:none}
.vb-focus-mode .shell>.topbar,.vb-focus-mode .shell>footer{display:none!important}
.vb-focus-mode .game-wrap{width:min(100vw,calc(100dvh * 1.5));height:auto;max-height:100dvh;aspect-ratio:3/2;margin:auto;align-self:center;justify-self:center}
.vb-focus-mode .game-wrap>canvas#game{width:100%;height:100%;aspect-ratio:3/2}
.vb-focus-mode .vb-focus-floating{bottom:auto;top:76px;right:7px}
.start-screen,.welcome-screen{overflow:auto;overscroll-behavior:contain}
.start-card,.welcome-card{max-height:96%;overflow:auto;overscroll-behavior:contain}
.vb-tutorial{position:absolute;z-index:12;top:34%;left:7px;width:min(265px,45%);padding:9px 11px;background:#172b35ee;color:#fff8d9;border:3px solid #f6db89;box-shadow:0 4px 0 #0c1217,0 5px 18px #0009;pointer-events:auto}
.vb-tutorial-step{font:900 13px/1.4 ui-monospace,monospace;color:#ffe28a}
.vb-tutorial p{font:700 11px/1.55 ui-monospace,monospace;color:#f3f1dd;margin:5px 0}
.vb-tutorial button{background:transparent;border:1px solid #f0e5ae;color:#f9f0d6;padding:5px;font:700 10px ui-monospace,monospace;cursor:pointer}
.vb-tutorial-active .hud{opacity:.65}
.vb-medal-toast{position:absolute;z-index:54;left:50%;top:23%;transform:translateX(-50%);text-align:center;width:max-content;max-width:88%;padding:11px 18px;color:#fff4c6;background:#3c2940f4;border:4px solid #f6d573;box-shadow:0 5px 0 #14111d,0 10px 24px #000b;font:900 clamp(11px,2.4vw,18px)/1.35 ui-monospace,monospace;pointer-events:none}
.vb-pop-in{animation:vb-medal-arrive .5s cubic-bezier(.2,1.2,.2,1) both}
@keyframes vb-medal-arrive{from{opacity:0;transform:translate(-50%,-30px) scale(.8)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
.vb-confetti{position:absolute;inset:0;pointer-events:none;z-index:48;overflow:hidden}
.vb-confetti i{position:absolute;left:var(--x);top:-12%;width:7px;height:12px;opacity:0;animation:vb-confetti-fall var(--dur) var(--delay) linear both}
@keyframes vb-confetti-fall{0%{opacity:1;transform:translateY(0) rotate(0deg)}85%{opacity:1}100%{opacity:0;transform:translateY(650px) rotate(720deg)}}
.vb-learning-button{display:block;margin:10px auto 3px;background:#d9efc4!important;border:3px solid #15231d!important;color:#143423!important;padding:9px 13px!important;font:900 12px ui-monospace,monospace!important;cursor:pointer}
.vb-learning-report{margin:10px auto 6px;padding:12px;max-width:560px;max-height:230px;overflow:auto;overscroll-behavior:contain;background:#fff8e4;color:#15251b;text-align:left;border:3px solid #f5d78b;font:12px/1.55 ui-monospace,monospace}
.vb-learning-report h3{margin:0 0 6px;font-size:16px}
.vb-learning-report h4{margin:9px 0 4px;font-size:13px}
.vb-learning-report p{margin:5px 0!important;color:#26402d!important;text-align:left!important;font-size:12px!important}
.vb-learning-report ul{list-style:none;padding:0;margin:5px 0}
.vb-learning-report li{border-bottom:1px solid #d6d3b5;padding:6px 0}
.vb-learning-report li strong{display:block;font-size:12px}
.vb-learning-report li span{display:block;font-size:11px;line-height:1.5}
.vb-learning-report .vb-learn-review{background:#fff3cb;padding:7px}
.vb-learning-report .vb-learn-advice{font-weight:900!important;border-top:2px solid #76916b;padding-top:8px}
@media(max-width:720px){
  body{padding:0!important}
  .shell{width:100%;border-left:0;border-right:0}
  .topbar{padding:7px 9px;gap:7px;align-items:center;flex-direction:row}
  .topbar h1{font-size:18px;letter-spacing:1px}
  .topbar p{font-size:9px}
  .topbar .controls{display:none}
  .vb-focus-top{font-size:11px;padding:6px 7px}
  .vb-tutorial{top:30%;width:min(225px,56%);padding:7px}
  .vb-tutorial p{font-size:10px}
  .start-card{padding:10px 12px!important}
  .start-card h2{font-size:clamp(20px,6vw,34px)!important;margin-bottom:8px}
  .start-lead{font-size:clamp(10px,2.6vw,14px)!important;margin-bottom:8px}
  .start-instructions{font-size:11px;padding:7px;gap:3px;margin-bottom:8px}
  .start-card button{padding:8px 13px;font-size:13px}
  .welcome-screen{padding:6px}
  .welcome-card{padding:8px!important}
  .welcome-card h2{font-size:18px!important}
  .welcome-card p{font-size:11px;margin-bottom:7px}
  .welcome-card .character-preview{height:60px}
  .welcome-card .character-preview canvas{width:39px;height:54px}
  .welcome-card .character-choices{gap:7px}
  .welcome-card .character-choice{padding:4px}
  .welcome-card .name-stage{margin-top:6px}
  .welcome-card .name-btn{font-size:12px;padding:7px}
  .welcome-card .vb-nickname{margin:4px auto;padding:4px}
  .welcome-card .vb-nickname label{font-size:10px}
  .welcome-card .vb-nickname input[type=text]{padding:4px}
  .welcome-card .mode-picker{margin:4px auto}
  .welcome-card .mode-picker select{font-size:12px}
  .vb-learning-report{max-height:34dvh}
}
/* Små mobilskjermer har knappene utenfor det 3:2-spillområdet. */
@media (pointer:coarse) and (max-width:720px) and (orientation:portrait){
  .vb-playing .touch-controls{position:fixed;z-index:39;left:10px;right:10px;bottom:calc(12px + var(--vb-safe-bottom));width:auto}
  .vb-playing .touch-talk{background:#203d32ed}
  .vb-playing .feature-panel{max-height:62%;overflow:auto}
  .shell footer{padding-bottom:9px}
}
/* Landskap: spillet får en egen sentrert flate, styrekorset i margen. */
@media (max-height:540px) and (orientation:landscape){
  html,body{height:100dvh;min-height:0;overflow:hidden}
  body{padding:0!important}
  .shell{width:min(calc(100vw - 245px),calc((100dvh - 12px) * 1.5));height:auto;border:0;box-shadow:none}
  .topbar,footer{display:none!important}
  .game-wrap{width:100%;aspect-ratio:3/2}
  .game-wrap>canvas#game{width:100%;aspect-ratio:3/2}
  .vb-focus-mode .game-wrap{width:min(calc(100vw - 245px),calc((100dvh - 12px) * 1.5));}
  .vb-playing .touch-controls{position:fixed;left:8px;right:8px;bottom:calc(5px + var(--vb-safe-bottom));width:auto;z-index:39}
  .vb-playing .touch-dpad{grid-template-columns:repeat(3,43px);grid-template-rows:repeat(3,43px)}
  .vb-playing .touch-talk{min-width:86px!important;min-height:65px!important}
  .feature-tools{top:38px!important}
  .feature-panel{top:73px!important;max-height:65%!important;overflow:auto}
  .vb-tutorial{top:30%;max-width:42%;padding:6px}
  .vb-tutorial-step{font-size:11px}
  .vb-tutorial p{font-size:10px}
  .start-screen,.welcome-screen{padding:4px}
  .start-card,.welcome-card{max-height:calc(100% - 8px)}
  .end-scene-card{max-height:100%!important}
}
@media(prefers-reduced-motion:reduce){
 .vb-pop-in,.vb-confetti i{animation:none!important}
}

/* Unngå at mobilknappene ligger over «Godt forsøk» eller sluttskjermen. */
.game-wrap:has(#gameOver:not(.hidden)) .touch-controls,
.game-wrap:has(#endScene:not(.hidden)) .touch-controls{display:none!important}
.vb-learning-report .vb-learn-unknown{background:#f1efe6;padding:7px;color:#4c4c3f}
@media(max-width:500px){
  .hud{inset:5px 5px auto;gap:3px;font-size:9px}
  .hud-left,.hud-right{gap:3px}
  .hud-chip{padding:3px 5px;font-size:9px}
  .vb-timer{min-width:73px!important}
  .feature-tools{top:45px!important}
  .feature-tools button{font-size:9px!important;padding:4px!important}
  #vbFocusFloating{width:28px;height:28px;font-size:15px}
}