*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{
  width:100%;height:100%;height:100dvh;
  background:#0a0a0a;color:#e9d9b8;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  overflow:hidden;overscroll-behavior:none;
}
body{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1rem;padding:1rem;padding-top:60px;}

/* === Topbar === */
.topbar{
  position:fixed;top:0;left:0;right:0;height:54px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 14px;z-index:30;gap:10px;
  background:rgba(10,10,10,.97);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:opacity .2s;
}
/* Verstecke DELTA-Brand, Score, Pause-Button auf Overlay-Screens */
body:not([data-mode="playing"]):not([data-mode="countdown"]) .brand-title,
body:not([data-mode="playing"]):not([data-mode="countdown"]) .brand-divider,
body:not([data-mode="playing"]):not([data-mode="countdown"]) .brand-score,
body:not([data-mode="playing"]):not([data-mode="countdown"]) #pause-btn{display:none;}
.back-btn{
  background:rgba(184,138,92,.15);border:1px solid rgba(184,138,92,.4);
  color:#e9d9b8;padding:8px 14px;border-radius:8px;
  font-size:.85rem;font-weight:600;text-decoration:none;
  display:flex;align-items:center;gap:6px;transition:all .15s;white-space:nowrap;
}
.back-btn:hover,.back-btn:active{background:rgba(184,138,92,.3);transform:translateY(-1px);}
.back-btn svg{display:block;}

.brand{display:flex;align-items:center;gap:12px;height:38px;}
.brand-title{
  font-weight:800;letter-spacing:.25em;font-size:1.2rem;
  color:#B88A5C;font-family:ui-monospace,"SF Mono","JetBrains Mono",monospace;
  line-height:1;
}
.brand-divider{width:1px;height:24px;background:rgba(184,138,92,.3);}
.brand-score{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;line-height:1;}
.brand-score-label{font-size:.6rem;opacity:.55;letter-spacing:.18em;text-transform:uppercase;font-weight:500;margin-bottom:3px;}
.brand-score #score{font-size:1.1rem;font-weight:700;color:#e9d9b8;}

.buttons{display:flex;gap:6px;}
.icon-btn{
  width:38px;height:38px;border-radius:8px;
  background:rgba(184,138,92,.15);border:1px solid rgba(184,138,92,.4);
  color:#e9d9b8;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-family:inherit;
}
.icon-btn:hover,.icon-btn:active{background:rgba(184,138,92,.3);}

/* === Canvas === */
#game{
  display:block;background:#141414;
  border:1px solid rgba(184,138,92,.25);border-radius:10px;
  box-shadow:0 8px 32px rgba(0,0,0,.5),0 0 0 1px rgba(184,138,92,.05);
  touch-action:none;
  max-width:calc(100vw - 32px);max-height:calc(100dvh - 240px);
}

