* { margin:0; padding:0; box-sizing:border-box; -webkit-user-select:none; user-select:none; }
input { -webkit-user-select:auto; user-select:auto; }

html, body {
  width:100%; height:100%; overflow:hidden;
  background:#1d2b12;
  font-family: "Comic Sans MS", "Segoe UI", sans-serif;
}

/* Skalering: stage er alltid 650x400, #scaler sentrerer og skalerer via JS */
#scaler {
  position:absolute; top:0; left:0;
  transform-origin: top left;
}
#stage {
  position:relative;
  width:650px; height:400px;
  overflow:hidden;
  background:#7ec03a;
  box-shadow:0 0 40px rgba(0,0,0,.6);
}

#bg { position:absolute; top:0; left:0; width:650px; height:400px; }

/* Hengekoya (guiro-spilleren ligger mellom bak og foran, bygges av game.js) */
#hammock-bak   { position:absolute; left:0; top:0; width:650px; z-index:2; pointer-events:none; }
#hammock-foran { position:absolute; left:0; top:0; width:650px; z-index:4; pointer-events:none; }

/* Instrument-karakterer */
.char {
  position:absolute;
  pointer-events:none;               /* klikk gaar til scenen (alfa-treff i game.js) */
  transform-origin: 50% 100%;
  transition: filter .12s;
  -webkit-tap-highlight-color:transparent;
}
.char img { position:absolute; top:0; left:0; display:block; pointer-events:none; }
.char .overlay { transform-origin:50% 88%; transition:transform .11s ease-in-out; }
/* hvit duset overlay ved hover ELLER mens menyen er aapen (som Flash setTint mot hvit) */
.char .tint, .char .tint-overlay {
  filter:brightness(0) invert(1); opacity:0; transition:opacity .1s;
  -webkit-backface-visibility:hidden; backface-visibility:hidden;   /* isoler filter-laget - unngaa hvit-blink paa mobil */
  will-change:opacity;
}
.char .tint-overlay { transform-origin:50% 88%; transition:opacity .1s, transform .11s ease-in-out; }   /* folger hodet */
/* skru av invert-filter-tinten paa touch-enheter (unngaa hvit-blink paa mobil) */
@media (hover: none) { .char .tint, .char .tint-overlay { display:none !important; } }
.char.hover .tint, .char.menusel .tint,
.char.hover .tint-overlay, .char.menusel .tint-overlay { opacity:.3; }
/* Ingen bevegelse/skalering - animasjon skjer KUN ved bildebytte (se hit() i game.js) */

.frame { position:absolute; top:0; left:0; }

/* Ugler (skala settes per element i game.js fra SWF-data) */
.ugle {
  position:absolute; width:65px; height:91px;
  transform-origin:top left; transition:transform .1s ease;
  background:url(assets/ugle_brun.png) no-repeat center/contain;
}
.ugle .eye {
  position:absolute; top:11px; width:22px; height:21px;
  opacity:0; transition:opacity .06s;
  background:url(assets/ugle_oye.png) no-repeat center/contain;
}

/* Volum */
/* Global verktoylinje (styr alle) */
#toolbar {
  position:absolute; z-index:300; top:8px; right:6px;
  display:flex; flex-direction:row; gap:5px;
}
.tbtn { border:none; background:none; padding:0; cursor:pointer; transition:transform .08s; }
.tbtn:hover { transform:scale(1.1); }
.tbtn:active { transform:scale(1.03); }
.tbtn img { width:46px; height:46px; display:block; border-radius:9px; box-shadow:0 2px 5px rgba(0,0,0,.5); }

