.game-page { min-height: 100vh; -webkit-tap-highlight-color: transparent; }
.game-page .bar { position: relative; z-index: 3; padding-top: max(10px, env(safe-area-inset-top)); }
.bar-title { margin: 0; font-size: 10px; font-weight: normal; color: var(--dim); }

/* ---------- area di gioco: occupa lo schermo ---------- */
.stage {
  height: calc(100vh - 52px); height: calc(100dvh - 52px); min-height: 330px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 16px max(16px, env(safe-area-inset-bottom));
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.cabinet {
  position: relative; background: var(--line); padding: 5px; line-height: 0; max-width: 100%;
  border: 4px solid var(--yellow); box-shadow: 0 0 0 4px var(--line), 10px 10px 0 4px var(--line);
}
#game { display: block; image-rendering: pixelated; width: 640px; height: 360px; }

.hint { margin: 0; font-size: 9px; color: var(--dim); text-align: center; line-height: 1.8; }
.only-coarse { display: none; }

.jump-btn {
  display: none; width: min(100%, 420px); font: inherit; font-size: 20px; letter-spacing: 3px; color: #1a1a2e;
  background: var(--green); border: 0; padding: 20px 16px; cursor: pointer; touch-action: none;
  box-shadow: inset -5px -5px 0 #1f9d55, inset 5px 5px 0 #b7f7d0, 0 5px 0 var(--line);
}
.jump-btn:active { transform: translateY(4px); box-shadow: inset -5px -5px 0 #1f9d55, inset 5px 5px 0 #b7f7d0, 0 1px 0 var(--line); }

@media (pointer: coarse) {
  .jump-btn { display: block; }
  .only-coarse { display: inline; }
  .only-fine { display: none; }
}

/* ---------- game over a tutto schermo ---------- */
.over {
  position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center;
  background: rgba(8, 8, 34, .86); padding: 12px; line-height: 1.5; touch-action: manipulation;
}
.over[hidden] { display: none; }
.panel {
  width: min(100%, 460px); max-height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
  background: #1b1b52; border: 4px solid var(--yellow); padding: 16px 14px;
  box-shadow: 8px 8px 0 var(--line); text-align: center;
  animation: pop .25s steps(4);
}
@keyframes pop { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
.panel h2 { margin: 0; font-size: clamp(18px, 6vw, 28px); color: var(--red); text-shadow: 3px 3px 0 var(--line); }
.quip { margin: 0; font-size: 10px; line-height: 1.7; color: var(--dim); min-height: 2.4em; }
.score-row { display: flex; justify-content: space-around; gap: 8px; }
.score-row > div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.lbl { font-size: 8px; color: var(--dim); }
.big { font-size: clamp(28px, 9vw, 42px); color: var(--yellow); text-shadow: 3px 3px 0 var(--line); line-height: 1.2; }
.big.alt { color: var(--blue); }
#newrec { color: var(--green); }
.list {
  margin: 0; padding: 8px 8px 8px 34px; flex: 1 1 auto; min-height: 56px; max-height: min(26vh, 180px); overflow-y: auto;
  text-align: left; font-size: 10px; line-height: 2; color: var(--ink); -webkit-overflow-scrolling: touch;
  background: var(--line); border: 2px solid #55537f;
}
.list li::marker { color: var(--dim); }
.list:empty::before { content: 'Nessuna parola. Neanche un tweet.'; color: var(--dim); margin-left: -22px; }
.actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; padding-top: 4px; }
.actions .btn { font-size: 10px; padding: 14px 14px; flex: 1 1 auto; min-width: 128px; }
.actions .btn:disabled { opacity: .45; cursor: default; }
.btn-blue { background: var(--blue); box-shadow: inset -4px -4px 0 #1f6fb8, inset 4px 4px 0 #b8dcff, 0 4px 0 var(--line); }
.btn-blue:hover { background: #6bbcff; }

/* ---------- testo SEO sotto il gioco ---------- */
.seo { max-width: 720px; margin: 0 auto; padding: 36px 18px 24px; font-size: 10px; line-height: 2; color: var(--ink); }
.seo h2 { font-size: 12px; color: var(--yellow); margin: 28px 0 10px; line-height: 1.6; }
.seo p, .seo li { color: #d8d5ff; }
.seo strong { color: #fff; }
.seo a { color: var(--blue); }
.seo details { border: 2px solid #3a3870; margin: 8px 0; padding: 8px 12px; background: rgba(5, 5, 26, .5); }
.seo summary { cursor: pointer; color: #fff; }
.seo details p { margin: 8px 0 2px; }

@media (max-width: 700px) {
  .bar { font-size: 9px; padding: 8px 12px; }
  .bar-title { font-size: 8px; max-width: 46%; text-align: center; }
  .stage { padding: 8px 8px max(10px, env(safe-area-inset-bottom)); gap: 8px; height: calc(100dvh - 44px); }
  .cabinet { border-width: 3px; padding: 3px; box-shadow: 0 0 0 3px var(--line), 6px 6px 0 3px var(--line); }
  .hint { font-size: 8px; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .hint { display: none; }
  .stage { min-height: 0; height: calc(100vh - 44px); height: calc(100dvh - 44px); padding: 6px; }
  .jump-btn { display: none; }
}

/* ---------- classifica / condivisione ---------- */
.save { display: flex; flex-direction: column; gap: 8px; background: rgba(5,5,26,.55); border: 2px dashed var(--yellow); padding: 10px; }
.save[hidden], .saved[hidden], .err[hidden] { display: none; }
.name-row { display: flex; gap: 8px; }
#name { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 18px; letter-spacing: 3px; text-align: center; text-transform: uppercase; color: var(--yellow); background: var(--line); border: 3px solid var(--dim); padding: 10px 6px; outline: none; border-radius: 0; }
#name:focus { border-color: var(--yellow); }
#name::placeholder { color: #55537f; }
.save .btn { padding: 10px 16px; font-size: 11px; }
.fine { margin: 0; font-size: 8px; line-height: 1.8; color: var(--dim); }
.fine a, .lb-link { color: var(--blue); }
.lb-link { text-align: center; text-decoration: underline; }
.err { margin: 0; font-size: 9px; color: var(--red); line-height: 1.7; }
.saved { display: flex; flex-direction: column; gap: 10px; align-items: center; background: rgba(5,5,26,.55); border: 2px solid var(--green); padding: 10px; }
.rank { margin: 0; font-size: 11px; line-height: 1.8; color: var(--green); }
.rank b { color: var(--yellow); font-weight: normal; }
.share-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; width: 100%; }
.share-row a, .share-row button { font: inherit; font-size: 9px; text-align: center; text-decoration: none; color: #fff; background: #2a2a6a; border: 2px solid #55537f; padding: 11px 6px; cursor: pointer; }
.share-row a:hover, .share-row button:hover { border-color: var(--yellow); color: var(--yellow); }
.share-row .wa { background: #1f9d55; border-color: #1f9d55; color: #fff; }
.linkbtn { font: inherit; font-size: 8px; background: none; border: 0; color: var(--dim); text-decoration: underline; cursor: pointer; padding: 4px; }
.linkbtn:hover { color: var(--red); }
.challenge { position: absolute; }