@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@400;700;800;900&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
#version-label{position:absolute;bottom:1.2%;right:1%;font-size:28px;color:rgba(255,255,255,0.5);font-family:'Nunito',sans-serif;font-weight:700;letter-spacing:0.03em;pointer-events:none;z-index:10;}
html,body{width:100%;height:100%;overflow:hidden;background:#000;font-family:'Nunito',sans-serif;touch-action:none;}
#app{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%) scale(1);
  transform-origin:center center;
  width:2008px;height:1080px;
  overflow:hidden;
}
.screen{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;pointer-events:none;transition:opacity 0.3s;}
.screen.active{opacity:1;pointer-events:all;}
.bg{position:absolute;top:0;left:0;width:100%;height:100%;background-size:100% 100%;background-repeat:no-repeat;}

/* ── SPLASH ── */
#splash .bg{background-image:url('Screenshots/splash.jpg');background-color:#fff;}

/* ── HOME ── */
#home .bg{background-image:url('Screenshots/homescreen.jpg')}
.play-btn{
  position:absolute;
  left:9.1%;top:60.1%;width:37.4%;height:35.6%;
  background:transparent;border:none;cursor:pointer;z-index:10;
}

/* ── MODES ── */
#modes .bg{background-image:url('Screenshots/mode_selection.jpg')}
.modes-overlay{position:absolute;top:0;left:0;width:100%;height:100%;}
.mode-hit{
  position:absolute;cursor:pointer;
  background:transparent;border:none;border-radius:10px;
  top:31.1%;height:37.2%;
}
.mode-hit::after{
  content:'';position:absolute;inset:0;border-radius:10px;
  background:rgba(255,255,255,0);pointer-events:none;
  transition:background 0.25s ease-out;
}
.mode-hit.pressed::after{background:rgba(255,255,255,0.28);transition:none;}

/* ── THEMES ── */
#themes .bg{background-image:url('Screenshots/theme_selection.jpg')}
.themes-overlay{position:absolute;top:0;left:0;width:100%;height:100%;}
.theme-hit{
  position:absolute;cursor:pointer;
  background:transparent;border:none;border-radius:10px;
  top:26%;height:51%;
}

/* ── LEVELS ── */
#levels .bg-farm{background-image:url('Screenshots/level_selection_farm.jpg')}
#levels .bg-fantasy{background-image:url('Screenshots/level_selection_fantasy.jpg')}
.levels-bar{position:absolute;top:0;left:0;width:100%;height:100%;}
.lvl-hit{
  position:absolute;cursor:pointer;
  background:transparent;border:none;border-radius:8px;
  top:70%;height:20%;
}
.lvl-hit::after{
  content:'';position:absolute;inset:0;border-radius:8px;
  background:rgba(255,255,255,0);pointer-events:none;
  transition:background 0.25s ease-out;
}
.lvl-hit.pressed::after{background:rgba(255,255,255,0.28);transition:none;}

/* ── CHAMP SELECTION ── */
#champ-selection .bg{background-image:url('Screenshots/champ_selection.jpg')}
.champ-hit{
  position:absolute;cursor:pointer;
  background:transparent;border:none;border-radius:14px;
  top:28%;height:53%;width:23%;
}
.champ-hit::after{
  content:'';position:absolute;inset:0;border-radius:14px;
  background:rgba(255,255,255,0);pointer-events:none;
  transition:background 0.25s ease-out;
}
.champ-hit.pressed::after{background:rgba(255,255,255,0.28);transition:none;}

/* ── GAMEPLAY ── */
#gameplay .bg-farm{background-image:url('Screenshots/game_screen_mode_1_2_farm.png')}
#gameplay .bg-fantasy{background-image:url('Screenshots/game_screen_mode_1_2_fantasy.png')}
#gameplay .bg-freestyle{background-image:url('Screenshots/game_screen_mode_4_farm.jpg')}
#gameplay .bg-champ{background-image:url('Screenshots/champ_game.jpg')}

