@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

:root{
  --accent:#ff9900;
  --overlay-gap:22px;

  /* Leaderboard */
  --outline:#2f3d56;
  --slab-top:#ffffff14;
  --slab-bot:#00000055;
  --slab-bg:#0b142a;
  --field-bg:#ffffff;
  --field-fg:#1e2b45;
  --game-w: 700px;
  --game-h: 500px;
  --ui-scale: 1;
}
 
*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0; height:100%;
  font-family:'VT323',monospace; background:#000;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}

body::after{
  content:""; position:fixed; inset:0; z-index:5; pointer-events:none;
  background-image:
    repeating-linear-gradient(to bottom, rgba(0,0,0,.15) 0px, rgba(0,0,0,.15) 2px, transparent 2px, transparent 4px),
    radial-gradient(rgba(0,0,0,.1) 1px, transparent 1px);
  background-size:100% 4px, 4px 4px;
  animation:rasterMove .6s linear infinite; mix-blend-mode:multiply; opacity:.4;
}
@keyframes rasterMove{ 0%{background-position-y:0} 100%{background-position-y:4px} }

.wrapper{
  min-height: 100dvh;
  min-width: 100vw;
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
}

.game{
  width: var(--game-w);
  height: var(--game-h);
  padding:18px;

  display:flex;
  flex-direction:column;
  gap:10px;
  position:relative;
  box-shadow:0 0 30px rgba(0,200,255,.3);
  overflow:hidden;

}