/* === Steuerkreuz === */
.dpad{display:none;position:fixed;bottom:18px;z-index:15;}
.dpad.dpos-right{right:18px;left:auto;transform:none;}
.dpad.dpos-left{left:18px;right:auto;transform:none;}
.dpad.dpos-center{left:50%;right:auto;transform:translateX(-50%);}
/* Setting nur sichtbar wenn Steuerkreuz auf dem Gerät erscheint (Touch / kleine Screens) */
.dpad-setting{display:none;}
@media (pointer:coarse), (max-width:768px){
  .dpad-setting{display:block;}
}
.dpad-grid{display:grid;grid-template-columns:46px 46px 46px;grid-template-rows:46px 46px 46px;gap:4px;}
.dpad button{
  background:rgba(184,138,92,.18);border:1px solid rgba(184,138,92,.42);
  color:#e9d9b8;border-radius:11px;font-size:1.05rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-family:inherit;font-weight:700;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}
.dpad button:active{background:rgba(184,138,92,.5);transform:scale(.92);}
.dpad button.empty{background:transparent;border:none;cursor:default;pointer-events:none;box-shadow:none;backdrop-filter:none;}
.dpad .up{grid-column:2;grid-row:1;} .dpad .left{grid-column:1;grid-row:2;}
.dpad .right{grid-column:3;grid-row:2;} .dpad .down{grid-column:2;grid-row:3;}

@media (pointer:coarse), (max-width:768px){
  .dpad{display:block;}
  #game{max-height:calc(100dvh - 110px);}
  .brand-title{font-size:1rem;letter-spacing:.2em;}
  .brand-divider{display:none;}
  .brand-score-label{display:none;}
  .brand{gap:8px;}
  .back-btn{padding:8px 10px;font-size:.78rem;}
}

/* Sehr schmale Phones: Steuerkreuz noch kleiner */
@media (pointer:coarse) and (max-width:380px){
  .dpad-grid{grid-template-columns:42px 42px 42px;grid-template-rows:42px 42px 42px;gap:3px;}
  .dpad{bottom:14px;right:14px;}
}

/* === Rotate-Hinweis (Touch-Geräte im Querformat) === */
.rotate-prompt{
  display:none;
  position:fixed;inset:0;z-index:100;
  background:#0a0a0a;
  align-items:center;justify-content:center;
  text-align:center;padding:32px;
  color:#e9d9b8;
}
.rotate-content{max-width:360px;}
.rotate-content svg{color:#B88A5C;margin-bottom:24px;}
.rotate-content svg .rot-phone{
  transform-origin:40px 40px;
  transform-box:view-box;
  animation:rp-rotate 3.4s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes rp-rotate{
  0%,8%{transform:rotate(-90deg);}
  50%,58%{transform:rotate(0deg);}
  100%{transform:rotate(-90deg);}
}
.rotate-content h2{
  font-size:1.4rem;color:#B88A5C;letter-spacing:.1em;
  margin-bottom:14px;font-weight:700;
}
.rotate-content p{
  color:#a89878;font-size:.95rem;line-height:1.6;
}
@keyframes rotate-pulse{
  0%,100%{transform:rotate(-12deg);opacity:.85;}
  50%{transform:rotate(0deg);opacity:1;}
}
/* Phone-Querformat (kleine Höhe): Rotate-Hinweis */
@media (orientation:landscape) and (pointer:coarse) and (max-height:599px){
  .rotate-prompt{display:flex;}
}

/* Tablet/iPad-Querformat (genug Höhe): Steuerkreuz an die Seite */
@media (orientation:landscape) and (pointer:coarse) and (min-height:600px){
  body{
    flex-direction:row;
    align-items:center;justify-content:center;
    padding:70px 20px 20px;gap:28px;
  }
  .dpad{
    position:relative;bottom:auto;left:auto;transform:none;
    flex-shrink:0;
  }
  #game{
    max-width:calc(100vw - 250px);
    max-height:calc(100dvh - 90px);
  }
}

/* === Fake Fullscreen Mode === */
body.fs{padding:0 !important;}
body.fs .topbar{
  background:rgba(10,10,10,.45);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
body.fs #game{
  max-width:100vw !important;
  max-height:100dvh !important;
  border-radius:0;border:none;
}
body.fs .dpad{bottom:24px;}
body.fs .dpad.dpos-right{right:24px;}
body.fs .dpad.dpos-left{left:24px;}

/* === Countdown === */
.countdown-overlay{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;z-index:25;opacity:0;transition:opacity .12s;
}
.countdown-overlay.show{opacity:1;}
.countdown-num{
  font-size:clamp(5rem, 22vw, 12rem);font-weight:800;
  color:#B88A5C;font-family:ui-monospace,"SF Mono",monospace;
  text-shadow:0 0 50px rgba(0,0,0,.95),0 0 25px rgba(0,0,0,.95),0 4px 12px rgba(0,0,0,.6);
  animation:countdown-pop .7s ease-out;
}
@keyframes countdown-pop{
  0%{transform:scale(1.4);opacity:0;}
  30%{transform:scale(1);opacity:1;}
  100%{transform:scale(.9);opacity:.5;}
}

/* === Overlay === */
.overlay{
  position:fixed;inset:0;display:flex;align-items:flex-start;justify-content:center;
  background:rgba(10,10,10,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  z-index:20;opacity:0;pointer-events:none;transition:opacity .2s;
  padding:68px 18px 24px;  /* top padding > topbar height (54px) → keine Überlappung mit Portfolio/Vollbild-Buttons */
  overflow-y:auto;
}
.overlay.show{opacity:1;pointer-events:auto;}
.overlay-card{
  background:#141414;border:1px solid rgba(184,138,92,.22);
  border-radius:18px;padding:40px 36px;text-align:center;
  max-width:460px;width:100%;margin:auto;
}

.screen{display:none;}
.screen.show{display:block;}

/* === Headers / Text === */
.overlay-card h1{
  font-size:2.4rem;color:#B88A5C;margin-bottom:6px;
  letter-spacing:.1em;font-weight:800;
}
.title-block{margin-bottom:48px;}
.title-block h1{
  font-size:3rem;color:#B88A5C;letter-spacing:.22em;font-weight:800;
  font-family:ui-monospace,"SF Mono",monospace;margin-bottom:12px;
}
.title-block .subtitle{
  color:#888;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;
}

.overlay-card p.lead{color:#a89878;font-size:.92rem;line-height:1.7;margin:14px 0 24px;}
.overlay-card .big-score{
  font-size:3.6rem;font-weight:800;color:#e9d9b8;
  margin:14px 0 28px;line-height:1;letter-spacing:-.02em;
}

/* === Player block === */
.player-info-block{margin:32px 0;}
.player-info-block.compact{margin:18px 0 28px;}
.player-label{
  font-size:.7rem;color:#888;letter-spacing:.22em;
  text-transform:uppercase;font-weight:600;margin-bottom:10px;
}
.player-name{
  font-size:1.5rem;color:#e9d9b8;font-weight:600;
  margin-bottom:8px;letter-spacing:.01em;
}

/* === Kbd === */
.kbd{
  display:inline-block;background:rgba(255,255,255,.08);padding:2px 8px;
  border-radius:4px;font-family:ui-monospace,monospace;font-size:.78rem;
  margin:1px 1px;border:1px solid rgba(255,255,255,.1);color:#e9d9b8;
}

/* === Buttons === */
button.primary{
  background:#B88A5C;color:#0a0a0a;border:none;padding:13px 36px;
  border-radius:9px;font-family:inherit;font-size:1rem;font-weight:700;
  cursor:pointer;letter-spacing:.04em;transition:all .15s;min-width:180px;
  margin:6px 0;
}
button.primary:hover{background:#d4a373;transform:translateY(-1px);}
button.primary.big{
  padding:16px 52px;font-size:1.05rem;min-width:240px;
  box-shadow:0 4px 16px rgba(184,138,92,.25);
}
button.link{
  background:none;border:none;color:#B88A5C;cursor:pointer;
  font-family:inherit;font-size:.82rem;padding:6px 10px;
  text-decoration:underline;text-underline-offset:3px;
}
button.link:hover{color:#d4a373;}

/* === Bottom action row (settings / manual / ranking) === */
.screen-actions{
  display:flex;justify-content:center;gap:16px;
  margin-top:48px;padding-top:32px;
  border-top:1px solid rgba(184,138,92,.12);
}
.action-btn{
  width:56px;height:56px;border-radius:14px;
  background:rgba(184,138,92,.06);
  border:1px solid rgba(184,138,92,.22);
  color:#B88A5C;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.action-btn:hover{
  background:rgba(184,138,92,.18);color:#e9d9b8;
  transform:translateY(-2px);
}
.action-btn svg{width:24px;height:24px;display:block;}

/* === Sub-screens === */
.sub-header{
  display:flex;align-items:center;gap:14px;
  margin-bottom:28px;padding-bottom:18px;
  border-bottom:1px solid rgba(184,138,92,.15);
  text-align:left;
}
.sub-header h2{
  font-size:1.25rem;color:#B88A5C;
  letter-spacing:.12em;font-weight:700;margin:0;
}
.back-icon{
  width:38px;height:38px;border-radius:9px;
  background:rgba(184,138,92,.08);
  border:1px solid rgba(184,138,92,.25);
  color:#B88A5C;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.back-icon:hover{background:rgba(184,138,92,.18);color:#e9d9b8;}
.sub-content{text-align:left;}

/* Manual content */
.sub-content.manual h3{
  color:#B88A5C;font-size:.78rem;letter-spacing:.18em;
  text-transform:uppercase;margin:22px 0 10px;font-weight:700;
}
.sub-content.manual h3:first-child{margin-top:0;}
.sub-content.manual p{
  color:#a89878;font-size:.9rem;line-height:1.75;margin-bottom:0;
}

/* === Username input (floating label) === */
.float-input{
  position:relative;
  margin:22px 0 10px;
}
.float-input input{
  width:100%;background:#0a0a0a;border:1px solid rgba(184,138,92,.4);
  color:#e9d9b8;font-family:inherit;font-size:1.05rem;
  padding:22px 16px 10px;
  border-radius:10px;outline:none;transition:all .15s;text-align:center;
}
.float-input input:focus{border-color:#B88A5C;box-shadow:0 0 0 3px rgba(184,138,92,.15);}
.float-input label{
  position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);
  color:#888;font-size:.95rem;text-align:center;
  text-transform:uppercase;letter-spacing:.18em;font-weight:600;
  pointer-events:none;
  transition:top .22s ease, color .22s ease, font-size .22s ease, letter-spacing .22s ease, font-weight .22s ease;
}
.float-input input:focus + label,
.float-input input:not(:placeholder-shown) + label{
  top:12px;
  font-size:.7rem;
  letter-spacing:.22em;
  color:#B88A5C;
  font-weight:700;
}
.error{color:#ff9b7a;font-size:.78rem;margin-bottom:14px;min-height:1.2em;}

/* === Settings === */
.settings-host{text-align:left;}
.setting-group{margin-bottom:22px;}
.setting-group:last-child{margin-bottom:0;}
.setting-group .setting-label{
  font-size:.68rem;color:#888;letter-spacing:.18em;text-transform:uppercase;
  margin-bottom:10px;font-weight:600;
}
.setting-row{display:flex;flex-wrap:wrap;gap:6px;}
.chip{
  background:rgba(184,138,92,.06);border:1px solid rgba(184,138,92,.22);
  color:#a89878;padding:8px 14px;border-radius:8px;cursor:pointer;
  font-family:inherit;font-size:.85rem;font-weight:600;transition:all .12s;
}
.chip:hover{background:rgba(184,138,92,.18);color:#e9d9b8;}
.chip.active{background:#B88A5C;border-color:#B88A5C;color:#0a0a0a;}
.chip.theme-green.active{background:#5b9b3c;border-color:#5b9b3c;color:#fff;}
.chip.theme-ocean.active{background:#3b82f6;border-color:#3b82f6;color:#fff;}
.chip.theme-grape.active{background:#9333ea;border-color:#9333ea;color:#fff;}
.chip.locked{
  opacity:.32;cursor:not-allowed;pointer-events:none;
  background:rgba(184,138,92,.03);color:#666;border-color:rgba(184,138,92,.12);
}
.chip.locked.active{
  background:rgba(184,138,92,.35);color:rgba(10,10,10,.6);border-color:rgba(184,138,92,.4);
  opacity:.5;
}
.lock-note{
  background:rgba(184,138,92,.06);border:1px solid rgba(184,138,92,.18);
  color:#a89878;padding:10px 14px;border-radius:8px;
  font-size:.78rem;line-height:1.5;margin-bottom:18px;
}

/* === Rank Badge (Game Over) === */
.rank-badge{
  display:none;
  background:linear-gradient(135deg,rgba(212,175,55,.2),rgba(184,138,92,.06));
  border:1px solid rgba(212,175,55,.42);
  border-radius:14px;
  padding:16px 20px;
  margin:18px 0 22px;
  text-align:center;
  box-shadow:0 0 0 1px rgba(212,175,55,.08), 0 4px 16px rgba(0,0,0,.3);
}
.rank-badge.show{display:block;animation:rank-pop .45s ease-out;}
.rank-badge-label{
  font-size:.68rem;color:#e6c14a;letter-spacing:.24em;
  text-transform:uppercase;font-weight:700;margin-bottom:8px;
}
.rank-badge-text{font-size:1.05rem;color:#e9d9b8;font-weight:500;margin-bottom:4px;line-height:1.3;}
.rank-badge-text strong{color:#e6c14a;font-size:1.5rem;font-weight:800;margin:0 4px;}
.rank-badge-cat{font-size:.82rem;color:#a89878;letter-spacing:.02em;}
@keyframes rank-pop{
  0%{opacity:0;transform:scale(.88) translateY(8px);}
  60%{opacity:1;transform:scale(1.03) translateY(0);}
  100%{opacity:1;transform:scale(1) translateY(0);}
}

/* === Leaderboard === */
.leaderboard-host{text-align:left;}
.lb-category{font-size:.75rem;color:#888;margin-bottom:14px;letter-spacing:.04em;}
.lb-category strong{color:#B88A5C;font-weight:600;}
.lb-status{font-size:.75rem;color:#ff9b7a;margin-bottom:12px;font-style:italic;}
.lb-list{display:flex;flex-direction:column;gap:4px;}
.lb-row{
  display:grid;grid-template-columns:32px 1fr auto;gap:12px;align-items:center;
  padding:7px 13px;border-radius:8px;font-size:.9rem;
}
.lb-row.gold{background:linear-gradient(90deg,rgba(212,175,55,.2),rgba(184,138,92,.06));border:1px solid rgba(212,175,55,.35);}
.lb-row.silver{background:linear-gradient(90deg,rgba(192,192,192,.13),rgba(150,150,150,.04));border:1px solid rgba(192,192,192,.25);}
.lb-row.bronze{background:linear-gradient(90deg,rgba(184,115,51,.15),rgba(140,80,40,.05));border:1px solid rgba(184,115,51,.3);}
/* "me" Markierung ohne Rahmen: nur Name + Score golden hervorgehoben */
.lb-row.me .lb-name,.lb-row.me .lb-score{color:#B88A5C;font-weight:700;}
.lb-rank{
  font-weight:700;color:#B88A5C;font-family:ui-monospace,monospace;
  text-align:center;font-size:.88rem;
}
.lb-row.gold .lb-rank{color:#e6c14a;}
.lb-row.silver .lb-rank{color:#c8c8c8;}
.lb-row.bronze .lb-rank{color:#c8884a;}
.lb-name{color:#e9d9b8;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lb-score{font-weight:700;color:#e9d9b8;font-variant-numeric:tabular-nums;}
.lb-empty{color:#666;font-size:.85rem;padding:16px 0;text-align:center;font-style:italic;}

@media (max-width:480px){
  .overlay{padding:64px 14px 18px;}
  .overlay-card{padding:30px 22px;}
  .title-block h1{font-size:2.4rem;}
  .overlay-card h1{font-size:2rem;}
  .overlay-card .big-score{font-size:3rem;}
  .chip{padding:7px 12px;font-size:.82rem;}
  button.primary.big{padding:14px 40px;min-width:200px;}
  .action-btn{width:52px;height:52px;}
  .screen-actions{gap:12px;margin-top:36px;padding-top:24px;}
}