/* Gem Heist: blocky UI (Press Start 2P for headings, Rubik for text) over a full-screen three.js canvas. */
:root { --ink: #1d1a2a; --cream: #fff7e0; --gold: #ffc83a; --gold-d: #c98a0a; --sky: #2b6fd6; --grass: #5ea040; --stone: #8a8a90; --line: #1d1a2a; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; background: #1d1a2a; }
body { font-family: 'Rubik', system-ui, sans-serif; color: var(--ink); -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: none; }
[hidden] { display: none !important; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.screen { position: fixed; inset: 0; }
.menu { overflow: auto; touch-action: pan-y; background: repeating-conic-gradient(#5ea040 0 25%, #57983a 0 50%) 0 0 / 48px 48px; }
h2, h3, .logo-t { font-family: 'Press Start 2P', monospace; font-weight: 400; }
.hint { color: #4a4458; font-size: 15px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 12px; }
.center { justify-content: center; }
.btn { font: 800 17px 'Rubik', sans-serif; color: var(--ink); background: #f2f2f2; border: 4px solid var(--line); padding: 10px 18px; cursor: pointer;
    box-shadow: inset -4px -4px 0 #b0b0b8, inset 4px 4px 0 #ffffff; image-rendering: pixelated; }
.btn:active { box-shadow: inset 4px 4px 0 #b0b0b8, inset -4px -4px 0 #ffffff; transform: translateY(2px); }
.btn.big { font-size: 20px; padding: 14px 24px; }
.btn.gold { background: var(--gold); box-shadow: inset -4px -4px 0 var(--gold-d), inset 4px 4px 0 #ffe9a0; }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: #fff; }
.btn:disabled { opacity: .5; }
input, select { font: 700 17px 'Rubik', sans-serif; border: 4px solid var(--line); padding: 7px 10px; background: #fff; }
#code { width: 140px; text-transform: uppercase; }

/* Title */
#title { display: grid; place-items: center; }
#title .bg { position: absolute; inset: 0; background: url(art/menu_bg.webp?v=1) center/cover; }
#title .bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 60%, rgba(0, 0, 0, 0), rgba(10, 8, 30, .55)); }
.title-box { position: relative; text-align: center; padding: 16px; }
.logo { width: min(620px, 86vw); max-height: 44vh; object-fit: contain; filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .35)); animation: bob 3s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-8px); } }
.tag { color: #fff; font-weight: 800; font-size: 19px; text-shadow: 0 3px 0 rgba(0, 0, 0, .6); margin: 6px 0 16px; }
.title-box .col { width: min(360px, 86vw); margin: 0 auto; }

/* Menus */
.bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left)); background: rgba(29, 26, 42, .9); color: #fff; }
.bar h2 { flex: 1; margin: 0; font-size: 16px; text-align: center; }
.room { font-family: 'Press Start 2P'; font-size: 12px; }
.sides { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px max(16px, env(safe-area-inset-right)) 30px max(16px, env(safe-area-inset-left)); max-width: 1100px; margin: 0 auto; }
@media (max-width: 760px) { .sides { grid-template-columns: 1fr; } }
.side, .panel { background: var(--cream); border: 4px solid var(--line); padding: 14px; box-shadow: 8px 8px 0 rgba(0, 0, 0, .3); }
.side h3 { margin: 0 0 8px; font-size: 14px; }
.panel { max-width: 820px; margin: 16px auto; }
.panel label { font-weight: 700; }
.castle-pic { width: 100%; max-height: 220px; object-fit: contain; }
.classes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 12px; }
.cls { font: inherit; text-align: center; background: #fff; border: 4px solid var(--line); padding: 6px; cursor: pointer; }
.cls img { width: 100%; height: 120px; object-fit: contain; }
.cls b { display: block; font-size: 15px; }
.cls small { display: block; font-size: 12px; color: #5a546a; line-height: 1.25; }
.cls[aria-pressed="true"] { background: #fff2b8; border-color: var(--gold-d); box-shadow: 0 0 0 4px var(--gold); }
.classes.small .cls img { height: 54px; }
.classes.small .cls small { display: none; }
.players { list-style: none; padding: 0; margin: 0 0 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.players li { background: #fff; border: 4px solid var(--line); padding: 6px 10px; font-weight: 700; display: flex; gap: 6px; align-items: center; }
.players li.castle { background: #e0e0ea; }
.or { color: #5a546a; }

/* HUD */
.hud { position: fixed; inset: 0; pointer-events: none; z-index: 2; }   /* above the raider touch layer, so its buttons get taps */
.hud-top { position: absolute; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.pill { background: rgba(255, 247, 224, .94); border: 4px solid var(--line); padding: 4px 12px; font-weight: 800; font-size: 18px; white-space: nowrap; }
.pill.gems { background: #c8fbff; }
.pill.hp:empty { display: none; }
.hud-right { position: absolute; top: max(8px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); display: flex; gap: 6px; pointer-events: auto; }
.ib[aria-pressed="true"] { background: var(--gold); }
.ib { width: 44px; height: 44px; font-size: 20px; border: 4px solid var(--line); background: rgba(242, 242, 242, .94); cursor: pointer; }
.banner { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); font-family: 'Press Start 2P'; font-size: 26px; color: #fff; text-shadow: 0 4px 0 #000, 0 0 12px rgba(0, 0, 0, .6); white-space: nowrap; animation: pop .4s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes pop { from { transform: translateX(-50%) scale(.3); opacity: 0; } }
.goal { position: absolute; top: calc(max(8px, env(safe-area-inset-top)) + 54px); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; font-weight: 800; color: #fff; text-shadow: 0 2px 0 #000; }
.goal i { font-style: normal; display: inline-block; font-size: 30px; color: var(--gold); transition: transform .1s linear; }
.raider-ui { position: fixed; inset: 0; touch-action: none; }
.stick { position: fixed; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, .7); background: rgba(0, 0, 0, .2); left: 100px; top: calc(100% - 110px); opacity: .5; pointer-events: none; }
.stick.on { opacity: 1; }
.stick i { position: absolute; left: 30px; top: 30px; width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, .9); }
.acts { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; gap: 10px; align-items: end; }
.act { position: relative; width: 78px; height: 78px; border-radius: 0; border: 4px solid var(--line); background: rgba(242, 242, 242, .92); font-size: 30px; cursor: pointer; overflow: hidden; }
.act.a { width: 96px; height: 96px; font-size: 38px; background: rgba(255, 200, 58, .95); grid-column: 2; grid-row: 1; }
.act.b { grid-column: 1; grid-row: 1; }
.act.jump { grid-column: 2; grid-row: 2; height: 62px; font-size: 26px; }
.act.home { grid-column: 1; grid-row: 2; height: 62px; font-size: 24px; }
.act small { display: block; font-size: 11px; font-weight: 800; }
.act em { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: rgba(0, 0, 0, .45); }
.look-hint { position: fixed; right: 16px; bottom: 260px; color: #fff; font-weight: 700; font-size: 13px; text-shadow: 0 2px 0 #000; opacity: .7; max-width: 200px; text-align: right; pointer-events: none; }
.castle-ui .weapons { position: fixed; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 8px; }
.wp { position: relative; width: 84px; height: 72px; font-size: 26px; border: 4px solid var(--line); background: rgba(242, 242, 242, .94); cursor: pointer; overflow: hidden; }
.wp small { display: block; font-size: 11px; font-weight: 800; }
.wp[aria-pressed="true"] { background: var(--gold); }
.wp em { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: rgba(0, 0, 0, .45); }
.castle-ui .rot { position: fixed; left: max(10px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); display: flex; gap: 6px; }
.aim-hint { position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%); color: #fff; font-weight: 700; text-shadow: 0 2px 0 #000; pointer-events: none; white-space: nowrap; }
.overlay { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(10, 8, 30, .5); z-index: 5; padding: 12px; touch-action: pan-y; }
.card { background: var(--cream); border: 4px solid var(--line); padding: 18px 22px; box-shadow: 8px 8px 0 rgba(0, 0, 0, .35); max-width: min(680px, 94vw); max-height: 92vh; overflow: auto; }
.card h2 { margin: 0 0 10px; font-size: 18px; text-align: center; line-height: 1.4; }
.card h3 { font-size: 12px; margin: 14px 0 4px; }
.help ul { padding-left: 20px; margin: 4px 0; }
.help li { margin-bottom: 5px; }
.score { width: 100%; border-collapse: collapse; margin: 10px 0 14px; }
.score td { border-bottom: 2px solid #e0d6b8; padding: 5px 6px; font-weight: 700; }
.toast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 18px; font-weight: 700; z-index: 9; border: 3px solid #fff; }
.rotate { position: fixed; inset: 0; display: none; place-items: center; background: rgba(29, 26, 42, .95); color: #fff; font-size: 54px; text-align: center; z-index: 8; }
.rotate p { font-size: 20px; }
@media (orientation: portrait) and (max-width: 820px) { #game .rotate { display: grid; } }
@media (max-height: 460px) {
    .act { width: 64px; height: 64px; font-size: 24px; }
    .act.a { width: 80px; height: 80px; }
    .act.jump, .act.home { height: 52px; }
    .look-hint { bottom: 200px; }
    .wp { width: 70px; height: 60px; font-size: 22px; }
    .aim-hint { bottom: 80px; font-size: 13px; }
    .banner { font-size: 18px; }
}

/* The game screen lets pointers through to the 3D view, except on its controls. */
#game { pointer-events: none; }
#game .hud-right, #game .raider-ui, #game .weapons, #game .rot, #game .overlay, #game .act { pointer-events: auto; }
#game .castle-ui { pointer-events: none; }