.game::before{ content:""; position:absolute; inset:0; background:#1e2b45; opacity:0; pointer-events:none; transition:opacity .25s; z-index:25; }
.wrapper.cover .game::before{ opacity:1; }


.start-overlay{
  position:absolute; inset:0; background:#1e2b45;
  display:flex; flex-direction:column; justify-content:center; align-items:center; z-index:70;
}
.start-overlay .title{
  color:#fff; font-size:5rem; letter-spacing:3px;
  text-shadow:0 0 6px rgba(255,153,0,.2), 4px 4px #000; text-transform:uppercase; margin-bottom:1.4rem;
}
.start-overlay .subtitle{
  font-family:'VT323',monospace; font-size:26px; letter-spacing:2px; text-transform:uppercase;
  color:var(--accent); text-shadow:0 0 6px rgba(255,153,0,0), 2px 2px #000;
}

.top{
  display:flex; justify-content:space-between; align-items:flex-start;
  margin-bottom:10px; text-align:center; width:100%; opacity:1; transition:opacity .3s;
}
.wrapper.start-active .top{ opacity:0; pointer-events:none; }
.top .label{ font-size:16px; color:var(--accent); text-shadow:2px 2px #000; display:block; }
.top .value{
  font-size:54px; font-weight:bold; margin-top:4px; color:var(--accent);
  text-shadow:0 0 2px rgba(255,153,0,0), 2px 2px #000; display:block;
}

.tray{ display:flex; gap:6px; min-height:90px; align-items:flex-end; justify-content:center; max-width:420px; margin:0 auto; }
.tile{
  width:60px; height:60px; border:1px solid #fff0dc22;
  display:flex; align-items:center; justify-content:center; background:#0f172a55; transition:all .18s;
}
.tile img{ width:100%; height:100%; object-fit:contain; }
.tile.active{
  width:120px; height:120px; border-color:transparent; outline:3px solid var(--accent); outline-offset:-2px;
  background:rgba(255,216,77,.12); margin-bottom:-6px; border-bottom:none; box-shadow:0 0 6px rgba(255,153,0,.4);
}

.namebar{
  width:386px; align-self:center; height:24px; background:var(--accent); color:#1e2b45;
  padding: 2px 12px;
  font-size: 18px; 
  display:flex; align-items:center; justify-content:center; font-weight:bold; letter-spacing:.5px; text-transform:uppercase;
  margin-top:-6px; box-shadow:0 0 6px rgba(255,153,0,.3);
}


.seq{ display:flex; justify-content:center; gap:2px; min-height:54px; align-items:center; }
.arrow{ width:64px; height:64px; display:flex; align-items:center; justify-content:center; }
.arrow img{ width:38px; height:38px; object-fit:contain; filter:grayscale(100%) brightness(180%); transition:filter .18s; }
.arrow.filled img{
  filter:brightness(0) saturate(100%) invert(51%) sepia(100%) saturate(2000%) hue-rotate(-5deg) brightness(130%) contrast(110%);
}
.arrow.error img{
  filter:brightness(0) saturate(100%) invert(15%) sepia(94%) saturate(6145%) hue-rotate(1deg) brightness(93%) contrast(110%);
}
@keyframes shake{ 0%{transform:translateX(0)} 20%{transform:translateX(-4px)} 40%{transform:translateX(4px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} 100%{transform:translateX(0)} }
.arrow.error{ animation:shake .25s; }


.timer-container{ width:388px; height:14px; background:#555; border-radius:3px; margin:0 auto; overflow:hidden; }
.timer-fill{ height:100%; width:100%; background:var(--accent); box-shadow:0 0 4px rgba(255,153,0,.3); transition:width .1s linear; }

.overlay{
  position:absolute; inset:0; background:#1e2b45;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:28px; font-weight:bold; white-space:pre-line; padding:20px 40px; text-align:center;
  color:var(--accent); text-shadow:0 0 4px rgba(255,153,0,0 ), 2px 2px #000; z-index:120; border-radius:10px;
}
.line{ opacity:0; transition:opacity .4s; margin:3px 0; }
.line.visible{ opacity:1; }

.overlay .breakdown{ width:min(92%,560px); display:flex; flex-direction:column; gap:20px; }
.overlay .row{
  display:grid; grid-template-columns:1fr 160px; column-gap:56px; align-items:baseline;
  opacity:0; transform:translateY(6px); transition:opacity .5s, transform .5s;
}
.overlay .row.visible{ opacity:1; transform:translateY(0); }
.overlay .label{ color:#fff; font-size:24px; letter-spacing:1px; text-shadow:0 0 6px rgba(255,153,0,0), 2px 2px #000; text-align:left; }
.overlay .value{ color:var(--accent); font-size:34px; font-weight:bold; text-shadow:0 0 6px rgba(255,153,0,0), 2px 2px #000; text-align:right; }
.overlay .row.total .label, .overlay .row.total .value{ font-size:48px; }

.overlay.hud{ justify-content:flex-start; align-items:center; padding-top:28vh; }
.center-wrap{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.center-col{ display:flex; flex-direction:column; align-items:center; gap:var(--overlay-gap); pointer-events:auto; }

.overlay.hud .hud-title{ color:var(--accent); font-size:28px; text-shadow:0 0 6px rgba(255,153,0,0), 2px 2px #000; margin:0; }
.overlay .hud-round{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.overlay .hud-round .label{
  font-size:28px; color:#fff; text-shadow:0 0 6px rgba(255,153,0,0), 2px 2px #000;
  letter-spacing:1px; text-transform:uppercase;
}
.overlay .hud-round .num{
  margin-left:0; font-size:48px; line-height:1; color:#fff;
  text-shadow:0 0 6px rgba(255,153,0,0), 2px 2px #000;
}

.quote-wrap{ width:min(56%,560px); margin:0 auto; }
.quote-title{
  text-align:center; margin:0 0 var(--overlay-gap) 0;
  font-size:20px; letter-spacing:2px; text-transform:uppercase; color:var(--accent);
  text-shadow:0 0 6px rgba(255,153,0,0), 2px 2px #000;
}
.quote-card{ background:transparent; border:none; border-radius:7px; padding:0 10px; box-shadow:none; }
.overlay .quote{
  color:#fff; font-size:18px; line-height:1.2; margin:0; font-weight:bold;
  text-shadow:0 0 6px rgba(255,153,0,0), 2px 2px #000;
}

.hud-fixed{
  position:absolute; bottom:10px; left:10px; right:10px;
  display:flex; justify-content:space-between; align-items:center;
  z-index:70; pointer-events:auto;
}
.logo-img{ height:58px; opacity:.98; filter:drop-shadow(0 0 1px rgba(0,0,0,.75)) drop-shadow(5px 5px 0 #000); transition:opacity .2s ease; }
.logo-img.is-hidden{ opacity:0; visibility:hidden; }
.sound-toggle{ font-size:18px; color:#888; cursor:pointer; text-shadow:2px 2px #000; user-select:none; transition:color .25s, text-shadow .25s; letter-spacing:1px; }
.sound-toggle.on{ color:var(--accent); text-shadow:0 0 6px rgba(255,153,0,0), 2px 2px #000; }
.sound-toggle:hover{ color:#fff; }
#soundToggle{ transform:translateY(14px); }

.menu-overlay{ position:absolute; inset:0; z-index:120; display:grid; place-items:center; background:#1e2b45; border-radius:10px; }

.menu-panel{
  width:100%; height:100%; background:#1e2b45; border-radius:10px; box-shadow:0 0 30px rgba(0,200,255,.3);
  position:relative; overflow:hidden; padding:16px 16px 56px; display:grid; place-items:center;
}
.menu-inner{ width:100%; display:flex; flex-direction:column; align-items:center; transform-origin:top center; }
.menu-title{
  text-align:center; margin:0 0 10px 0; font-size:22px; letter-spacing:2px; text-transform:uppercase; color:var(--accent);
  text-shadow:0 0 6px rgba(255,153,0,0), 2px 2px #000;
}
.menu-wrap{ width:min(56%,560px); margin:6px auto 0; }
.menu-list{ display:flex; flex-direction:column; gap:12px; }
.menu-item{
  position:relative; background:#0b142a; border:1px solid #2f3d56; border-radius:7px; padding:14px 10px;
  font-size:22px; line-height:.6; letter-spacing:1px; text-align:center; color:#fff; text-shadow:2px 2px #000;
  cursor:pointer; user-select:none; transition:background .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease;
  box-shadow:inset 0 1px 0 #ffffff14, inset 0 -1px 0 #00000055;
}
.menu-item:hover, .menu-item.is-selected{
  color:var(--accent); background:rgba(255,216,77,.12); border-color:var(--accent);
  box-shadow:inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent);
}
.menu-bottom{
  position:absolute; left:0; right:0; bottom:0; height:56px;
  display:flex; align-items:center; justify-content:center; gap:24px;
  background: transparent !important;
  box-shadow: none
}
.arcade-link{ all:unset; color:var(--accent); font-size:18px; cursor:pointer; letter-spacing:1px; text-shadow:2px 2px #000; }
.arcade-link:hover{ filter:brightness(1.1); }
.overlay.hud.gameover{ padding-top:5vh; }
.score-wrap{ width:min(56%,560px); margin:0 auto 10px; }
.menu-inline{ margin-top:16px; }

.overlay.hud.gameover{
  background: url('https://echobasis.de/wp-content/uploads/2025/10/hintergrundend.jpg')
              center / cover no-repeat !important;
}

.overlay.hud.credits{
  background: url('https://echobasis.de/wp-content/uploads/2025/10/hintergrundend.jpg')
              center / cover no-repeat !important;
}

.overlay.hud.hs{
  background: url('https://echobasis.de/wp-content/uploads/2025/10/hintergrundend.jpg')
              center / cover no-repeat !important;
}

.wrapper.showing-overlay .hud-fixed{ display:none; }

.btn-close{
  all:unset; cursor:pointer; font-size:18px; letter-spacing:1px; color:#888; text-shadow:2px 2px #000;
}
.btn-close:hover{ color:#fff; }


.leaderboard{ width:100%; }
.table-wrap{ width:min(94%,700px); margin:0 auto; }
.leaderboard table{ width:100%; border-collapse:separate; border-spacing:0 4px; table-layout:fixed; }
.leaderboard tbody td{
  padding:5px 6px; font-size:18px; line-height:1; color:#fff; text-shadow:2px 2px #000;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:var(--slab-bg);
  border-top:1px solid var(--slab-top);
  border-bottom:1px solid var(--slab-bot);
}
.leaderboard tbody tr td:first-child{
  border-left:1px solid var(--outline);
  border-radius:8px 0 0 8px;
}
.leaderboard tbody tr td:last-child{
  border-right:1px solid var(--outline);
  border-radius:0 8px 8px 0;
}
.leaderboard tbody tr:hover td,
.leaderboard tbody tr.active td{
  color:var(--accent);
  background:rgba(255,216,77,.12);
  border-top-color:var(--accent);
  border-bottom-color:var(--accent);
  box-shadow:inset 0 0 0 1px var(--accent);
}
.lb-spacer td{ height:6px; background:transparent; border:none; }

.credits-card{ background:transparent; border:none; border-radius:8px; padding:0 6px; box-shadow:none; }


.overlay.hud.hs .topbar{
  width:min(94%,700px);
  margin:-26px auto 6px;    
  padding:0 6px;
  display:flex; justify-content:center; align-items:flex-end; gap:8px;
}

.overlay.hud.hs .filter-row{ display:flex; align-items:flex-start; gap:12px; }
.overlay.hud.hs .filter-label{
  color:#fff; font-size:18px; line-height:1; text-shadow:1px 1px #000;
  transform:translateY(-6px);
}
.overlay.hud.hs .box-wrap{ position:relative; width:180px; top:4px; }
.overlay.hud.hs .box{
  width:100%; background:var(--field-bg); color:var(--field-fg);
  border-radius:6px; padding:2px 8px; min-height:18px;
  font-weight:bold; letter-spacing:2px; text-transform:uppercase; font-size:13px;
  display:flex; align-items:center; justify-content:center; text-shadow:none;
}
.overlay.hud.hs .box.placeholder{ opacity:.85; }
.overlay.hud.hs .box.locked{ background:var(--accent); color:#001a33; box-shadow:none; }
.overlay.hud.hs .native-select{ position:absolute; inset:0; width:100%; height:100%; opacity:0; appearance:auto; cursor:pointer; }

.overlay.hud.hs .table-wrap{ margin:-125px auto 0; }

.overlay.hud.hs .leaderboard thead th{
  color:var(--accent) !important;
  text-shadow:none !important;
  font-size:14px;
  text-align:center !important;
  padding:2px 6px;
}

.overlay.hud.hs .leaderboard .th-rank{ width:60px; }
.overlay.hud.hs .leaderboard .th-round{ width:72px; }
.overlay.hud.hs .leaderboard .th-score{ width:96px; }

.overlay.hud.hs .leaderboard tbody td,
.overlay.hud.hs .leaderboard .td-rank,
.overlay.hud.hs .leaderboard .td-round,
.overlay.hud.hs .leaderboard .td-score{
  text-align:center !important;
}

.overlay.hud.credits{
  padding-top:4vh;             
}
.credits-wrap{
  width:min(92%,700px);
  margin:-4px auto 0;           
  display:flex; flex-direction:column; gap:var(--overlay-gap);
}

.credits-title,
.credits-section h3{
  color:var(--accent);
  text-shadow:1px 1px #000 !important;
  margin:0 0 6px 0;
  font-size:16px; letter-spacing:1.2px; text-transform:uppercase;
}

.credits-section p,
.credits-section li{
  color:#fff; font-size:16px; line-height:1.1; margin:0; text-shadow:1px 1px #000 !important;
}
.credits-section ul{ list-style:none; padding:0; margin:0; }
.credits-section li + li{ margin-top:2px; }
.kv{ display:grid; grid-template-columns:1fr 1fr; align-items:center; column-gap:28px; }
.kv .k{ text-align:right; color:var(--accent); font-size:16px; text-shadow:1px 1px #000; }
.kv .v{ text-align:left; color:#fff; font-size:16px; text-shadow:1px 1px #000; }


.credits-scroll{
  max-height:clamp(260px,56vh,420px);
  overflow:auto; padding-right:8px; padding-bottom:84px;
  scrollbar-width:none;          
}
.credits-scroll::-webkit-scrollbar{ width:0; height:0; } 
.start-overlay .hud-link{
  position:absolute; left:16px; bottom:16px;
  font-size:18px;
  color:#888;
  cursor:pointer;
  letter-spacing:1px;
  text-shadow:1px 1px #000;   
  user-select:none;
  transition:color .25s, text-shadow .25s;
}
.start-overlay .hud-link:hover{
  color:#fff;
}

.overlay.hud.credits { 
  padding-top: -100px;   
}


.overlay.hud.credits .center-col{
  margin-top: -100px;      
}

.quote-title,
.overlay.hud .hud-title,
.overlay .hud-round .label,
.overlay .hud-round .num,
.overlay .quote,
.overlay.hud.gameover .breakdown .label,
.overlay.hud.gameover .breakdown .value,
.overlay.hud.hs .leaderboard thead th,
.credits-title,
.credits-section h3,
.credits-section p,
.credits-section li,
.start-overlay .subtitle {
  text-shadow: 2px 2px #000 !important; 
}


.overlay .quote-title,
.overlay .quote,
.overlay.hud .hud-title {
  box-shadow: none !important;
  filter: none !important;
}


.overlay.hud.hs{ 
  padding-top: 6vh !important;   
}


.menu-bottom .arcade-link,
.menu-bottom .btn-close,
.overlay .menu-bottom a,
.menu-overlay .menu-bottom a {
  all: unset;
  display: inline-block;
  font-family: 'VT323', monospace;
  font-size: 18px !important;   
  line-height: 1 !important;
  letter-spacing: 1px !important;
  font-weight: normal !important;
  color: #888 !important;       
  text-shadow: 2px 2px #000 !important; 
  cursor: pointer;
}

.menu-bottom .arcade-link:hover,
.menu-bottom .btn-close:hover,
.overlay .menu-bottom a:hover,
.menu-overlay .menu-bottom a:hover {
  color: #fff !important;
}

.quote-card.bubble{
  position: relative;
background: url('https://echobasis.de/wp-content/uploads/2025/11/backgroundquote.jpg')
              center / cover no-repeat !important;
  
  border: 1px solid var(--outline);
  border-radius: 7px;
  padding: 14px 12px 32px;
  box-shadow: inset 0 1px 0 var(--slab-top), inset 0 -1px 0 var(--slab-bot);
}

.quote-card.bubble::before{
  content:""; position:absolute; bottom:-9px; left:40px;
  border-width:9px 9px 0 9px; border-style:solid;
  border-color:var(--outline) transparent transparent transparent;
}
.quote-card.bubble::after{
  content:""; position:absolute; bottom:-8px; left:40px;
  border-width:8px 8px 0 8px; border-style:solid;
  border-color:#0b142a transparent transparent transparent;
}

.bubble-text{
  color:#fff; font-size:24px; line-height:1.2; font-weight:bold;
  text-shadow:1px 1px #000 !important;
  margin-top:-20px;
}

.bubble-badge{
  position:absolute;
  bottom:-10px; right:10px;
  top:auto; left:auto;       
  padding:2px 8px;
  border-radius:5px;
  font-size:18px; letter-spacing:1px; text-transform:uppercase;
  color:#001a33;            
  background:var(--accent);     
  border:1px solid var(--outline);
  text-shadow:none;
}

.bubble-badge.sys{  background:#19314f; }    
.bubble-badge.char{ background:var(--accent); color:#001a33; } 
.quote-card.bubble::before,
.quote-card.bubble::after{
  content:none !important;
  display:none !important;
}


.arcade-wrap{ position:absolute; inset:0; display:grid; place-items:center; }
.arcade-col{ display:flex; flex-direction:column; align-items:center; gap:22px;
  width:min(680px,96vw); color:var(--accent); }
.arcade-title{ font-size:26px; text-shadow:0 0 6px rgba(255,153,0,.2), 2px 2px #000; }
.arcade-sub, .arcade-trans{
  color:#fff; font-size:20px; opacity:.85; margin-top:-8px; text-align:center;
  text-shadow:1px 1px #000;
}

.arcade-board{ display:flex; flex-direction:column; gap:8px; width:90%; margin:0 auto; }
.board-row{ display:grid; grid-template-columns:repeat(10, 1fr); gap:2px; }
.key{
  display:flex; align-items:center; justify-content:center;
  height:32px; font-size:18px; line-height:1; padding:0 6px;
  color:#fff; border:1px solid #ffffff22; background:#0b142a;
  cursor:pointer; border-radius:6px; transition:all .1s; text-shadow:1px 1px #000;
}
.key.sel, .key:hover{ border-color:var(--accent); color:var(--accent); background:rgba(255,216,77,.12); }
.key.ok{ font-weight:700; letter-spacing:1px; }
.key:active{ transform:translateY(1px); }

.arcade-row{ width:56%; display:flex; justify-content:space-between; gap:16px; align-items:center; }
.arcade-name{
  flex:1; background:var(--field-bg); color:var(--field-fg);
  border-radius:6px; padding:6px 10px; min-height:26px;
  font-weight:bold; letter-spacing:2px; text-transform:uppercase; font-size:18px;
  display:flex; align-items:center; justify-content:center; transition:all .2s;
  text-shadow:none;
}
.arcade-name.placeholder{ opacity:.7; }
.arcade-name.locked{ background:var(--accent); color:#001a33; box-shadow:0 0 14px var(--accent); }

.planet-wrap{ position:relative; width:100%; }
.planet-wrap .native-select{ position:absolute; inset:0; width:100%; height:100%;
  opacity:0; appearance:auto; cursor:pointer; }

.arcade-actions{ display:flex; gap:22px; margin-top:4px; }
.arcade-actions.center{ justify-content:center; width:100%; }

.quote-card.bubble .bubble-text{
  font-size:19px !important;
  line-height:1.15;
}

.start-overlay .hud-link{
  text-shadow: 2px 2px #000 !important;
}

.break-panel{ width:min(560px,92%); margin:0 auto; }
.break-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }

.break-row{
  display:flex; align-items:baseline;
  opacity:0; transform:translateY(4px);
  transition:opacity .45s ease, transform .45s ease;
}
.break-row.show{ opacity:1; transform:translateY(0); }

.break-row .k{
  flex:1; min-width:0;
  color:#fff; font-size:24px; letter-spacing:1px;
  text-shadow:2px 2px #000;
  text-align:left;
}
.break-row .v{
  width:180px; 
  text-align:right;
  color:var(--accent); font-weight:700;
  font-size:34px; text-shadow:2px 2px #000;
  letter-spacing:0;

 
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.break-row.total .k,
.break-row.total .v{ font-size:48px; }

.break-row{ 
  gap: 64px;  
}
.break-row .v{
  width: 220px;           
}

@media (max-width: 520px){
  .break-row{ gap: 32px; }
  .break-row .v{ width: 160px; }
}

:root{
  --starfield: url('https://echobasis.de/wp-content/uploads/2025/10/backgroundcd.png');
}

.game{
  background: var(--starfield) center / cover no-repeat !important;
}


.start-overlay{
  background: url('https://echobasis.de/wp-content/uploads/2025/10/backgroundcd.png')
              center / cover no-repeat !important;
}


.quote-card,
.credits-card,
.menu-item {
  background-color: transparent;
}

.intro-video {
  width: 100%;
  height: 100%;
  object-fit: cover;     
  border-radius: 10px;     
  display: block;
}


.overlay.intro{
  padding: 0 !important;
  background: transparent !important;
  border-radius: inherit;
  overflow: hidden;                   
  z-index: 80;
}

.overlay.intro .intro-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;                   
  transition: opacity .06s linear;
}

.game.intro-lock > *:not(.overlay):not(.hud-fixed):not(.intro-skip-btn){ visibility: hidden !important; }

.overlay.intro{ position:absolute; inset:0; z-index:60; border-radius:10px; }
.intro-veil{
  position:absolute; inset:0; border-radius:10px;
  background:#000 var(--starfield) center/cover no-repeat;  
  opacity:1;                  
}
.intro-video{
  position:absolute; inset:0; border-radius:10px;
  width:100%; height:100%; object-fit:cover;
  opacity:0;              
}

.intro-skip{
  position:absolute; left:16px; bottom:16px;
  font-size:18px; letter-spacing:1px; color:#888;
  text-shadow:2px 2px #000; cursor:pointer; user-select:none;
}
.intro-skip:hover{ color:#fff; }


.intro-sound{
  position:absolute; right:16px; bottom:16px;
  font-size:18px; letter-spacing:1px; color:#888;
  text-shadow:2px 2px #000; cursor:pointer; user-select:none;
}
.intro-sound:hover{ color:#fff; }


.start-overlay .subtitle{
  position: relative;
  display: inline-block;
  animation: pressBreath 2.3s ease-in-out infinite;
  transform-origin: center;
}

.start-overlay .subtitle::after{
  content: attr(data-text);
  position: absolute; inset: 0;
  background:
    linear-gradient(112deg,
      transparent 0%,
      rgba(255,255,255,.00) 46%,
      rgba(255,255,255,.85) 50%,
      rgba(255,255,255,.00) 54%,
      transparent 100%);
  background-size: 220% 100%;
  background-position: -60% 0;

  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
 
  filter: blur(.6px);
  mix-blend-mode: screen;
  animation: textShine 2.0s linear infinite;
}

@keyframes textShine{
  to { background-position: 160% 0; }
}

@keyframes pressBreath{
  0%,100%{ transform: translateY(0) scale(1); }
  50%    { transform: translateY(-1px) scale(1.06); }
}


.start-overlay .title img{
  animation:logoFloat 6s ease-in-out infinite;
  transform-origin:center 60%;
}
@keyframes logoFloat{
  0%,100%{ transform:translateY(0) }
  50%{ transform:translateY(-4px) }
}


.start-overlay.launch .title img{
  animation:logoLaunch .42s cubic-bezier(.2,.7,.1,1) forwards;
  filter:drop-shadow(0 0 12px rgba(255,153,0,.18));
}
@keyframes logoLaunch{
  0%{ transform:translateY(0) scale(1) rotateX(0deg); opacity:1; }
  100%{ transform:translateY(-44px) scale(1.08) rotateX(6deg); opacity:.0; }
}

.start-overlay.launch .subtitle{
  animation:pressOut .42s ease forwards;
}
@keyframes pressOut{
  to{ transform:translateY(12px) scale(.96); opacity:0; }
}

.start-overlay::before,
.start-overlay::after{
  content:""; position:absolute; left:0; right:0; height:0;
  background:#000; z-index:2; pointer-events:none;
}
.start-overlay.launch::before,
.start-overlay.launch::after{ animation:bars .42s ease forwards; }
.start-overlay.launch::before{ top:0; }
.start-overlay.launch::after{ bottom:0; }
@keyframes bars{
  0%{ height:0; opacity:0; }
  100%{ height:48px; opacity:.95; }
}

.intro-skip-btn{
  position:absolute; left:16px; bottom:16px;
  font-size:18px; letter-spacing:1px; color:#888;
  text-shadow:2px 2px #000; cursor:pointer; user-select:none;
  z-index:80;  
}
.intro-skip-btn:hover{ color:#fff; }

.overlay.hud.timeup{
  padding: 0 !important;
}


.overlay.hud.timeup .quote-title{

  letter-spacing: 2px;
}


.overlay.video-bg{
  background: transparent !important; 
  overflow: hidden;                   
  border-radius: 10px;
}
.overlay.video-bg .bg-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  pointer-events:none;
  z-index:0;
  border-radius:inherit;
  opacity:0;                 
  transition:opacity .12s linear;
}

.overlay.hud.hs,           
.overlay.hud.credits,       
.overlay.hud.gameover,      
.arcade-overlay,            
.menu-overlay,              
.menu-panel {               
  background: url('https://echobasis.de/wp-content/uploads/2025/10/hintergrundend.jpg')
              center / cover no-repeat !important;
}

.overlay.video-bg{
  padding: 0 !important;    
}

.game.ui-sleep > *:not(.overlay):not(.start-overlay):not(.hud-fixed) {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.game.ui-sleep::before {
  opacity: 0 !important;
  pointer-events: none !important;
}



.overlay.intro .intro-video{
  -webkit-filter: brightness(.50) contrast(1.00) !important;
  filter: brightness(.80) contrast(1.00) !important;
}

.overlay.video-bg .bg-video{
  -webkit-filter: brightness(.50) contrast(1.00) !important;
  filter: brightness(.80) contrast(1.00) !important;
}


.start-overlay{
  background-color: rgba(0,0,0,0.20) !important;
  background-blend-mode: multiply !important;
}

.menu-overlay,
.menu-panel{
  background-color: rgba(0,0,0,0.20) !important;
  background-blend-mode: multiply !important;
}


.overlay.hud.timeup .quote-title{
  display: none !important;
}

.overlay.video-bg .caption{
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 22px;
  letter-spacing: 2px;
  color: #fff;
  text-shadow: 2px 2px #000;
  pointer-events: none;
}

.overlay.video-bg .headline{
  font-size: 28px; letter-spacing: 2px;
  color:#fff; text-shadow: 2px 2px #000;
}

.overlay.video-bg .stats{
  display:grid; grid-template-columns: repeat(4, minmax(120px,1fr));
  gap: 26px; width:min(92%, 720px);
}

.overlay.video-bg .hud-round,
.overlay.video-bg .quote-card { display:none !important; }

.overlay.video-bg .stats-col{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  transform:none;
}

.overlay.video-bg .headline{
  font-size: clamp(32px, 4.5vw, 56px);
  letter-spacing: 2px;
  color:#fff; text-shadow: 2px 2px #000;
}

.overlay.video-bg .stats{
  margin-top: clamp(30px, 8vh, 100px);
  display:grid; grid-template-columns: repeat(4, minmax(120px,1fr));
  gap: clamp(16px, 3vw, 28px);
  width:min(92%, 720px);
}

.overlay.video-bg .stats .k{
  text-align:center; text-transform:uppercase; letter-spacing:1px;
  font-size: clamp(20px, 2.4vw, 26px);
  color: var(--accent); text-shadow: 2px 2px #000;
}


.overlay.video-bg .stats .v{
  text-align:center;
  line-height:1;
  font-size: clamp(28px, 4.2vw, 46px);  
  color:#fff;
  text-shadow: 2px 2px #000;
}


.overlay.video-bg .center-wrap{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column;
  align-items:center; justify-content:flex-start;
  padding-top: var(--end-offset, 240px); 
}

.freeze-frame{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; pointer-events:none;
  z-index:129; opacity:1;
  transition:opacity 180ms linear;
}
.freeze-frame.is-hidden{ opacity:0; }

.overlay.video-bg .bg-video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}

.overlay.video-bg.hold{ pointer-events:none; opacity:1; transition:opacity 180ms linear; }
.overlay.video-bg.hold.is-hidden{ opacity:0; }

.arcade-overlay {
  --overlay-gap: 10px;
}

.arcade-overlay .entry-bar,
.arcade-overlay .display-bar,
.arcade-overlay .input-display {
  margin: 0 !important;
}

.arcade-overlay :is(.entry-bar, .display-bar, .input-display)
  + :is(.entry-bar, .display-bar, .input-display) {
  margin-top: 8px !important;
}

.arcade-overlay .arcade-col .arcade-row + .arcade-row {
  margin-top: -14px;
}

.overlay.hud.hs .leaderboard tbody tr.active {
  background: var(--accent) !important;  
  color: var(--field-fg) !important;  
}

.overlay.hud.hs .leaderboard tbody tr.active td {
  color: var(--field-fg) !important;
  border-color: transparent;             
}

.overlay.hud.hs .leaderboard tbody tr.lb-spacer td {
  background: transparent !important;
  border: 0 !important;
}

.overlay.hud.hs .leaderboard tbody tr.active,
.overlay.hud.hs .leaderboard tbody tr.active td {
  color: var(--field-fg) !important;  
  text-shadow: none !important;
}

.overlay.hud.hs .leaderboard tbody tr:hover td{
  color:#fff !important;
  background:var(--slab-bg) !important;
  border-top-color:var(--slab-top) !important;
  border-bottom-color:var(--slab-bot) !important;
  box-shadow:none !important;
  transform:none !important;
  cursor:default !important;
}

.overlay.hud.hs .leaderboard tbody tr.active td{
  color:var(--field-fg) !important;
  background:var(--accent) !important;
  border-color:transparent !important;
  box-shadow:none !important;
}

.overlay.hud.hs .leaderboard tbody tr.lb-spacer:hover td{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.quote-card.bubble .bubble-text{ position:relative; top:-12px; }         
.overlay.hud.gameover{
  background-color: rgba(0,0,0,0.20) !important;
  background-blend-mode: multiply !important;
}

.overlay.hud.hs{
  background-color: rgba(0,0,0,0.20) !important;
  background-blend-mode: multiply !important;
}

.overlay.hud.credits{
  background-color: rgba(0,0,0,0.20) !important;
  background-blend-mode: multiply !important;
}

.overlay.hud.gameover,
.overlay.hud.hs,
.overlay.hud.credits,
.arcade-overlay{
  background-color: rgba(0,0,0,0.20) !important;
  background-blend-mode: multiply !important;
}

:root{
  --meta-bg: url('https://echobasis.de/wp-content/uploads/2025/10/hintergrundend.jpg');
  --meta-dim: rgba(0,0,0,.22);
}

.overlay.hud.timeup.video-bg .center-wrap{
  transition: opacity .18s ease;
}
.overlay.hud.timeup.video-bg.is-fading .center-wrap{
  opacity: 0;
}

.overlay.video-bg .bg-video{
  will-change: opacity;
}


:root{
  --meta-bg: url('https://echobasis.de/wp-content/uploads/2025/10/hintergrundend.jpg');
  --meta-dim: rgba(0,0,0,0.20);
}

.overlay.hud.hs,           
.overlay.hud.credits,       
.overlay.hud.gameover,      
.arcade-overlay,            
.menu-overlay,              
.menu-panel {               
  background-image: var(--meta-bg) !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;

  
  background-color: var(--meta-dim) !important;
  background-blend-mode: multiply !important;
}
.arcade-overlay{
  position:absolute;
  inset:0;
  z-index:200;           
  border-radius:10px;
  display:grid;
  place-items:center;
  --overlay-gap: 10px;
}

.arcade-wrap{ position:absolute; inset:0; display:grid; place-items:center; }
.arcade-col{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
  width:min(680px,96vw);
  color:var(--accent);
}

:root{
  --final-bg: url('https://echobasis.de/wp-content/uploads/2025/10/backgroundfinal.jpg');
}

.overlay.hud:not(.video-bg):not(.hs):not(.credits):not(.gameover){
  background-image: var(--final-bg) !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-color: var(--meta-dim) !important;
  background-blend-mode: multiply !important;
}

.overlay:not(.hud):not(.video-bg):not(.intro):not(.arcade-overlay){
  background-image: var(--final-bg) !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-color: var(--meta-dim) !important;
  background-blend-mode: multiply !important;
}

.start-active .top {
  display: none !important;
}

.hud-fixed{
  pointer-events: none;
}

.hud-fixed .sound-toggle,
.hud-fixed .logo-img{
  pointer-events: auto;
}

.logo-img.is-hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden; 
}

.wrapper{
  width: 100vw;
  height: 100dvh;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;         
  margin: 0 !important;
  position: relative;
  display: block !important;      
}

.game{
  width: var(--game-w) !important;   
  height: var(--game-h) !important;  

  position: absolute !important;
  left: 50% !important;
  top: 50% !important;

  transform: translate(-50%, -50%) scale(var(--ui-scale, 1)) !important;
  transform-origin: center center !important;
}



:root{
  --pad-size: 130px;                 
  --pad-alpha: 0.03;                 
  --pad-alpha-press: 0.48;        
  --pad-outline: 0.3;               
  --pad-arrow: 0.85;                
  --pad-nudge-up: -10px;             
  --pad-orange: 255 153 0;           
}


#mobilePad{
  position: fixed;
  left: 50%;
  top: var(--pad-top, 80vh);
  transform: translate(-50%, var(--pad-nudge-up));
  z-index: 5000;

  display: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}


@media (hover: none) and (pointer: coarse) and (max-width: 1024px){
  #mobilePad{ display:block; }
}


body.pad-preview #mobilePad{ display:block !important; }


#mobilePad .d-pad{
  width: var(--pad-size);
  height: var(--pad-size);
  position: relative;

  border-radius: 100%;              
  background: transparent;          
  overflow: visible;                
}

#mobilePad .d-pad button{
  all: unset;
  position:absolute;
  display:block;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(255,255,255,0);

  background: rgba(var(--pad-orange) / var(--pad-alpha));
  outline: 1px solid rgba(var(--pad-orange) / var(--pad-outline));
  box-shadow:
    0 0 0 1px rgba(0 0 0 / 0.28) inset,
    0 8px 18px rgba(0 0 0 / 0.35);
  border-radius: 14px;            
}

#mobilePad .d-pad button::before{
  content:"";
  position:absolute;
  width:0; height:0;
  border-style: solid;
  opacity: var(--pad-arrow);
}

#mobilePad .d-pad button::after{
  content: none !important;
}

:root{

  --pad-gap: 14px;
}

#mobilePad .d-pad .up,
#mobilePad .d-pad .down{
  width: calc(36% - (var(--pad-gap) * 0.6));
  height: calc(50% - var(--pad-gap));
  left: 50%;
  transform: translateX(-50%);
}

#mobilePad .d-pad .left,
#mobilePad .d-pad .right{
  width: calc(50% - var(--pad-gap));
  height: calc(36% - (var(--pad-gap) * 0.6));
  top: 50%;
  transform: translateY(-50%);
}

#mobilePad .d-pad .up{ top: 0; border-bottom-left-radius: 22px; border-bottom-right-radius: 22px; }
#mobilePad .d-pad .down{ bottom: 0; border-top-left-radius: 22px; border-top-right-radius: 22px; }
#mobilePad .d-pad .left{ left: 0; border-top-right-radius: 22px; border-bottom-right-radius: 22px; }
#mobilePad .d-pad .right{ right: 0; border-top-left-radius: 22px; border-bottom-left-radius: 22px; }


#mobilePad .d-pad .up::before{
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-width: 0 9px 14px 9px;
  border-color: transparent transparent rgba(var(--pad-orange) / 1) transparent;
}
#mobilePad .d-pad .down::before{
  bottom: 44%;
  left: 50%;
  transform: translate(-50%, 50%);
  border-width: 14px 9px 0 9px;
  border-color: rgba(var(--pad-orange) / 1) transparent transparent transparent;
}
#mobilePad .d-pad .left::before{
  left: 44%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-width: 9px 14px 9px 0;
  border-color: transparent rgba(var(--pad-orange) / 1) transparent transparent;
}
#mobilePad .d-pad .right::before{
  right: 44%;
  top: 50%;
  transform: translate(50%, -50%);
  border-width: 9px 0 9px 14px;
  border-color: transparent transparent transparent rgba(var(--pad-orange) / 1);
}

/* Pressed */
#mobilePad .d-pad button:active,
#mobilePad .d-pad button.is-active{
  background: rgba(var(--pad-orange) / var(--pad-alpha-press));
  outline-color: rgba(var(--pad-orange) / 0.42);
}

body.pad-preview #mobilePad{
  display: block !important;
}


.start-overlay .title{
  transform: scale(var(--logo-scale, 1));
  transform-origin: center;
}