#volume {
  position:absolute; top:60px; left:481px; z-index:300; display:flex; align-items:center; gap:6px;
  background:rgba(0,0,0,.665); border-radius:20px; padding:5px 10px 5px 8px;
}
#vol-icon { cursor:pointer; position:relative; }
#vol-icon.muted::after {                       /* rod strek over hoyttaler ved mute */
  content:''; position:absolute; left:-3px; top:50%; width:30px; height:3px; margin-top:-1.5px;
  background:#e81f1f; border-radius:2px; transform:rotate(-45deg); transform-origin:center;
  box-shadow:0 0 0 1px rgba(0,0,0,.45);
}
#vol-icon {
  width:22px; height:20px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M3 9v6h4l5 5V4L7 9H3zm13.5 3a4.5 4.5 0 00-2.5-4v8a4.5 4.5 0 002.5-4zM14 3.2v2.1a7 7 0 010 13.4v2.1a9 9 0 000-17.6z'/></svg>") no-repeat center/contain;
}
#vol-slider { width:80px; cursor:pointer; }

/* Rytme-meny - gront panel m/ instrumentnavn, 4 store ikoner, snurrende stjerne bak valgt */
#menu {
  position:absolute; z-index:400; transform-origin:50% 100%;
  background:linear-gradient(#0a7a0a,#045c04); border:3px solid #6fe66f; border-radius:16px;
  padding:9px 15px 14px; box-shadow:0 7px 22px rgba(0,0,0,.6);
}
#menu.hidden { display:none; }
#menu.show { animation:menuPop .22s cubic-bezier(.2,1.35,.5,1); }
@keyframes menuPop { from { transform:scale(.15); opacity:.2; } to { transform:scale(1); opacity:1; } }
#menu-title {
  text-align:center; color:#fff; font-weight:bold; font-style:italic; font-size:24px;
  font-family:"Comic Sans MS", sans-serif; text-shadow:0 2px 3px rgba(0,0,0,.55); margin-bottom:7px;
}
#menu-row { position:relative; display:flex; gap:15px; }
#menu-star {
  position:absolute; z-index:1; width:92px; height:92px; top:-11px; left:0; display:none;
  pointer-events:none; animation:starSpin 18s linear infinite;   /* 0.5gr/frame @ 40fps = 18s/omdr (som FLA) */
}
@keyframes starSpin { to { transform:rotate(360deg); } }
.mbtn {
  position:relative; z-index:2; border:none; background:none; padding:0; cursor:pointer; transition:transform .08s;
}
.mbtn:hover { transform:scale(1.08); }
.mbtn:active { transform:scale(1.02); }
.mbtn .nicon { width:70px; height:70px; display:block; border-radius:12px; box-shadow:0 2px 6px rgba(0,0,0,.45); }

/* Startskjerm */
#title-screen {
  position:absolute; inset:0; z-index:1000;
  background:url(assets/bg.png) no-repeat center/cover;
  color:#fff;
}
#title-screen::before { content:""; position:absolute; inset:0; background:rgba(8,16,5,.6); }
#logo { position:relative; z-index:1; text-align:center; padding-top:6px; }
#logo img { display:block; margin:0 auto; }
.intro {
  position:relative; z-index:1; text-align:center; font-size:17px; line-height:1.5;
  margin:10px 24px 0; text-shadow:0 2px 3px rgba(0,0,0,.85);
}
#legend {
  list-style:none; position:absolute; z-index:1; left:20px; bottom:14px; font-size:17px;
}
#legend li { display:flex; align-items:center; gap:9px; margin:5px 0; text-shadow:0 1px 2px rgba(0,0,0,.85); }
#legend .lic { width:26px; height:26px; border-radius:5px; flex:0 0 auto; }
#start-btn {
  position:absolute; z-index:1; right:22px; bottom:18px;
  background:none; border:none; cursor:pointer; padding:0; line-height:0;
}
#start-btn img { display:block; }
#start-btn:hover { filter:brightness(1.08); }
#start-btn:active { transform:translateY(2px); }

/* Loader */
#loader {
  position:absolute; inset:0; z-index:1100; background:#1d2b12; color:#cfe0a0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  font-size:15px;
}
#loader.hidden { display:none; }
.spin {
  width:38px; height:38px; border:5px solid rgba(255,255,255,.2);
  border-top-color:#ffe45e; border-radius:50%; animation:spin 1s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }