*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root {
  --bg:       #080808;
  --s1:       #101010;
  --s2:       #161616;
  --s3:       #1e1e1e;
  --border:   #222;
  --border2:  #2e2e2e;
  --text:     #ebebeb;
  --muted:    #4a4a4a;
  --muted2:   #888;
  --accent:   #c8ff00;
  --acc2:     #a0cc00;
  --red:      #ff3b3b;
  --green:    #00e676;
  --orange:   #ff9800;
  --blue:     #2979ff;
  --r:        6px;
  --rl:       12px;
  --fh:       'Bebas Neue', sans-serif;
  --fb:       'Space Grotesk', sans-serif;
  --fm:       'Space Mono', monospace;
  --tr:       0.2s ease;
}

html{scroll-behavior:smooth}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--fb);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  overflow-x: hidden;
}

/* NOISE */
.noise {
  position: fixed; inset: 0; pointer-events: none; z-index: 997;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.5;
}

#confetti-canvas{position:fixed;inset:0;pointer-events:none;z-index:996}

/* ── SCREENS ── */
.screen{display:none;width:100%;max-width:480px}
.screen.active{display:block;animation:rise 0.4s cubic-bezier(0.22,1,0.36,1)}

@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* ── FIXED CHROME ── */
#home-btn {
  position:fixed;top:1rem;left:1rem;
  background:var(--s1);border:1px solid var(--border);color:var(--muted2);
  font-family:var(--fm);font-size:0.62rem;letter-spacing:2px;padding:.45rem .8rem;
  border-radius:var(--r);cursor:pointer;transition:all var(--tr);z-index:100;
  text-transform:uppercase;display:none;
}
#home-btn:hover,#home-btn:focus{border-color:var(--accent);color:var(--accent);outline:none}

#github-btn {
  position:fixed;top:1rem;right:1rem;
  background:var(--s1);border:1px solid var(--border);color:var(--muted2);
  font-family:var(--fm);font-size:0.62rem;letter-spacing:1.5px;padding:.45rem .8rem;
  border-radius:var(--r);cursor:pointer;transition:all var(--tr);z-index:100;
  text-decoration:none;display:flex;align-items:center;gap:.4rem;text-transform:uppercase;
}
#github-btn:hover,#github-btn:focus{border-color:var(--accent);color:var(--accent);outline:none}

/* ── BUTTONS ── */
.btn-primary {
  display:block;width:100%;padding:.875rem 1.25rem;
  border-radius:var(--r);border:none;background:var(--accent);color:#000;
  font-family:var(--fh);font-size:1.1rem;letter-spacing:2px;
  cursor:pointer;transition:opacity var(--tr),transform .1s;
}
.btn-primary:hover{opacity:.88}
.btn-primary:active{transform:scale(.98)}
.btn-primary:focus{outline:2px solid var(--accent);outline-offset:3px}

.btn-ghost {
  display:block;width:100%;padding:.75rem 1.25rem;
  border-radius:var(--r);border:1px solid var(--border2);
  background:transparent;color:var(--muted2);
  font-family:var(--fb);font-size:.85rem;font-weight:500;
  cursor:pointer;transition:all var(--tr);margin-top:.5rem;
}
.btn-ghost:hover{border-color:var(--muted2);color:var(--text)}
.btn-ghost:focus{outline:2px solid var(--muted2);outline-offset:2px}
.btn-ghost.sm{margin-top:0;flex:1;padding:.6rem;font-size:.78rem}

.btn-skip {
  background:var(--s2);border:1px solid var(--border);color:var(--muted);
  font-family:var(--fm);font-size:.62rem;letter-spacing:1px;
  padding:0 1rem;border-radius:var(--r);cursor:pointer;
  transition:all var(--tr);white-space:nowrap;text-transform:uppercase;
}
.btn-skip:hover{color:var(--red);border-color:var(--red)}