/* HUD */
.hud{position:absolute;top:3.1%;left:0;right:0;height:9%;display:flex;align-items:center;gap:1%;padding:0 1%;z-index:10;}
.hud-icon{
  width:7%;height:100%;
  background:transparent;border:none;cursor:pointer;
  flex-shrink:0;
}
.hud-prompt{
  position:absolute;left:47%;width:20%;height:100%;
  background:rgba(255,255,255,1.0);
  border-radius:10px;padding:2px 8px;
  font-size:50px;font-weight:800;color:#222;
  text-align:center;border:1.5px solid rgba(0,0,0,0.1);
  display:flex;align-items:center;justify-content:center;
}
.hud-prompt .note-name{color:#22a055;font-size:50px;padding-left: 10px;}
.hud-status{
  position:absolute;left:68.5%;width:29.5%;height:100%;
  background:rgba(255,255,255,1.0);border-radius:10px;
  padding:2px 0;display:flex;align-items:center;overflow:hidden;
  font-size:50px;border:1.5px solid rgba(0,0,0,0.1);
  container-type:size;
}
.hud-icon-note{color:#333;font-size:65px;flex-shrink:0;}
.hud-icon-clef{color:#333;font-size:90cqh;flex-shrink:0;}
.hud-counter{font-weight:800;color:#333;flex:1;text-align:center;}
.hud-sep{color:#bbb;flex-shrink:0;}
.hud-lives{display:flex;gap:2px;flex:1;justify-content:center;}
.hud-life{color:#c8a020;font-size:70px;}
.hud-life.dead{color:#c0392b;}
.hud-score{font-weight:900;color:#333;flex:1;text-align:center;}

/* Rail */
.gp-rail{
  position:absolute;
  top:49%;left:15%;right:10%;
  height:4%;
  background:#3e2725;
  border-radius:20px;
  display:flex;align-items:center;
  overflow:hidden;padding:0 12px;
  z-index:5;
}
.replay-pill{
  position:absolute;
  left:1.5%;top:47.9%;width:8.9%;height:6.2%;
  background:#2980b9;border:none;border-radius:20px;
  color:#fff;font-size:35px;
  font-weight:800;cursor:pointer;white-space:nowrap;
  box-shadow:0 2px 0 #1a5f8a;
  display:flex;align-items:center;justify-content:center;gap:3px;
  z-index:6;
}
.rail-nodes{display:flex;flex:1;align-items:center;justify-content:space-between;}
.rail-node{
  width:clamp(10px,3vw,45px);height:clamp(10px,3vw,45px);
  border-radius:50%;background:#d4a843;border:2px solid #c09030;
  transition:background 0.3s;flex-shrink:0;
}
.rail-node.done{background:#27ae60;border-color:#1e8449;}
.rail-node.current{background:#f39c12;border-color:#e67e22;}
.rail-trophy{font-size:clamp(16px,4.5vw,24px);flex-shrink:0;}

/* Keyboard */
.kb-section{
  position:absolute;
  left:0.7%;right:0.7%;
  top:56%;bottom:0;
  background:transparent;
  z-index:5;
}
.keyboard{position:relative;display:flex;width:100%;height:100%;touch-action:none;}
.wkey{
  flex:1;height:100%;
  background:rgba(249,249,246,0.92);
  border-radius:0 0 6px 6px;border:1px solid #999;border-top:2px solid #ccc;
  cursor:pointer;display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:5px;font-size:clamp(7px,1.2vw,10px);font-weight:800;color:#555;
  position:relative;z-index:1;
  box-shadow:0 4px 0 #aaa,inset 0 -2px 4px rgba(0,0,0,0.08);
  transition:background 0.05s,transform 0.05s;user-select:none;
}
.wkey.pressed{
  background:rgba(220,220,240,0.95);
  transform:scaleY(0.97);transform-origin:top;
  box-shadow:0 1px 0 #aaa;
}
.wkey.correct{background:rgba(39,174,96,0.75);transform:scaleY(0.97);transform-origin:top;box-shadow:0 1px 0 #1e8449;}
.wkey.wrong{background:rgba(231,76,60,0.75);transform:scaleY(0.97);transform-origin:top;box-shadow:0 1px 0 #c0392b;}
.bkey.correct{background:linear-gradient(180deg,#27ae60 0%,#1e8449 70%);}
.bkey.wrong{background:linear-gradient(180deg,#e74c3c 0%,#c0392b 70%);}
.bkey{
  background:linear-gradient(180deg,#2a2a2a 0%,#111 70%);
  border-radius:0 0 5px 5px;position:absolute;top:0;z-index:2;
  cursor:pointer;border:1px solid #000;
  box-shadow:0 4px 0 #000,inset 0 -2px 4px rgba(255,255,255,0.1);
  transition:background 0.05s;user-select:none;
  height:58%;
}
.bkey.pressed{background:linear-gradient(180deg,#555 0%,#333 100%);box-shadow:0 1px 0 #000;}
.key-label{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);font-size:40px;font-weight:900;color:#555;pointer-events:none;white-space:nowrap;}
.bkey .key-label{color:#bbb;font-size:32px;}

/* Countdown */
.countdown-overlay{
  position:absolute;inset:0;background:rgba(0,0,0,0.45);
  display:flex;align-items:center;justify-content:center;z-index:30;
}
.countdown-num{
  font-family:'Fredoka One',cursive;font-size:22vw;color:#e8909a;
  text-shadow:4px 4px 0 #a0404a;
  animation:count-pop 0.7s cubic-bezier(0.68,-0.55,0.27,1.55);
}
@keyframes count-pop{0%{transform:scale(0.3);opacity:0;}70%{transform:scale(1.15);}100%{transform:scale(1);opacity:1;}}

/* Flashes */
.correct-flash,.wrong-flash{position:absolute;inset:0;pointer-events:none;z-index:20;opacity:0;transition:opacity 0.15s;}
.correct-flash.show{opacity:1;background:rgba(39,174,96,0.28);}
.wrong-flash.show{opacity:1;background:rgba(231,76,60,0.28);}

/* Modals */
.modal-wrap{position:absolute;inset:0;background:rgba(0,0,0,0.72);display:flex;align-items:center;justify-content:center;z-index:50;opacity:0;pointer-events:none;transition:opacity 0.3s;}
.modal-wrap.show{opacity:1;pointer-events:all;}
.modal-box{background:#1c1c1c;border-radius:40px;padding:48px 40px;width:560px;text-align:center;transform:scale(0.8);transition:transform 0.3s cubic-bezier(0.68,-0.55,0.27,1.55);}
.modal-wrap.show .modal-box{transform:scale(1);}
.modal-box.s{border:6px solid #27ae60;box-shadow:0 0 60px rgba(39,174,96,0.4);}
.modal-box.o{border:6px solid #e74c3c;box-shadow:0 0 60px rgba(231,76,60,0.4);}
.modal-icon{font-size:96px;margin-bottom:16px;}
.modal-title{font-family:'Fredoka One',cursive;font-size:52px;margin-bottom:8px;}
.modal-box.s .modal-title{color:#2ecc71;}
.modal-box.o .modal-title{color:#e74c3c;}
.modal-sub{color:#888;font-size:24px;margin-bottom:36px;}
.modal-btns{display:flex;gap:20px;justify-content:center;}
.modal-btn{background:#2980b9;color:#fff;border:none;border-radius:48px;padding:20px 36px;font-family:'Nunito',sans-serif;font-size:26px;font-weight:900;cursor:pointer;box-shadow:0 6px 0 #1a5f8a;}
.modal-btn:active{transform:translateY(2px);box-shadow:0 2px 0 #1a5f8a;}
.modal-btn.x{background:#555;box-shadow:0 6px 0 #333;}
.modal-btn.x:active{box-shadow:0 2px 0 #333;}
.settings-opt{background:transparent;color:#8e44ad;border:3px solid #8e44ad;box-shadow:0 6px 0 rgba(142,68,173,0.25);}
.settings-opt:active{box-shadow:0 2px 0 rgba(142,68,173,0.25);}
.settings-opt.selected{background:#8e44ad;color:#fff;border-color:#8e44ad;box-shadow:0 6px 0 #5a2d7a;}
.settings-opt.selected:active{box-shadow:0 2px 0 #5a2d7a;}

.back-btn{position:absolute;bottom:44%;left:2%;z-index:20;background:rgba(0,0,0,0.45);border:none;border-radius:20px;padding:8px 21px;color:#fff;font-size:33px;font-weight:800;cursor:pointer;}

/* Key highlight during tune playback */
.wkey.playing{background:rgba(39,174,96,0.75) !important;}
.bkey.playing{background:linear-gradient(180deg,#27ae60 0%,#1e8449 70%) !important;}

/* Tune selection panel */
.tune-item{
  padding:18px 28px;font-size:44px;font-weight:700;cursor:pointer;color:#333;
  display:flex;align-items:center;gap:16px;border-bottom:1px solid #eee;
}
.tune-item:last-child{border-bottom:none;}
.tune-item::before{content:'\00a0\00a0\00a0';display:inline-block;width:1.2em;flex-shrink:0;}
.tune-item.selected::before{content:'✓';color:#2980b9;}
.tune-item.disabled{color:#bbb;cursor:default;pointer-events:none;}