/* =========================================================================
   Robtopus — interface
   Palette taken from the game art: dusk blue + octopus purple.
   ========================================================================= */

:root{
  --ink:#1a1526;
  --ink-2:#241d38;
  --paper:#f4efe6;
  --muted:#a99fc4;
  --purple:#6b6394;
  --purple-hi:#8b82bb;
  --orange:#f2913d;
  --orange-hi:#ffab5c;
  --gold:#ffd166;
  --danger:#e0574f;
  --radius:18px;
  --shadow:0 18px 50px rgba(10,7,20,.55);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:#15111f;
  color:var(--paper);
  font-family:'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;user-select:none;
  overscroll-behavior:none;
}

#stage{position:fixed;inset:0;overflow:hidden}
#canvas-host{position:absolute;inset:0}
#canvas-host canvas{display:block;width:100%;height:100%;
  transition:filter .45s ease, transform .45s ease}
/* Blur the game behind any open panel */
body.blurred #canvas-host canvas{filter:blur(8px) saturate(.95) brightness(.86);transform:scale(1.04)}

.layer{position:absolute;inset:0}
.hidden{display:none !important}

/* ---------- Screens ---------- */
.screen{
  display:flex;align-items:center;justify-content:center;
  padding:24px;z-index:20;
  background:radial-gradient(120% 90% at 50% 40%, rgba(26,21,38,.14), rgba(15,12,24,.66));
  animation:fade .28s ease both;
}
@keyframes fade{from{opacity:0}to{opacity:1}}

.panel{
  width:min(460px,100%);
  background:linear-gradient(180deg, rgba(46,38,71,.97), rgba(30,24,48,.97));
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:28px 26px 24px;
  text-align:center;
  animation:pop .3s cubic-bezier(.2,1.2,.4,1) both;
}
.panel-wide{width:min(540px,100%)}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}

h2{margin:0 0 8px;font-size:26px;font-weight:900;letter-spacing:.5px}
p{margin:0 0 14px;line-height:1.5}
.muted{color:var(--muted);font-size:14.5px}
.tiny{font-size:12.5px;margin-top:10px}
b{color:var(--paper)}

/* ---------- Buttons ---------- */
.btn{
  appearance:none;border:0;cursor:pointer;
  font-family:inherit;font-weight:800;letter-spacing:.6px;
  border-radius:14px;padding:14px 26px;font-size:16px;
  transition:transform .12s ease, filter .12s ease, box-shadow .12s ease;
  color:var(--ink);
}
.btn:active{transform:translateY(2px) scale(.985)}
.btn:disabled{opacity:.55;cursor:default}
.btn:disabled:active{transform:none}

.btn-primary{
  background:linear-gradient(180deg,var(--orange-hi),var(--orange));
  box-shadow:0 6px 0 #b8652a, 0 14px 26px rgba(242,145,61,.28);
  color:#2a1a0c;
}
.btn-primary:not(:disabled):hover{filter:brightness(1.06)}
.btn-primary:not(:disabled):active{box-shadow:0 3px 0 #b8652a}

.btn-big{width:100%;padding:19px;font-size:22px;margin:4px 0 14px}

.btn-ghost{
  background:rgba(255,255,255,.07);color:var(--paper);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:none;padding:12px 20px;font-size:14px;
}
.btn-ghost:hover{background:rgba(255,255,255,.13)}

.btn-revive{
  width:100%;display:flex;flex-direction:column;gap:3px;align-items:center;
  background:linear-gradient(180deg,#4a90d9,#2f6db5);
  box-shadow:0 6px 0 #23548c, 0 14px 26px rgba(47,109,181,.3);
  color:#fff;padding:15px;
}
.btn-revive b{font-size:18px;letter-spacing:1px;color:#fff}
.btn-revive small{font-weight:500;font-size:12.5px;opacity:.85}

.icon-btn{
  width:42px;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.14);
  background:rgba(20,16,32,.55);color:var(--paper);cursor:pointer;
  font-size:19px;line-height:1;backdrop-filter:blur(6px);
}
.icon-btn .ico-off{display:none}
body.muted .icon-btn .ico-on{opacity:.35}
body.muted .icon-btn .ico-off{display:inline;color:var(--danger);margin-left:-4px}

/* ---------- Name ---------- */
input[type=text]{
  width:100%;padding:15px 16px;margin:6px 0 4px;
  border-radius:13px;border:1px solid rgba(255,255,255,.16);
  background:rgba(12,9,20,.6);color:var(--paper);
  font-family:inherit;font-size:19px;font-weight:700;text-align:center;
  letter-spacing:1.5px;outline:none;
}
input[type=text]:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(242,145,61,.18)}
.error{color:var(--danger);font-size:13.5px;margin:6px 0 4px;font-weight:600}

/* ---------- Start screen ---------- */
.start-inner{width:min(430px,100%);text-align:center}
#logo{width:min(360px,86%);margin:0 auto 6px;display:block;
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.5))}
.tagline{color:var(--muted);font-size:15px;margin:0 0 20px}
.start-meta{display:flex;align-items:center;justify-content:space-between;gap:12px}
.greet{color:var(--muted);font-size:14px;text-align:left;flex:1}
.greet b{color:var(--gold)}
.hint{margin-top:22px;color:var(--muted);font-size:13px}
kbd{
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  border-radius:6px;padding:2px 7px;font-family:inherit;font-size:12px;font-weight:700;
}

/* ---------- HUD ---------- */
#hud{z-index:10;pointer-events:none;padding:18px 20px;
  display:flex;justify-content:space-between;align-items:flex-start}
#hud .hud-right{pointer-events:auto}
.hud-score{
  font-size:44px;font-weight:900;line-height:1;letter-spacing:1px;
  text-shadow:0 3px 0 rgba(20,14,34,.55), 0 10px 24px rgba(0,0,0,.4);
  font-variant-numeric:tabular-nums;
}
.hud-best{margin-top:4px;font-size:12.5px;font-weight:700;letter-spacing:1.6px;color:rgba(244,239,230,.62)}
.hud-score.bump{animation:bump .32s ease}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.14);color:var(--gold)}100%{transform:scale(1)}}

/* ---------- Game over ---------- */
.badge{
  display:inline-block;background:var(--gold);color:#3b2a08;
  font-weight:900;font-size:12px;letter-spacing:2px;
  padding:6px 14px;border-radius:99px;margin-bottom:10px;
}
.final{margin:14px 0 18px}
.final-score{font-size:62px;font-weight:900;line-height:1;color:var(--gold);
  font-variant-numeric:tabular-nums;text-shadow:0 4px 0 rgba(20,14,34,.4)}
.final-sub{color:var(--muted);font-size:14px;margin-top:6px}
.revive{margin-bottom:16px}
.over-actions{display:flex;gap:10px}
.over-actions .btn-primary{flex:1}

/* ---------- Countdown ---------- */
#screen-count{background:rgba(15,12,24,.45);pointer-events:none}
.count{font-size:150px;font-weight:900;color:var(--gold);
  text-shadow:0 8px 0 rgba(20,14,34,.5);animation:cnt .8s ease both}
@keyframes cnt{0%{opacity:0;transform:scale(1.7)}30%{opacity:1;transform:scale(1)}100%{opacity:.6;transform:scale(.9)}}

/* ---------- Leaderboard ---------- */
.board{list-style:none;margin:14px 0;padding:2px;text-align:left;
  max-height:min(calc(100vh - 250px),560px);overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}
.board li{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;border-radius:12px;margin-bottom:6px;
  background:rgba(255,255,255,.045);font-size:15.5px;
}
.board li .rk{width:30px;font-weight:900;color:var(--muted);text-align:center;flex:none}
.board li .nm{flex:1;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board li .sc{font-weight:900;color:var(--gold);font-variant-numeric:tabular-nums}
.board li.top1{background:linear-gradient(90deg,rgba(255,209,102,.20),rgba(255,209,102,.04))}
.board li.top1 .rk{color:var(--gold)}
.board li.top2{background:rgba(214,214,230,.10)}
.board li.top3{background:rgba(205,144,84,.12)}
.board li.mine{outline:2px solid var(--orange);background:rgba(242,145,61,.14)}
.board-me{margin:-4px 0 12px;color:var(--muted);font-size:13.5px}
.board-empty{color:var(--muted);text-align:center;padding:26px 0;font-size:14.5px}

/* ---------- Rotate your phone ---------- */
#screen-rotate{
  display:none;position:absolute;inset:0;z-index:40;
  align-items:center;justify-content:center;text-align:center;padding:26px;
  background:linear-gradient(180deg,#221b35,#15111f);
}
.rotate-inner{max-width:300px}
.rotate-ico{
  width:74px;height:112px;margin:0 auto 22px;border-radius:14px;
  border:4px solid var(--paper);color:transparent;
  animation:rot 2.2s ease-in-out infinite;
}
@keyframes rot{
  0%,28%{transform:rotate(0)}
  55%,80%{transform:rotate(-90deg)}
  100%{transform:rotate(-90deg)}
}
#screen-rotate h2{margin-bottom:10px}
#screen-rotate .btn{margin-top:20px}

@media (max-width:860px) and (orientation:portrait){
  body:not(.force-portrait) #screen-rotate{display:flex}
}

/* ---------- Flash ---------- */
#flash{position:absolute;inset:0;pointer-events:none;background:#fff;opacity:0;z-index:15}
#flash.on{animation:fl .45s ease}
@keyframes fl{0%{opacity:.32}100%{opacity:0}}

/* ---------- Loading ---------- */
.loader{text-align:center;color:var(--muted)}
.loader-bar{width:210px;height:6px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden;margin:0 auto 12px}
.loader-bar i{display:block;height:100%;width:0%;border-radius:99px;
  background:linear-gradient(90deg,var(--orange),var(--gold));transition:width .3s ease}

/* ---------- Small screens ---------- */
@media (max-width:560px){
  .hud-score{font-size:34px}
  .panel{padding:24px 20px 20px}
  h2{font-size:22px}
  .final-score{font-size:52px}
  .btn-big{padding:17px;font-size:19px}
  .count{font-size:110px}
  .hint{display:none}
}
@media (max-height:460px){
  .start-inner #logo{width:min(250px,60%)}
  .tagline,.hint{display:none}
  .btn-big{padding:14px;font-size:18px}
}