/* ── INPUT ── */
input[type="text"] {
  width:100%;background:var(--s1);border:1px solid var(--border);
  border-radius:var(--r);color:var(--text);font-family:var(--fb);
  font-size:1rem;padding:.875rem 1rem;outline:none;
  transition:border-color var(--tr),box-shadow var(--tr);
}
input[type="text"]:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(200,255,0,.07)}
input[type="text"]::placeholder{color:var(--muted)}

.kbd-hint{font-family:var(--fm);font-size:.58rem;color:var(--muted);letter-spacing:1px;text-align:center;margin-top:1.25rem}
.kbd-hint.in-game{margin-top:.5rem}
kbd{display:inline-block;padding:.08rem .3rem;background:var(--s2);border:1px solid var(--border2);border-radius:3px;font-size:.58rem;font-family:var(--fm)}

/* ═══ LANDING ═══ */
#screen-landing{text-align:center;position:relative;overflow:visible}

.landing-bg {
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  pointer-events:none;z-index:0;width:600px;height:600px;
}
.globe-ring {
  position:absolute;border-radius:50%;border:1px solid rgba(200,255,0,.06);
  top:50%;left:50%;transform:translate(-50%,-50%);
  animation:spin linear infinite;
}
.r1{width:200px;height:200px;animation-duration:20s}
.r2{width:350px;height:350px;animation-duration:35s;border-style:dashed;animation-direction:reverse}
.r3{width:520px;height:520px;animation-duration:55s;border-color:rgba(200,255,0,.03)}

@keyframes spin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}

.landing-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}

.logo-lockup{margin-bottom:1.75rem}
.logo-eyebrow{font-family:var(--fm);font-size:.62rem;color:var(--muted);letter-spacing:3px;margin-bottom:.5rem}
.logo{font-family:var(--fh);font-size:5.5rem;letter-spacing:4px;line-height:.9;color:var(--text)}
.logo span{color:var(--accent)}
.logo-sub{font-family:var(--fb);font-size:.78rem;color:var(--muted2);margin-top:.5rem;letter-spacing:.5px}

.name-row{width:100%;max-width:340px;margin-bottom:1rem}
.name-input-wrap{position:relative;display:flex;align-items:center;gap:.5rem}
.name-input-wrap input{flex:1;margin-bottom:0}
.name-tick{
  flex-shrink:0;width:42px;height:42px;
  border-radius:var(--r);border:none;
  background:var(--accent);color:#000;
  font-size:1.1rem;font-weight:700;
  cursor:none;transition:all var(--tr);
  display:flex;align-items:center;justify-content:center;
  animation:tickPop .2s cubic-bezier(.22,1,.36,1);
}
.name-tick:hover{opacity:.88;transform:scale(1.05)}
@keyframes tickPop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}

/* greeting row */
.name-greeting{
  display:flex;align-items:center;justify-content:center;gap:.65rem;
  background:var(--s1);border:1px solid var(--border);
  border-radius:100px;padding:.5rem 1.1rem;
  animation:rise .35s cubic-bezier(.22,1,.36,1);
  width:100%;
}
.greeting-text{
  font-family:var(--fm);font-size:.75rem;color:var(--accent);
  letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.greeting-edit{
  background:none;border:none;font-family:var(--fm);
  font-size:.6rem;color:var(--muted);cursor:none;
  text-decoration:underline;text-underline-offset:2px;
  flex-shrink:0;padding:0;transition:color var(--tr);
}
.greeting-edit:hover{color:var(--muted2)}

/* STATS PILL */
.stats-pill {
  display:flex;align-items:center;gap:.6rem;
  background:var(--s1);border:1px solid var(--border);
  border-radius:100px;padding:.35rem .85rem;
  font-family:var(--fm);font-size:.62rem;color:var(--muted2);letter-spacing:.5px;
  margin-bottom:1.25rem;
}
.pill-dot{width:3px;height:3px;border-radius:50%;background:var(--muted)}
.pill-link{background:none;border:none;color:var(--accent);font-family:var(--fm);font-size:.62rem;cursor:pointer;letter-spacing:.5px}
.pill-link:hover{text-decoration:underline}

/* MODE GRID */
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;width:100%;margin-bottom:1.25rem}
.mode-grid .mode-card:last-child:nth-child(odd){grid-column:1/-1}

