/* Full-screen game pages: Gravity Tag and Map Maker */
html, body.game { height: 100%; overflow: hidden; overscroll-behavior: none; }
body.game { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; }

/* HUD */
.hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; padding: calc(10px + var(--safe-t)) 12px 12px; }
.hud-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.hud-top > * { pointer-events: auto; }
.hud-mid { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.hud-right { display: flex; gap: 8px; align-items: center; }
.it-pill { font-size: clamp(.85rem, 2.6vw, 1.15rem); color: var(--cyan-2); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.it-pill.you-it { background: var(--amber); color: #1a1000; animation: pulse 1s infinite; }
@keyframes pulse { 50% { transform: scale(1.06); } }
.pill.warn { background: #c0263d; }
.score { color: var(--gold); min-width: 3.5em; justify-content: center; }
.compass { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(13, 15, 20, .6); transition: transform .08s linear; }
.compass svg { width: 22px; height: 22px; fill: var(--amber); }
.compass.chase svg { fill: var(--cyan-2); }
.energy { position: absolute; left: 50%; bottom: calc(18px + var(--safe-b)); transform: translateX(-50%); width: min(260px, 46vw); height: 16px; border-radius: 99px; background: rgba(13, 15, 20, .7); overflow: hidden; box-shadow: inset 0 0 0 2px rgba(127, 231, 255, .35); }
.energy i { position: absolute; inset: 0 auto 0 0; width: 100%; background: linear-gradient(90deg, var(--cyan), var(--cyan-2)); transition: width .1s linear; }
.energy.up i { background: linear-gradient(90deg, var(--violet), var(--pink)); }
.energy span { position: relative; display: block; text-align: center; font: 900 10px/16px var(--display); letter-spacing: .2em; color: #fff; text-shadow: 0 1px 2px #000; }
.touch-mode .energy { bottom: auto; top: calc(102px + var(--safe-t)); width: min(200px, 44vw); }
.lock-hint { position: absolute; left: 50%; bottom: calc(44px + var(--safe-b)); transform: translateX(-50%); padding: .3em .9em; border-radius: 99px; background: rgba(13, 15, 20, .6); color: var(--muted); font-size: .85rem; }

.countdown { position: fixed; inset: 0; display: grid; place-items: center; z-index: 20; pointer-events: none; font: 900 clamp(4rem, 18vw, 10rem)/1 var(--display); color: var(--gold); text-shadow: 0 8px 0 rgba(0, 0, 0, .35); }

/* Touch controls */
.touch { position: fixed; inset: 0; z-index: 12; pointer-events: none; }
.tc-stick { position: absolute; left: 0; top: 0; width: 120px; height: 120px; border-radius: 50%; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .25); opacity: 0; transition: opacity .15s; transform: translate(40px, calc(100vh - 200px)); }
.tc-stick.on { opacity: 1; }
.tc-knob { position: absolute; left: 34px; top: 34px; width: 52px; height: 52px; border-radius: 50%; background: rgba(127, 231, 255, .8); }
.tc-buttons { position: absolute; right: calc(14px + env(safe-area-inset-right, 0px)); bottom: calc(14px + var(--safe-b)); display: grid; grid-template-columns: auto auto; grid-template-areas: "trick flip" "jump jump"; gap: 12px; pointer-events: auto; }
.tc-btn { width: 72px; height: 72px; border-radius: 50%; border: 0; display: grid; place-items: center; font: 900 .78rem/1 var(--display); letter-spacing: .05em; color: #fff; background: rgba(13, 15, 20, .55); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .35); touch-action: none; }
.tc-btn.on { transform: scale(.92); background: rgba(31, 178, 255, .55); }
.tc-jump { grid-area: jump; width: 100%; height: 88px; border-radius: 44px; background: rgba(255, 159, 28, .6); font-size: 1rem; }
.tc-flip { grid-area: flip; background: rgba(124, 92, 255, .55); }
.tc-trick { grid-area: trick; background: rgba(255, 79, 139, .5); }
@media (min-width: 900px) and (pointer: coarse) { .tc-btn { width: 88px; height: 88px; } .tc-jump { height: 100px; } }

/* Menus and overlays */
.overlay { position: fixed; inset: 0; z-index: 30; overflow-y: auto; -webkit-overflow-scrolling: touch; background: radial-gradient(ellipse at top, rgba(31, 178, 255, .18), transparent 60%), rgba(8, 10, 14, .88); backdrop-filter: blur(4px); touch-action: pan-y; user-select: text; }
.overlay .panel { width: min(960px, 100%); margin: 0 auto; padding: calc(16px + var(--safe-t)) 16px calc(32px + var(--safe-b)); }
.overlay .panel.narrow { width: min(460px, 100%); display: flex; flex-direction: column; gap: 12px; padding-top: max(10vh, 24px); text-align: center; }
.topnav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.back { color: var(--text); text-decoration: none; font-weight: 800; padding: .5em 0; }
.who { color: var(--muted); font-size: .9rem; }
.game-title { font: 900 clamp(2.6rem, 9vw, 5rem)/.95 var(--display); margin: .2em 0 .25em; }
.game-title span { color: var(--cyan); }
.mm .game-title span { color: var(--amber); }
.lede { color: var(--muted); max-width: 60ch; margin: 0 0 1.2em; }
.it-word { color: var(--amber); }
.h-sm { font-size: 1rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-top: 1.4em; }
.map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.map-card { text-align: left; padding: 14px 16px; border-radius: var(--radius); border: 2px solid var(--line); background: var(--ink-2); cursor: pointer; color: var(--text); text-decoration: none; display: flex; flex-direction: column; gap: 4px; min-height: 86px; }
.map-card b { font: 800 1.05rem/1.2 var(--display); }
.map-card small { color: var(--muted); font-size: .85rem; line-height: 1.35; }
.map-card[aria-checked="true"] { border-color: var(--cyan); background: #0f2533; box-shadow: 0 0 0 3px rgba(31, 178, 255, .25); }
.map-card.mine b::before { content: '★ '; color: var(--amber); }
.map-card.make { border-style: dashed; }
.opts { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 18px 0; }
.opts label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 700; }
select { min-height: 44px; padding: 0 12px; border-radius: 12px; border: 2px solid var(--line); background: var(--ink-2); }
.how { margin-top: 18px; border: 2px solid var(--line); border-radius: var(--radius); padding: 4px 16px; }
.how summary { cursor: pointer; font: 800 1rem var(--display); padding: 10px 0; }
.how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 8px 22px; padding-bottom: 8px; }
.how h3 { font-size: .95rem; color: var(--cyan-2); margin-top: .6em; }
.how ul { margin: 0; padding-left: 1.1em; color: var(--muted); }
.how li { margin: .2em 0; }
.moves { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.moves li { padding: 6px 10px; border-radius: 10px; background: var(--ink-2); color: #5d6578; font-weight: 800; font-size: .9rem; }
.moves li.got { color: var(--green); background: #0f261d; }
.res-list { list-style: none; counter-reset: r; padding: 0; margin: 0; text-align: left; }
.res-list li { counter-increment: r; display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 10px; }
.res-list li::before { content: counter(r) '.'; width: 1.8em; color: var(--muted); font-weight: 800; }
.res-list li span { flex: 1; }
.res-list li.you { background: #0f2533; color: var(--cyan-2); font-weight: 800; }
.res-you { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; color: var(--muted); }
.res-you b { color: var(--text); }

/* ---------------- Map Maker ---------------- */
.mm-bar { position: fixed; left: 0; right: 0; top: 0; z-index: 14; display: flex; align-items: center; gap: 8px; padding: calc(8px + var(--safe-t)) 10px 8px; background: linear-gradient(rgba(13, 15, 20, .9), rgba(13, 15, 20, .6)); flex-wrap: wrap; }
.mm-bar .grow { flex: 1; min-width: 120px; }
.mm-name { width: 100%; min-height: 44px; border-radius: 12px; border: 2px solid var(--line); background: var(--ink-2); padding: 0 12px; font: 800 1rem var(--display); }
.mm-btn { min-height: 44px; padding: 0 14px; border-radius: 12px; border: 0; background: var(--ink-3); font: 800 .9rem var(--display); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--text); }
.mm-btn:hover { background: #283043; }
.mm-btn.play { background: var(--green); color: #00190d; }
.mm-btn.share { background: var(--amber); color: #1a1000; }
.mm-tools { position: fixed; z-index: 14; left: 10px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 20px; background: rgba(13, 15, 20, .85); max-height: calc(100vh - 150px); overflow-y: auto; }
.tool { width: 64px; min-height: 58px; border-radius: 14px; border: 2px solid transparent; background: var(--ink-3); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: 800 .66rem/1.1 var(--display); color: var(--muted); padding: 4px 2px; }
.tool i { width: 22px; height: 22px; border-radius: 6px; display: block; }
.tool[aria-pressed="true"] { border-color: var(--cyan); color: var(--text); background: #0f2533; }
.mm-props { position: fixed; z-index: 14; right: 10px; top: calc(76px + var(--safe-t)); display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 18px; background: rgba(13, 15, 20, .85); width: 168px; }
.prop { display: flex; align-items: center; justify-content: space-between; gap: 6px; font: 800 .8rem var(--display); color: var(--muted); }
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper button { width: 34px; height: 34px; border-radius: 10px; border: 0; background: var(--ink-3); font-weight: 900; cursor: pointer; }
.stepper output { min-width: 2.2em; text-align: center; color: var(--text); }
.mm-hint { position: fixed; z-index: 13; left: 50%; bottom: calc(14px + var(--safe-b)); transform: translateX(-50%); padding: .45em 1em; border-radius: 99px; background: rgba(13, 15, 20, .8); color: var(--muted); font-size: .88rem; text-align: center; max-width: calc(100vw - 24px); }
.mm-hud { position: fixed; z-index: 14; top: calc(10px + var(--safe-t)); left: 12px; right: 12px; display: flex; justify-content: space-between; gap: 8px; pointer-events: none; }
.mm-hud > * { pointer-events: auto; }
dialog { border: 0; border-radius: 22px; background: var(--ink-2); color: var(--text); padding: 22px; width: min(460px, calc(100vw - 32px)); box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
dialog::backdrop { background: rgba(0, 0, 0, .6); }
dialog h2 { font-size: 1.4rem; }
dialog .row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.share-link { width: 100%; min-height: 44px; border-radius: 12px; border: 2px solid var(--line); background: var(--ink); padding: 0 10px; font-size: .85rem; }
.open-list { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.open-list li { display: flex; gap: 6px; align-items: center; }
.open-list li button:first-child { flex: 1; justify-content: flex-start; }

/* Phones: tools become a bottom strip, properties a compact row above it */
@media (max-width: 720px), (max-height: 520px) {
  .mm-tools { left: 0; right: 0; top: auto; bottom: 0; transform: none; flex-direction: row; overflow-x: auto; overflow-y: hidden; border-radius: 18px 18px 0 0; padding: 6px 8px calc(6px + var(--safe-b)); max-height: none; }
  .tool { flex: 0 0 60px; min-height: 54px; }
  .mm-props { top: auto; right: 0; left: 0; width: auto; bottom: calc(72px + var(--safe-b)); flex-direction: row; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding: 6px 10px; gap: 14px; border-radius: 0; background: rgba(13, 15, 20, .72); }
  .prop { flex: 0 0 auto; font-size: .72rem; }
  .stepper button { width: 32px; height: 32px; }
  .mm-hint { bottom: auto; top: calc(120px + var(--safe-t)); font-size: .8rem; }
  .mm-bar .hide-sm { display: none; }
}

/* ---------------- Gravity Tag: play with friends ---------------- */
.mode-switch { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--ink-2); border: 2px solid var(--line); margin: 4px 0 6px; }
.mode-switch button { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; font: 800 .95rem var(--display); cursor: pointer; color: var(--muted); }
.mode-switch button[aria-selected="true"] { background: var(--cyan); color: #00121c; }
.friends { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; margin-top: 8px; }
.friend-card { padding: 16px 18px; border-radius: var(--radius); background: var(--ink-2); border: 2px solid var(--line); }
.friend-card h3 { font-size: 1.15rem; margin: 0 0 .3em; }
.friend-card p { color: var(--muted); margin: 0 0 12px; font-size: .92rem; }
.join-row { display: flex; gap: 8px; }
.code-input { width: 7.5em; min-height: 48px; border-radius: 14px; border: 2px solid var(--line); background: var(--ink); text-align: center; text-transform: uppercase; letter-spacing: .3em; font: 900 1.3rem var(--display); }
.code-input:focus { border-color: var(--cyan); outline: none; }
.net-status { grid-column: 1 / -1; min-height: 1.4em; margin: 0; color: var(--amber); font-weight: 700; }
.fine { grid-column: 1 / -1; color: var(--muted); font-size: .85rem; margin: 0; }
.lobby { gap: 10px; }
.kicker-sm { margin: 0; font: 800 .8rem var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.room-code { font: 900 clamp(3rem, 14vw, 4.6rem)/1 var(--display); letter-spacing: .18em; color: var(--gold); margin: 0; }
.row-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.lobby-players { list-style: none; padding: 0; margin: 6px 0; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.lobby-players li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--ink-2); font-weight: 800; }
.lobby-players li i { width: 22px; height: 22px; border-radius: 50%; flex: none; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .25); }
.lobby-players li span { flex: 1; }
.lobby-players li small { font: 800 .7rem var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: .2em .6em; border-radius: 99px; background: var(--ink-3); }
.lobby-players li small.host { background: var(--gold); color: #1a1400; }
.lobby-players li.you { box-shadow: inset 0 0 0 2px var(--cyan); }
.lobby-players li.away { opacity: .5; }
.opts.center { justify-content: center; margin: 4px 0; }
.net-pill { position: absolute; left: 50%; top: calc(96px + var(--safe-t)); transform: translateX(-50%); padding: .35em .9em; border-radius: 99px; background: #c0263d; font: 800 .85rem var(--display); }
.overlay-open .touch { display: none; }