* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #1b1433; color: #fff; font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif; overflow: hidden; overscroll-behavior: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; }
.hidden { display: none !important; }
.screen { position: fixed; inset: 0; }

/* Home */
#home { display: flex; align-items: center; justify-content: center; padding: 16px;
  background: radial-gradient(circle at 50% 20%, #3d2b78 0%, #1b1433 70%); overflow-y: auto; }
.home-card { width: 100%; max-width: 420px; background: rgba(255,255,255,.06); border: 2px solid rgba(255,255,255,.12);
  border-radius: 24px; padding: 24px 20px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.logo { font-size: 56px; }
h1 { margin: 6px 0 8px; font-size: 22px; line-height: 1.2; font-weight: 600; }
h1 span { font-size: 30px; color: #ffd166; font-weight: 800; }
.tagline { margin: 0 0 18px; color: #d8d0ff; font-size: 15px; }
.lbl { display: block; text-align: left; font-size: 13px; color: #b9b0e8; margin-bottom: 6px; }
.name-row { display: flex; gap: 8px; margin-bottom: 16px; }
.name-box { flex: 1; background: #2a2052; border-radius: 14px; padding: 12px; font-size: 18px; font-weight: 700; color: #ffd166; }
.btn { background: #3b2f73; border-radius: 14px; padding: 12px 16px; font-weight: 700; transition: transform .08s; }
.btn:active { transform: scale(.96); }
.btn.big { font-size: 18px; padding: 14px 18px; }
.btn.small { font-size: 22px; padding: 8px 14px; }
.btn.primary { background: linear-gradient(180deg, #ffcf4d, #ff9f1c); color: #2a1600; box-shadow: 0 4px 0 #b86a00; }
#createBtn { width: 100%; }
.or { margin: 16px 0 10px; color: #9e95cf; font-size: 13px; }
.join-row { display: flex; gap: 8px; }
#codeInput { flex: 1; min-width: 0; font: inherit; font-size: 24px; font-weight: 800; letter-spacing: 6px; text-align: center; text-transform: uppercase;
  border-radius: 14px; border: 2px solid #5a4aa8; background: #120d26; color: #fff; padding: 10px; }
.error { color: #ff7b9c; min-height: 22px; margin-top: 10px; font-size: 14px; }
.fine { color: #8d84bf; font-size: 12px; margin: 6px 0 0; }

/* Game */
#game { background: #0e0a1e; touch-action: none; user-select: none; -webkit-user-select: none; }
#stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#stage.pointy { cursor: pointer; }
.hud { position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 8px; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud.top { top: env(safe-area-inset-top, 0); flex-wrap: wrap; }
.hud.bottom { bottom: env(safe-area-inset-bottom, 0); align-items: flex-end; }
.chip { background: rgba(20,14,40,.82); border: 1px solid rgba(255,255,255,.15); border-radius: 999px; padding: 7px 12px; font-size: 14px; white-space: nowrap; backdrop-filter: blur(4px); }
.chip b { color: #ffd166; letter-spacing: 2px; }
.chip.icon { font-size: 18px; padding: 5px 10px; }
.right { display: flex; gap: 6px; align-items: center; }
.players { display: flex; gap: 2px; }
.pl { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; border: 3px solid; background: rgba(20,14,40,.85); }
.pl.off { opacity: .35; }
.chat-btn { width: 60px; height: 60px; border-radius: 50%; font-size: 28px; background: linear-gradient(180deg, #7b6cff, #5443d6); box-shadow: 0 4px 0 #2f2591; }

#toasts { position: absolute; bottom: 86px; left: 50%; transform: translateX(-50%); width: min(92vw, 460px); display: flex; flex-direction: column; gap: 6px; pointer-events: none; z-index: 5; }
.toast { background: rgba(20,14,40,.92); border: 2px solid #5a4aa8; border-radius: 14px; padding: 9px 12px; font-size: 15px; text-align: center; animation: pop .25s ease-out; }
.toast.win { border-color: #ffd166; background: rgba(70,50,10,.95); }
.toast.item { border-color: #6ee7b7; }
.toast.warn { border-color: #ff7b9c; }
@keyframes pop { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.panel { position: absolute; right: 8px; bottom: 80px; width: min(94vw, 380px); max-height: 60vh; overflow-y: auto; background: rgba(24,17,50,.97);
  border: 2px solid #5a4aa8; border-radius: 18px; padding: 12px; z-index: 6; }
#hintPanel { top: 58px; bottom: auto; }
.panel-title { display: flex; justify-content: space-between; align-items: center; font-weight: 800; margin-bottom: 8px; }
.x { background: rgba(255,255,255,.1); border-radius: 50%; width: 32px; height: 32px; font-size: 16px; }
.chat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.chat-grid button { background: #3b2f73; border-radius: 12px; padding: 10px 6px; font-size: 15px; }
.chat-grid .tiny { font-size: 20px; padding: 8px 0; }
.chat-grid .row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.chat-grid .row.digits { grid-template-columns: repeat(5, 1fr); }
#hintList { padding-left: 22px; margin: 0 0 12px; line-height: 1.4; }
#hintList li { margin-bottom: 8px; }
#getHint { width: 100%; }

.modal { position: absolute; inset: 0; background: rgba(5,3,15,.6); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 8; }
.modal-card { position: relative; width: min(94vw, 420px); max-height: 92vh; overflow-y: auto; background: linear-gradient(180deg, #2f2463, #1e1642);
  border: 3px solid #ffd166; border-radius: 22px; padding: 22px 18px 18px; text-align: center; animation: pop .2s ease-out; }
.modal-card .x { position: absolute; top: 10px; right: 10px; }
.m-emoji { font-size: 54px; }
.modal-card h2 { margin: 4px 0 8px; color: #ffd166; }
.modal-card p { white-space: pre-wrap; text-align: left; font-size: 17px; line-height: 1.45; margin: 0 0 12px; }
.bignum { font-size: 72px; font-weight: 900; color: #fff; background: #120d26; border-radius: 16px; display: inline-block; min-width: 110px; padding: 2px 18px; border: 3px dashed #ffd166; }
.symrow { display: flex; justify-content: center; gap: 8px; font-size: 42px; }
.symrow span { background: #0b0820; border-radius: 12px; padding: 6px 8px; }
.slots { display: flex; justify-content: center; gap: 8px; margin: 6px 0 12px; }
.slots span { width: 52px; height: 60px; border-radius: 12px; background: #120d26; border: 2px solid #5a4aa8; display: grid; place-items: center; font-size: 30px; font-weight: 900; }
.pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pad.sym { grid-template-columns: repeat(3, 1fr); }
.pad button { background: #3b2f73; border-radius: 14px; font-size: 26px; font-weight: 800; padding: 12px 0; box-shadow: 0 3px 0 #241b4d; }
.pad button:active { transform: translateY(2px); box-shadow: none; }
.pad .ok { background: #2fa36b; box-shadow: 0 3px 0 #1a6b43; }
.pad .clr { background: #a8435f; box-shadow: 0 3px 0 #6b2638; font-size: 18px; }
.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }
.wrongmsg { color: #ff7b9c; font-weight: 700; min-height: 22px; }
.win-card .stars { font-size: 44px; letter-spacing: 6px; }

@media (max-width: 520px) {
  .chip.center { order: 3; width: 100%; text-align: center; }
  #toasts { bottom: 80px; }
  #hintPanel { top: 96px; }
}

/* Adventure UI */
.hover-lbl { position: absolute; top: 52px; left: 50%; transform: translateX(-50%); background: rgba(20,14,40,.85); border: 2px solid #ffd166;
  color: #ffd166; font-weight: 800; border-radius: 12px; padding: 4px 14px; font-size: 16px; pointer-events: none; z-index: 4; white-space: nowrap; }
.verbs { position: absolute; z-index: 7; display: flex; flex-direction: column; align-items: center; gap: 6px; transform: translate(-50%, -50%); }
.verbs .vt { background: rgba(20,14,40,.92); color: #ffd166; font-weight: 800; border-radius: 10px; padding: 3px 10px; font-size: 15px; white-space: nowrap; }
.verbs .vrow { display: flex; gap: 8px; }
.verbs button { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(180deg, #ffffff, #e2dcff); color: #1b1433; font-size: 26px;
  box-shadow: 0 4px 0 #6b5fb0, 0 6px 18px rgba(0,0,0,.4); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; animation: pop .15s ease-out; }
.verbs button small { font-size: 11px; font-weight: 800; margin-top: 3px; }
.verbs button:active { transform: translateY(3px); box-shadow: 0 1px 0 #6b5fb0; }
.say { position: absolute; left: 50%; top: 58px; transform: translateX(-50%); width: min(92vw, 720px); z-index: 6; background: #fff8e6; color: #2a1a10;
  border: 4px solid #5a3a8a; box-shadow: 0 0 0 3px #fff8e6, 0 8px 30px rgba(0,0,0,.5); border-radius: 6px; padding: 12px 16px; font-size: 18px; line-height: 1.4;
  font-family: Georgia, "Times New Roman", serif; animation: pop .18s ease-out; pointer-events: none; }
.say b { display: block; color: #a8432a; font-family: "Trebuchet MS", sans-serif; font-size: 14px; }
.say b:empty { display: none; }
.inv { display: flex; align-items: center; gap: 6px; background: rgba(20,14,40,.88); border: 2px solid rgba(255,255,255,.18); border-radius: 18px; padding: 6px 8px; max-width: calc(100vw - 90px); overflow-x: auto; }
.inv-lbl { font-size: 24px; }
.inv-items { display: flex; gap: 6px; }
.inv-items:empty::after { content: 'empty'; color: #9e95cf; font-size: 13px; }
.inv-items button { width: 52px; height: 52px; border-radius: 12px; background: #3b2f73; font-size: 30px; border: 3px solid transparent; flex: none; }
.inv-items button.sel { border-color: #ffd166; background: #6b5320; transform: translateY(-4px); }
.inv-look { width: 44px; height: 44px; border-radius: 50%; background: #ffd166; color: #2a1600; font-size: 22px; flex: none; }
.rotate-tip { display: none; position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); color: #b9b0e8; font-size: 14px; pointer-events: none; white-space: nowrap; }
@media (orientation: portrait) and (max-width: 700px) { .rotate-tip { display: block; } }
.letter { background: #fff8e6; color: #2a1a10; border-radius: 8px; padding: 14px; font-family: Georgia, serif; font-size: 16px; text-align: left; white-space: pre-wrap; margin-bottom: 8px; }
.glyphrow span, .symrow span { background: #0b0820; border-radius: 12px; padding: 6px 8px; }
.glyphrow { display: flex; justify-content: center; gap: 10px; font-size: 46px; }
.dials { display: flex; justify-content: center; gap: 12px; margin: 8px 0 12px; }
.dials button { width: 80px; height: 80px; border-radius: 50%; font-size: 40px; background: radial-gradient(#e2dcd0, #8d877c); border: 4px solid #1c1020; box-shadow: 0 4px 0 #3a2a1a; }
.dials button:active { transform: rotate(20deg); }
.go-btn { width: 100%; }
@media (max-height: 500px) {
  .say { top: 46px; font-size: 16px; padding: 8px 12px; }
  #toasts { bottom: 66px; width: min(60vw, 380px); }
  .inv-items button { width: 44px; height: 44px; font-size: 26px; }
  .chat-btn { width: 52px; height: 52px; font-size: 24px; }
  .hover-lbl { top: 46px; }
  .verbs button { width: 56px; height: 56px; font-size: 22px; }
}

/* HD-2D layers */

/* Team quick-chat log, top left under the room chip, seen by everyone in every room */
.chat-log { position: absolute; bottom: 82px; right: 10px; align-items: flex-end; display: flex; flex-direction: column; gap: 4px; max-width: min(30vw, 260px); pointer-events: none; z-index: 4; }
.chat-log div { background: rgba(20,14,40,.88); border-left: 4px solid; border-radius: 10px; padding: 4px 9px; font-size: 14px; }
.chat-log i { color: #b9b0e8; font-style: normal; font-size: 12px; }
.sharednote { margin-top: 10px; font-size: 13px; color: #b9b0e8; }
/* Short landscape phones: keep the whole win card on screen */
@media (max-height: 460px) {
  .win-card { padding-top: 10px; padding-bottom: 10px; }
  .win-card .m-emoji { font-size: 28px; }
  .win-card p { font-size: 14px; line-height: 1.3; margin-bottom: 8px; }
  .win-card h2 { margin: 0 0 4px; }
  .win-card .stars { font-size: 24px; }
  .chat-log { bottom: 64px; }
}