.mode-card {
  background:var(--s1);border:1px solid var(--border);border-radius:var(--rl);
  padding:1rem .9rem;cursor:pointer;transition:all .22s ease;
  display:flex;flex-direction:column;align-items:flex-start;text-align:left;
  position:relative;overflow:hidden;
}
.mode-card-bg {
  position:absolute;inset:0;opacity:0;transition:opacity .25s;
  background:radial-gradient(circle at 70% 30%, rgba(200,255,0,.06), transparent 70%);
}
.mode-card:hover .mode-card-bg{opacity:1}
.mode-card:hover{border-color:rgba(200,255,0,.35);transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.5)}
.mode-card:focus{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}

.mode-icon{font-size:1.3rem;margin-bottom:.35rem;display:block}
.mode-title{font-family:var(--fh);font-size:1.05rem;letter-spacing:1px;color:var(--text);display:block}
.mode-desc{font-size:.68rem;color:var(--muted2);display:block;margin-top:.2rem;line-height:1.45}
.mode-tag {
  position:absolute;top:.55rem;right:.55rem;font-family:var(--fm);font-size:.5rem;
  letter-spacing:1.5px;background:rgba(200,255,0,.1);color:var(--accent);
  padding:.18rem .38rem;border-radius:3px;border:1px solid rgba(200,255,0,.2);
}
.mode-tag--fire{background:rgba(255,152,0,.1);color:var(--orange);border-color:rgba(255,152,0,.2)}
.mode-tag--blue{background:rgba(41,121,255,.1);color:var(--blue);border-color:rgba(41,121,255,.2)}

.landing-footer{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem;width:100%}
.landing-footer .btn-ghost.sm{margin-top:0;padding:.6rem .4rem;font-size:.73rem;text-align:center}

/* ═══ DIFFICULTY ═══ */
#screen-difficulty{text-align:center}
.section-header{margin-bottom:1.5rem}
.section-title{font-family:var(--fh);font-size:2.4rem;letter-spacing:2px;margin-bottom:.25rem}
.section-sub{font-family:var(--fm);font-size:.62rem;color:var(--muted);letter-spacing:2px;text-transform:uppercase}

.diff-grid{display:grid;gap:.5rem;margin-bottom:1.25rem}
.diff-btn {
  width:100%;padding:1rem 1.25rem;border-radius:var(--r);border:1px solid var(--border);
  background:var(--s1);color:var(--text);font-family:var(--fb);font-weight:500;font-size:.95rem;
  cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  text-align:left;transition:all var(--tr);
}
.diff-btn:hover{background:var(--s2)}
.diff-btn:focus{outline:2px solid var(--accent);outline-offset:2px}
.diff-btn.easy:hover{border-color:var(--green)}
.diff-btn.medium:hover{border-color:var(--accent)}
.diff-btn.hard:hover{border-color:var(--red)}
.diff-name{font-family:var(--fh);font-size:1.25rem;letter-spacing:1px;display:block}
.diff-desc{font-size:.7rem;color:var(--muted2);display:block;margin-top:.18rem}
.diff-badge{font-family:var(--fh);font-size:1.3rem;letter-spacing:1px;padding:.25rem .55rem;border-radius:var(--r);flex-shrink:0}
.diff-badge.green{background:rgba(0,230,118,.1);color:var(--green)}
.diff-badge.yellow{background:rgba(200,255,0,.1);color:var(--accent)}
.diff-badge.red{background:rgba(255,59,59,.1);color:var(--red)}

