/* LIGHTS OUT MANOR look: an old house at night. Moonlit navy, torch amber, claret wallpaper, cream visiting cards,
   polished wood. Fraunces (a soft old-style serif) for the house, Archivo for the small print. LITE / Chromecast safe:
   no filters, no blend modes, no backdrop blur; animations are transform + opacity one-shots. */
:root { --lom-night: #141a26; --lom-ink: #0d1119; --lom-moon: #9fb0c8; --lom-torch: #f0c27a; --lom-claret: #6e2f36; --lom-wood: #6b4a33; --lom-cream: #efe4cf; --lom-hot: #e0654f; --lom-ok: #9be0a5; }
html[data-game="lom"] body { background: var(--lom-night); }
html[data-game="lom"] { --pink: #c96a5a; --pink-deep: #7d3428; --blue: #5d7fa8; --blue-deep: #34506f; --yellow: #f0c27a; --yellow-deep: #b98a3e; --orange: #d9895a; --lilac: #9fb0c8; }
html[data-game="lom"] .studio { background: radial-gradient(120% 90% at 50% 0%, #2a3550 0%, #182032 55%, #0d1119 100%); }
html[data-game="lom"] .onair { color: var(--lom-cream); background: rgba(13, 17, 25, .7); border-color: rgba(239, 228, 207, .3); box-shadow: none; }
html[data-game="lom"] .onair.live { color: var(--lom-ink); background: var(--lom-torch); border-color: var(--lom-ink); }
.lom-logo { width: min(86vw, 560px); height: auto; display: block; margin: 0 auto; }
.lom-logo.sm { width: min(64vw, 380px); }
.lom-homelogo.tv .lom-logo { width: min(34vw, 520px); }
.lom-big { font: 800 clamp(36px, 10vw, 72px)/1.02 Fraunces, Georgia, serif; color: var(--lom-cream); text-align: center; text-wrap: balance; text-shadow: 0 4px 0 rgba(0, 0, 0, .4); }
.lom-sub { font: 600 16px/1.35 Archivo, sans-serif; color: rgba(239, 228, 207, .82); text-align: center; text-wrap: balance; }
.lom-btn { font: 800 18px/1.1 Archivo, sans-serif; color: var(--lom-ink); background: var(--lom-torch); border: 3px solid var(--lom-ink); border-radius: 14px; padding: 14px 20px; box-shadow: 0 6px 0 rgba(0, 0, 0, .45); cursor: pointer; }
.lom-btn.big { width: min(88vw, 380px); padding: 18px 20px; font-size: 20px; }
.lom-btn.ghost { background: transparent; color: var(--lom-cream); border-color: rgba(239, 228, 207, .4); box-shadow: none; }
.lom-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0, 0, 0, .45); }
.lom-btn:disabled { opacity: .7; }
.kicker { letter-spacing: .14em; }

/* ---------------------------------------------------------------- title */
.lom-title { position: relative; min-height: 100%; display: grid; place-items: center; overflow: hidden; border-radius: 10px; }
.lom-key { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lom-titlein { position: relative; display: grid; justify-items: center; gap: 18px; padding: 24px 12px; animation: lom-in .8s ease-out both; }
.lom-plate { display: grid; justify-items: center; gap: 2px; background: var(--lom-cream); color: var(--lom-ink); border: 3px solid var(--lom-ink); border-radius: 6px; padding: 10px 24px; box-shadow: 0 6px 0 rgba(0, 0, 0, .5); font: 600 15px/1.2 Archivo, sans-serif; }
.lom-plate b { font: 800 26px/1.05 Fraunces, Georgia, serif; }
.lom-title.tv .lom-logo { width: 46vw; } .lom-title.tv .lom-plate { font-size: 2.2vh; } .lom-title.tv .lom-plate b { font-size: 4.2vh; }
@keyframes lom-in { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------------------------------------------------------------- the brief */
.lom-brief { display: grid; justify-items: center; align-content: center; gap: 14px; min-height: 100%; padding: 22px 16px; text-align: center; color: var(--lom-cream); }
.lom-brief p { margin: 0; font: 600 16px/1.4 Archivo, sans-serif; max-width: 34ch; text-wrap: balance; } .lom-brief p.small { font-size: 14px; opacity: .8; }
.lom-role { font: 800 34px/1.05 Fraunces, Georgia, serif; display: flex; align-items: center; gap: 10px; }
.lom-role.b { color: var(--lom-hot); } .lom-role.g { color: var(--lom-torch); }
.lom-role i { width: 22px; height: 22px; border-radius: 50%; background: var(--c); border: 3px solid var(--lom-ink); }
.lom-howto { display: flex; align-items: center; gap: 14px; text-align: left; font: 600 15px/1.35 Archivo, sans-serif; max-width: 340px; }
.lom-phoneflat { flex: none; width: 48px; height: 80px; border-radius: 10px; border: 4px solid var(--lom-cream); background: linear-gradient(180deg, var(--lom-torch) 0 20%, var(--lom-ink) 20%); transform: perspective(200px) rotateX(48deg); }
.lom-mapbox { width: 100%; max-width: 560px; display: grid; justify-items: center; }
.lom-brief.tv { gap: 3vh; } .lom-brief.tv .lom-big { font-size: 6vh; display: grid; gap: 1vh; } .lom-brief.tv .lom-big span { font: 700 2.6vh/1 Archivo, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--lom-moon); } .lom-brief.tv .lom-big b { color: var(--lom-hot); }
.lom-guards { display: flex; flex-wrap: wrap; gap: 1vw; justify-content: center; }
.lom-gchip { display: flex; align-items: center; gap: .6vw; padding: .8vh 1.2vw; border-radius: 999px; background: rgba(239, 228, 207, .1); font: 700 2.2vh/1 Archivo, sans-serif; }
.lom-gchip i { width: 1.8vh; height: 1.8vh; border-radius: 50%; background: var(--c); }
.lom-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 2vw; max-width: 78vw; text-align: left; }
.lom-rules div { display: grid; gap: .8vh; padding: 2vh 1.6vw; border-radius: 1vh; background: var(--lom-cream); color: var(--lom-ink); box-shadow: 0 .6vh 0 rgba(0, 0, 0, .5); }
.lom-rules b { font: 800 3vh/1 Fraunces, Georgia, serif; } .lom-rules span { font: 600 2.1vh/1.35 Archivo, sans-serif; }

/* ---------------------------------------------------------------- the night: TV */
.lom-play { position: relative; min-height: 100%; overflow: hidden; color: var(--lom-cream); }
.lom-play.tv { position: absolute; inset: 0; }
.lom-stage { position: absolute; inset: 0; }
.lom-cv { position: absolute; inset: 0; display: block; }
.lom-hud { position: absolute; left: 50%; top: 2vh; transform: translateX(-50%); display: flex; align-items: center; gap: 2vw; padding: 1vh 2vw; background: rgba(13, 17, 25, .78); border: .3vh solid rgba(239, 228, 207, .25); border-radius: 999px; z-index: 2; white-space: nowrap; }
.lom-clock { display: flex; align-items: baseline; gap: .8vw; font: 700 1.8vh/1 Archivo, sans-serif; color: var(--lom-moon); } .lom-clock b { font: 800 4vh/1 Fraunces, Georgia, serif; color: var(--lom-cream); }
.lom-lootstrip { display: flex; gap: .6vw; } .lom-loot { width: 4.2vh; height: 4.2vh; object-fit: contain; transition: opacity .3s, transform .3s; } .lom-lootstrip .gone { opacity: .22; transform: scale(.8); }
.lom-need { font: 700 1.8vh/1 Archivo, sans-serif; color: var(--lom-torch); }
.lom-tags { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.lom-tag { position: absolute; transform: translate(-50%, -100%); padding: .3vh .8vw; border-radius: 999px; background: rgba(13, 17, 25, .7); border: .25vh solid var(--c); font: 700 1.6vh/1 Archivo, sans-serif; white-space: nowrap; }
.lom-banner { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 3; pointer-events: none; }
.lom-bn { display: grid; justify-items: center; font: 800 9vh/1 Fraunces, Georgia, serif; color: var(--lom-cream); text-shadow: 0 .6vh 0 rgba(0, 0, 0, .6); animation: lom-pop .45s cubic-bezier(.2, 1.5, .4, 1) both; transition: opacity .4s, transform .4s; white-space: nowrap; }
.lom-bn small { font: 700 3vh/1.2 Archivo, sans-serif; } .lom-bn.out { opacity: 0; transform: translateY(-2vh); }
.lom-bn.hot { color: var(--lom-hot); } .lom-bn.amber { color: var(--lom-torch); font-size: 6vh; } .lom-bn.win { color: var(--lom-ok); } .lom-bn.dark { color: var(--lom-moon); }
@keyframes lom-pop { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
.lom-host { position: absolute; left: 2vw; bottom: 2vh; display: flex; align-items: center; gap: 1vw; z-index: 2; font: 700 1.8vh/1 Archivo, sans-serif; color: var(--lom-moon); }
.lom-host img { width: 9vh; height: 9vh; border-radius: 50%; object-fit: cover; border: .4vh solid var(--lom-cream); }
.lom-nogl { position: absolute; inset: 0; display: grid; place-items: center; font: 600 2.4vh/1.3 Archivo, sans-serif; }

/* ---------------------------------------------------------------- the night: phones */
.lom-play.phone { display: grid; grid-template-rows: auto 1fr; min-height: 100%; padding: calc(env(safe-area-inset-top, 0px) + 8px) 14px calc(env(safe-area-inset-bottom, 0px) + 12px); gap: 10px; background: var(--lom-ink); }
.lom-phead { display: flex; align-items: center; gap: 10px; font: 700 16px/1 Archivo, sans-serif; }
.lom-phead i { width: 18px; height: 18px; border-radius: 50%; background: var(--c); }
.lom-phead .lom-pclock { margin-left: auto; font: 800 22px/1 Fraunces, Georgia, serif; color: var(--lom-moon); }
.lom-guard { display: grid; justify-items: center; align-content: space-evenly; gap: 14px; }
.lom-dial { position: relative; width: min(74vw, 300px); aspect-ratio: 1; border-radius: 50%; border: 4px solid rgba(239, 228, 207, .35); background: radial-gradient(closest-side, #1d2536, #0d1119); touch-action: none; }
.lom-dial .lom-tv { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); font: 800 13px/1 Archivo, sans-serif; letter-spacing: .14em; color: var(--lom-moon); }
.lom-needle { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-origin: 0 0; }
.lom-needle::before { content: ''; position: absolute; left: -38px; top: -46%; width: 76px; height: 46%; }
.lom-needle::after { content: ''; position: absolute; left: -46px; bottom: 0; width: 92px; height: min(34vw, 140px); background: linear-gradient(0deg, rgba(240, 194, 122, .9), rgba(240, 194, 122, 0)); clip-path: polygon(45% 100%, 55% 100%, 100% 0, 0 0); }
.lom-dialhint { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font: 600 13px/1 Archivo, sans-serif; color: var(--lom-moon); }
.lom-gstatus { font: 700 16px/1.3 Archivo, sans-serif; text-align: center; min-height: 2.6em; max-width: 30ch; }
.lom-gstatus.hot { color: var(--lom-hot); animation: lom-pulse .6s ease-in-out infinite alternate; }
@keyframes lom-pulse { from { transform: scale(1); } to { transform: scale(1.05); } }
.lom-walk { width: min(80vw, 320px); padding: 26px 0; border-radius: 22px; border: 4px solid var(--lom-ink); background: var(--c, var(--lom-torch)); color: var(--lom-ink); display: grid; justify-items: center; gap: 2px; box-shadow: 0 8px 0 rgba(0, 0, 0, .55); touch-action: none; user-select: none; -webkit-user-select: none; }
.lom-walk b { font: 800 34px/1 Fraunces, Georgia, serif; } .lom-walk span { font: 700 13px/1 Archivo, sans-serif; opacity: .7; }
.lom-walk.on { transform: translateY(6px); box-shadow: 0 2px 0 rgba(0, 0, 0, .55); }
.lom-reset { background: transparent; border: 2px dashed rgba(239, 228, 207, .35); color: var(--lom-moon); border-radius: 12px; padding: 10px 14px; font: 600 14px/1.2 Archivo, sans-serif; }
.lom-reset.done { border-color: var(--lom-ok); color: var(--lom-ok); }
.lom-play.phone.lom-ontarget { box-shadow: inset 0 0 0 6px var(--lom-hot); }
.lom-burglar { display: grid; grid-template-rows: auto auto 1fr; gap: 10px; }
.lom-map { display: block; border-radius: 8px; box-shadow: 0 0 0 2px rgba(239, 228, 207, .2); }
.lom-meter { height: 10px; border-radius: 99px; background: rgba(239, 228, 207, .12); overflow: hidden; } .lom-meter i { display: block; height: 100%; background: var(--lom-hot); transform-origin: 0 50%; transform: scaleX(0); transition: transform .15s linear; }
.lom-binfo { font: 700 16px/1.3 Archivo, sans-serif; text-align: center; min-height: 1.3em; } .lom-binfo.hot { color: var(--lom-hot); }
.lom-stickzone { position: relative; min-height: 34vh; border-radius: 18px; background: rgba(239, 228, 207, .05); border: 2px solid rgba(239, 228, 207, .12); touch-action: none; overflow: hidden; }
.lom-stickhint { position: absolute; inset: auto 0 12px; text-align: center; font: 600 13px/1 Archivo, sans-serif; color: var(--lom-moon); }
.lom-ring, .lom-knob { position: absolute; left: 50%; top: 50%; border-radius: 50%; pointer-events: none; opacity: 0; }
.lom-ring { width: 150px; height: 150px; margin: -75px 0 0 -75px; border: 3px solid rgba(239, 228, 207, .35); }
.lom-knob { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: var(--lom-cream); box-shadow: 0 4px 0 rgba(0, 0, 0, .5); }
.lom-stickzone.on .lom-ring, .lom-stickzone.on .lom-knob { opacity: 1; } .lom-stickzone.run .lom-knob { background: var(--lom-hot); }
.lom-hide { position: absolute; right: 18px; bottom: calc(env(safe-area-inset-bottom, 0px) + 22px); width: 110px; height: 110px; border-radius: 50%; border: 4px solid var(--lom-ink); background: var(--lom-moon); color: var(--lom-ink); display: grid; place-content: center; justify-items: center; box-shadow: 0 6px 0 rgba(0, 0, 0, .55); z-index: 2; }
.lom-hide b { font: 800 20px/1 Fraunces, Georgia, serif; } .lom-hide span { font: 700 12px/1 Archivo, sans-serif; } .lom-hide:disabled { opacity: .35; }
.lom-watch { display: grid; place-items: center; font: 600 18px/1.4 Archivo, sans-serif; text-align: center; padding: 30px; }

/* ---------------------------------------------------------------- results, ledger, final */
.lom-done, .lom-board, .lom-final { display: grid; justify-items: center; align-content: center; gap: 14px; min-height: 100%; padding: 22px 16px; color: var(--lom-cream); text-align: center; }
.lom-done.bwin .lom-big { color: var(--lom-hot); } .lom-done.gwin .lom-big { color: var(--lom-torch); }
.lom-rows { display: grid; gap: 8px; width: min(440px, 92vw); }
.lom-row { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: baseline; padding: 10px 14px; border-radius: 10px; background: var(--lom-cream); color: var(--lom-ink); text-align: left; }
.lom-row b { font: 800 18px/1 Fraunces, Georgia, serif; } .lom-row span { font: 600 14px/1.2 Archivo, sans-serif; } .lom-row em { font: 600 12px/1 Archivo, sans-serif; font-style: normal; opacity: .7; }
.lom-row.g { box-shadow: inset 6px 0 0 var(--lom-torch); }
.lom-items { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 90vw; } .lom-items span { padding: 5px 10px; border-radius: 99px; background: rgba(224, 101, 79, .2); font: 600 13px/1 Archivo, sans-serif; }
.lom-ledger { border-collapse: collapse; width: min(460px, 94vw); font: 600 15px/1.2 Archivo, sans-serif; }
.lom-ledger td { padding: 8px 6px; border-bottom: 1px solid rgba(239, 228, 207, .15); text-align: left; }
.lom-ledger td.r { width: 2ch; color: var(--lom-moon); } .lom-ledger td.s { font-size: 12px; opacity: .7; } .lom-ledger td.p { text-align: right; font: 800 18px/1 Fraunces, Georgia, serif; color: var(--lom-torch); }
.lom-ledger tr.me td { color: var(--lom-torch); }
.lom-awards { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.lom-award { display: grid; justify-items: center; gap: 4px; padding: 14px 18px; border-radius: 12px; background: var(--lom-cream); color: var(--lom-ink); min-width: 180px; box-shadow: 0 5px 0 rgba(0, 0, 0, .5); }
.lom-award i { width: 34px; height: 34px; border-radius: 50%; background: var(--lom-torch); border: 3px solid var(--lom-ink); } .lom-award.thief i { background: var(--lom-hot); }
.lom-award b { font: 700 12px/1 Archivo, sans-serif; letter-spacing: .12em; text-transform: uppercase; } .lom-award span { font: 800 22px/1.05 Fraunces, Georgia, serif; } .lom-award em { font: 600 13px/1.2 Archivo, sans-serif; font-style: normal; opacity: .75; }
.lom-award.on { animation: lom-pop .5s cubic-bezier(.2, 1.5, .4, 1) both; outline: 4px solid var(--lom-torch); }
.lom-again { display: grid; gap: 10px; justify-items: center; }
.lom-done.tv .lom-big, .lom-board.tv .lom-big, .lom-final.tv .lom-big { font-size: 9vh; }
.lom-done.tv .lom-rows { width: 44vw; } .lom-done.tv .lom-row b { font-size: 3vh; } .lom-done.tv .lom-row span { font-size: 2.2vh; }
.lom-board.tv .lom-ledger, .lom-done.tv .lom-ledger, .lom-final.tv .lom-ledger { width: 44vw; font-size: 2.3vh; } .lom-final.tv .lom-ledger td.p { font-size: 3vh; }

/* ---------------------------------------------------------------- lobby */
.lom-lobby { display: grid; gap: 8px; padding: 14px; border-radius: 12px; background: rgba(13, 17, 25, .55); color: var(--lom-cream); }
.lom-lline { font: 700 16px/1.35 Archivo, sans-serif; } .lom-ltv { font: 700 14px/1.3 Archivo, sans-serif; color: var(--lom-torch); } .lom-lplan { font: 600 13px/1.3 Archivo, sans-serif; color: var(--lom-moon); }
.lom-lobby.tv { padding: 2vh 2vw; } .lom-lobby.tv .lom-lline { font-size: 2.6vh; } .lom-lobby.tv .lom-lplan, .lom-lobby.tv .lom-ltv { font-size: 2vh; }

@media (prefers-reduced-motion: reduce) { .lom-gstatus.hot, .lom-bn, .lom-award.on { animation: none; } }