/* ═══ REGION ═══ */
.region-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:1.25rem}
.region-btn {
  padding:.75rem 1rem;border-radius:var(--r);border:1px solid var(--border);
  background:var(--s1);color:var(--muted2);font-family:var(--fb);font-size:.85rem;
  cursor:pointer;transition:all var(--tr);
}
.region-btn:hover{border-color:var(--border2);color:var(--text)}
.region-btn.active{border-color:var(--accent);color:var(--accent);background:rgba(200,255,0,.05)}
.region-btn:focus{outline:2px solid var(--accent);outline-offset:2px}

/* ═══ STATS SCREEN ═══ */
#screen-stats{text-align:left}

.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:1.5rem}
.stat-card {
  background:var(--s1);border:1px solid var(--border);border-radius:var(--r);
  padding:1rem .85rem;
}
.stat-card.accent{border-color:rgba(200,255,0,.2);background:rgba(200,255,0,.03)}
.stat-val{font-family:var(--fh);font-size:2rem;letter-spacing:1px;color:var(--text)}
.stat-card.accent .stat-val{color:var(--accent)}
.stat-key{font-family:var(--fm);font-size:.58rem;color:var(--muted);letter-spacing:2px;text-transform:uppercase;margin-top:.2rem}

.stats-section-label{font-family:var(--fm);font-size:.62rem;color:var(--muted);letter-spacing:2px;text-transform:uppercase;margin-bottom:.75rem}

.region-acc-wrap{margin-bottom:1.25rem}
.region-bar-row{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem}
.region-bar-name{font-family:var(--fm);font-size:.65rem;color:var(--muted2);width:4.5rem;flex-shrink:0}
.region-bar-track{flex:1;height:6px;background:var(--border);border-radius:3px;overflow:hidden}
.region-bar-fill{height:100%;background:var(--accent);border-radius:3px;transition:width .6s ease}
.region-bar-pct{font-family:var(--fm);font-size:.62rem;color:var(--muted2);width:2.5rem;text-align:right;flex-shrink:0}

.nemesis-wrap,.recent-wrong-wrap{margin-bottom:1.25rem}

.nemesis-card {
  background:var(--s1);border:1px solid rgba(255,59,59,.25);border-radius:var(--r);
  padding:1rem;display:flex;align-items:center;gap:1rem;
}
.nemesis-flag{width:90px;height:60px;object-fit:cover;border-radius:4px;border:1px solid var(--border2)}
.nemesis-info{flex:1}
.nemesis-name{font-family:var(--fh);font-size:1.3rem;letter-spacing:1px;color:var(--red)}
.nemesis-stat{font-family:var(--fm);font-size:.65rem;color:var(--muted2);margin-top:.2rem}

.wrong-flags{display:flex;gap:.5rem;flex-wrap:wrap}
.wrong-flag-item{display:flex;flex-direction:column;align-items:center;gap:.35rem}
.wrong-flag-item img{width:70px;height:47px;object-fit:cover;border-radius:4px;border:1px solid var(--border2)}
.wrong-flag-item span{font-family:var(--fm);font-size:.55rem;color:var(--muted2);text-align:center}

.stats-actions{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem}
.danger-btn{border-color:rgba(255,59,59,.3);color:rgba(255,59,59,.7)}
.danger-btn:hover{border-color:var(--red);color:var(--red)}

/* ═══ GAME SCREEN ═══ */
.hud {
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:.85rem;padding-bottom:.85rem;border-bottom:1px solid var(--border);
}
.hud-cell{display:flex;flex-direction:column}
.hud-cell.center{align-items:center}
.hud-cell.right{align-items:flex-end}
.hud-label{font-family:var(--fm);font-size:.56rem;color:var(--muted);letter-spacing:2.5px;text-transform:uppercase;margin-bottom:.2rem}
.hud-value{font-family:var(--fh);font-size:1.7rem;letter-spacing:1px;line-height:1}
.hud-value.accent{color:var(--accent)}

.lives-row{display:flex;gap:5px;margin-top:2px}
.life-dot{width:9px;height:9px;border-radius:50%;background:var(--red);transition:all .3s;display:block}
.life-dot.lost{background:var(--border2);transform:scale(.75)}

.streak-bar {
  min-height:1.5rem;font-family:var(--fm);font-size:.7rem;letter-spacing:1.5px;
  color:var(--orange);text-align:center;margin-bottom:.5rem;
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  transition:opacity .3s;opacity:0;
}
.streak-bar.visible{opacity:1}

.timer-wrap{position:relative;height:4px;background:var(--s2);border-radius:2px;overflow:hidden;margin-bottom:.7rem}
.timer-inner{height:100%;background:var(--accent);border-radius:2px;transition:width 1s linear,background .5s;width:100%}
.timer-inner.warning{background:var(--orange)}
.timer-inner.danger{background:var(--red)}

/* FLAG */
.flag-wrap {
  width:100%;aspect-ratio:3/2;border-radius:var(--rl);overflow:hidden;
  background:var(--s1);border:1px solid var(--border);margin-bottom:.7rem;position:relative;
}
#flag-image{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .3s}
#flag-image.loaded{opacity:1}

.flag-shimmer {
  position:absolute;inset:0;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.04) 50%, transparent 100%);
  background-size:200% 100%;
  animation:shimmer 1.4s ease infinite;
  pointer-events:none;
}
.flag-shimmer.hidden{display:none}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

.hint-bar{font-family:var(--fm);font-size:.73rem;color:var(--muted2);margin-bottom:.6rem;min-height:1.2em;letter-spacing:.3px;text-align:center}

/* SIMILARITY WARNING */
.similarity-warn {
  background:rgba(255,152,0,.07);border:1px solid rgba(255,152,0,.2);
  border-radius:var(--r);padding:.6rem .85rem;font-size:.8rem;color:var(--orange);
  margin-bottom:.6rem;animation:rise .25s ease;
  font-family:var(--fm);letter-spacing:.3px;line-height:1.5;
}

.input-section{margin-bottom:.4rem}
.input-wrap{position:relative;margin-bottom:0}

#suggestions {
  position:absolute;top:calc(100% + 3px);left:0;right:0;
  background:var(--s2);border:1px solid var(--border2);border-radius:var(--r);
  max-height:170px;overflow-y:auto;z-index:50;display:none;
  box-shadow:0 14px 36px rgba(0,0,0,.65);
}
.suggestion{padding:.6rem 1rem;cursor:pointer;font-size:.9rem;border-bottom:1px solid var(--border);transition:background .15s,color .15s}
.suggestion:last-child{border-bottom:none}
.suggestion:hover,.suggestion.highlighted{background:rgba(200,255,0,.07);color:var(--accent)}

.action-row{display:grid;grid-template-columns:1fr auto;gap:.5rem;margin-top:.55rem}
.action-row .btn-primary{width:auto}

.mc-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.4rem}
.mc-btn {
  padding:.875rem .75rem;border-radius:var(--r);border:1px solid var(--border2);
  background:var(--s1);color:var(--text);font-family:var(--fb);font-size:.85rem;font-weight:500;
  cursor:pointer;transition:all var(--tr);text-align:center;
}
.mc-btn:hover{border-color:var(--accent);color:var(--accent);background:rgba(200,255,0,.04)}
.mc-btn:focus{outline:2px solid var(--accent);outline-offset:2px}
.mc-btn.correct{border-color:var(--green);background:rgba(0,230,118,.1);color:var(--green)}
.mc-btn.wrong{border-color:var(--red);background:rgba(255,59,59,.08);color:var(--red)}
.mc-btn:disabled{opacity:.55;cursor:not-allowed}

.reverse-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.4rem}
.reverse-flag-btn {
  aspect-ratio:3/2;border-radius:var(--r);border:2px solid var(--border);
  overflow:hidden;cursor:pointer;transition:all var(--tr);padding:0;background:var(--s1);
}
.reverse-flag-btn img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.reverse-flag-btn:hover{border-color:var(--accent);transform:scale(1.02)}
.reverse-flag-btn:focus{outline:2px solid var(--accent);outline-offset:2px}
.reverse-flag-btn.correct{border-color:var(--green);box-shadow:0 0 16px rgba(0,230,118,.25)}
.reverse-flag-btn.wrong{border-color:var(--red)}
.reverse-flag-btn:disabled{opacity:.7;cursor:not-allowed}

.feedback {
  border-radius:var(--r);font-size:.88rem;font-weight:600;padding:0;
  max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease,margin .3s ease;
}
.feedback.show{padding:.7rem 1rem;max-height:80px;margin-top:.6rem}
.feedback.correct{background:rgba(0,230,118,.08);color:var(--green);border:1px solid rgba(0,230,118,.18)}
.feedback.wrong{background:rgba(255,59,59,.07);color:var(--red);border:1px solid rgba(255,59,59,.18)}

@keyframes scorePop{0%{transform:scale(1)}40%{transform:scale(1.55) rotate(-3deg);color:var(--accent)}100%{transform:scale(1)}}
.pop{animation:scorePop .45s cubic-bezier(.22,1,.36,1)}

/* ═══ GAME OVER ═══ */
#screen-gameover{text-align:center}
.go-inner{display:flex;flex-direction:column;align-items:center}
.go-eyebrow{font-family:var(--fm);font-size:.62rem;color:var(--muted);letter-spacing:3px;text-transform:uppercase;margin-bottom:.75rem}
.go-score-wrap{margin-bottom:.5rem}
.go-score{font-family:var(--fh);font-size:5.5rem;letter-spacing:-2px;color:var(--accent);line-height:.9;animation:scoreReveal .8s cubic-bezier(.22,1,.36,1)}
@keyframes scoreReveal{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
.go-label{font-family:var(--fm);font-size:.6rem;color:var(--muted);letter-spacing:3px;margin-top:.25rem;margin-bottom:1rem}

.new-record{background:rgba(200,255,0,.08);border:1px solid rgba(200,255,0,.22);color:var(--accent);border-radius:var(--r);padding:.55rem 1.25rem;font-size:.85rem;font-weight:600;margin-bottom:.85rem;display:none;animation:rise .4s ease}
.new-record.show{display:block}

.go-meta{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;width:100%;margin-bottom:.85rem}
.go-stat{background:var(--s1);border:1px solid var(--border);border-radius:var(--r);padding:.8rem .75rem}
.go-stat-val{font-family:var(--fh);font-size:1.7rem;letter-spacing:1px}
.go-stat-key{font-family:var(--fm);font-size:.55rem;color:var(--muted);letter-spacing:2px;text-transform:uppercase;margin-top:.18rem}

.go-streak{font-family:var(--fm);font-size:.72rem;color:var(--orange);letter-spacing:1px;margin-bottom:.75rem;min-height:1em}

/* ═══ PAINT MINI-GAME ═══ */
.minigame-wrap {
  width:100%;background:var(--s1);border:1px solid var(--border);
  border-radius:var(--rl);padding:1rem;margin-bottom:1rem;
}
.minigame-header{display:flex;flex-direction:column;align-items:center;margin-bottom:.85rem}
.minigame-label{font-family:var(--fh);font-size:1.3rem;letter-spacing:1px;color:var(--text)}
.minigame-sub{font-family:var(--fm);font-size:.62rem;color:var(--muted);letter-spacing:1px;margin-top:.2rem}

.paint-layout{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:.75rem}
.paint-side{display:flex;flex-direction:column;gap:.35rem}
.paint-side-label{font-family:var(--fm);font-size:.58rem;color:var(--muted);letter-spacing:1.5px;text-align:center;text-transform:uppercase}
.paint-ref-img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r);border:1px solid var(--border2)}
#paint-canvas{width:100%;aspect-ratio:3/2;border-radius:var(--r);border:1px solid var(--border2);cursor:crosshair;background:#fff;display:block}

.palette {
  display:flex;gap:.4rem;justify-content:center;flex-wrap:wrap;margin-bottom:.65rem;
}
.palette-swatch {
  width:26px;height:26px;border-radius:50%;border:2px solid transparent;
  cursor:pointer;transition:all .18s;flex-shrink:0;
}
.palette-swatch:hover{transform:scale(1.2)}
.palette-swatch.active{border-color:var(--text);transform:scale(1.15)}

.paint-tools{display:flex;align-items:center;gap:.5rem;justify-content:center}
.tool-btn {
  background:var(--s2);border:1px solid var(--border);border-radius:var(--r);
  padding:.35rem .5rem;cursor:pointer;font-size:.95rem;transition:all .18s;
}
.tool-btn:hover{border-color:var(--border2)}
.tool-btn.active{border-color:var(--accent);background:rgba(200,255,0,.08)}

.brush-size-wrap{display:flex;align-items:center}
#brush-size{
  width:70px;height:4px;-webkit-appearance:none;appearance:none;
  background:var(--border2);border-radius:2px;outline:none;cursor:pointer;
}
#brush-size::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;
}

.go-actions{width:100%}
.go-actions .btn-primary{margin-bottom:.45rem}

.share-toast{
  display:none;margin-top:.6rem;font-family:var(--fm);font-size:.68rem;
  color:var(--accent);letter-spacing:1px;animation:rise .2s ease;
}
.share-toast.show{display:block}

/* custom cursor */
*, *::before, *::after { cursor: none !important; }
#cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 7px; height: 7px;
  background: var(--accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  will-change: transform;
  transition: opacity .2s, width .15s, height .15s;
}
#cursor-dot.pressed {
  width: 5px; height: 5px;
}
#cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 30px; height: 30px;
  border: 1.5px solid rgba(200,255,0,0.6);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  will-change: transform;
  /* only transition size/color, never position — position via rAF */
  transition: width .22s ease, height .22s ease, border-color .22s ease, opacity .2s;
}
#cursor-ring.hovered {
  width: 48px; height: 48px;
  border-color: var(--accent);
}

/* ALMOST feedback */
.feedback.almost{background:rgba(255,235,59,.07);color:#ffe000;border:1px solid rgba(255,235,59,.2)}

/* Pink mode tag */
.mode-tag--pink{background:rgba(233,30,99,.1);color:#f06292;border-color:rgba(233,30,99,.2)}

/* ═══ STANDALONE PAINT SCREEN ═══ */
#screen-paint{text-align:center}
.paint-standalone-inner{display:flex;flex-direction:column;align-items:center}
.paint-standalone-header{margin-bottom:1rem}
.paint-standalone-title{font-family:var(--fh);font-size:2rem;letter-spacing:2px;color:var(--text)}
.paint-standalone-sub{font-family:var(--fm);font-size:.62rem;color:var(--muted);letter-spacing:1px;margin-top:.3rem}

.paint-layout.full{grid-template-columns:1fr 1fr;gap:.75rem;width:100%;margin-bottom:.75rem}
.paint-layout.full canvas{width:100%;aspect-ratio:3/2;border-radius:var(--r);border:1px solid var(--border2);cursor:crosshair;background:#fff;display:block}
.paint-layout.full .paint-ref-img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r);border:1px solid var(--border2)}

.paint-standalone-actions{display:flex;flex-direction:column;gap:.5rem;width:100%;margin-top:.75rem}
.paint-standalone-actions .btn-primary{display:block;width:100%;margin-bottom:0}
.paint-standalone-actions .btn-ghost{display:block;width:100%;margin-top:0}

/* ═══ RESPONSIVE ═══ */
@media(max-width:420px){
  .logo{font-size:4rem}
  .mode-grid{gap:.4rem}
  .mode-title{font-size:.95rem}
  .go-score{font-size:4rem}
  .paint-layout{grid-template-columns:1fr}
}