/* =========================================================================
   emile_escape v2 — style. 0 dépendance, 0 font externe.
   ========================================================================= */
:root {
  --bg:#0d1117; --bg2:#161b22; --bg3:#21262d; --border:#30363d;
  --fg:#e6edf3; --dim:#8b949e; --green:#3fb950; --blue:#58a6ff; --pink:#f778ba;
  --red:#ff7b72; --yellow:#d29922; --purple:#a371f7;
  --radius:12px; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body {
  background: radial-gradient(1200px 600px at 50% -10%, #1b2430 0%, transparent 60%), var(--bg);
  color: var(--fg); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height:1.55; -webkit-font-smoothing:antialiased; min-height:100dvh;
}

/* ---------- OS bar ---------- */
#os-bar {
  position: fixed; top:0; left:0; right:0; z-index:70; height:34px;
  display:flex; align-items:center; gap:1rem; padding:0 .8rem;
  background: rgba(22,27,34,.92); backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border); font-family:var(--mono); font-size:.75rem; color:var(--dim);
}
.os-left { display:flex; align-items:center; gap:.5rem; white-space:nowrap; }
.os-apple { width:12px; height:12px; border-radius:50%; background:linear-gradient(135deg,var(--pink),var(--purple)); display:inline-block; }
.os-step { color:var(--green); }
.os-progress-wrap { flex:1; height:5px; background:var(--bg3); border-radius:3px; overflow:hidden; min-width:60px; }
#os-progress { height:100%; width:0; background:linear-gradient(90deg,var(--green),var(--blue)); transition:width .5s; }
.os-right { display:flex; align-items:center; gap:.7rem; }
.os-right button { background:none; border:0; cursor:pointer; font-size:.85rem; padding:0; }
.os-bat.low { color:var(--red); }
#os-clock { color:var(--fg); }
@media (max-width:600px){ .os-left b, .os-wifi { display:none; } #os-bar{ gap:.5rem; } }

/* ---------- scanlines + glitch ---------- */
#scanlines { position:fixed; inset:0; pointer-events:none; z-index:65;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px); }
#game.glitching { animation: glitchScreen .3s steps(2); }
@keyframes glitchScreen { 0%{transform:translate(0);filter:none} 25%{transform:translate(-3px,1px);filter:hue-rotate(30deg)} 50%{transform:translate(3px,-2px)} 75%{transform:translate(-2px,-1px);filter:hue-rotate(-20deg)} 100%{transform:translate(0)} }

/* ---------- toasts ---------- */
#toasts { position:fixed; top:44px; right:12px; z-index:68; display:flex; flex-direction:column; gap:.5rem; max-width:min(360px,80vw); }
.toast { background:var(--bg2); border:1px solid var(--border); border-left:3px solid var(--pink); border-radius:10px;
  padding:.6rem .8rem; font-size:.8rem; box-shadow:0 8px 24px rgba(0,0,0,.4);
  opacity:0; transform:translateX(30px); transition:opacity .35s, transform .35s; }
.toast.show { opacity:1; transform:none; }

/* ---------- layout ---------- */
#game { min-height:100dvh; display:grid; place-items:center; padding: 3.6rem 1rem 6rem; }
.screen { display:none; width:100%; max-width:620px; animation:fade .5s ease; }
.screen.active { display:block; }
@keyframes fade { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }

/* ---------- accueil ---------- */
.terminal-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:clamp(1.2rem,4vw,2rem); box-shadow:0 20px 60px rgba(0,0,0,.5); font-family:var(--mono); }
.tc-line { font-size:.9rem; margin-bottom:.35rem; color:var(--green); }
.tc-line.err { color:var(--red); } .tc-line.dim, .dim { color:var(--dim); } .tc-line b, .prompt b { color:var(--yellow); }
.tc-story { font-family:system-ui,sans-serif; color:var(--fg); margin:1.4rem 0; border-left:3px solid var(--border); padding-left:1rem; }
.tc-story p { margin-bottom:.8rem; } .tc-story .dim { font-size:.92rem; }
.btn-primary { font-family:var(--mono); background:var(--green); color:#06210f; border:0; padding:.9rem 1.3rem; border-radius:10px; font-size:1rem; font-weight:700; cursor:pointer; width:100%; transition:transform .12s, filter .12s; }
.btn-primary:hover { filter:brightness(1.1); transform:translateY(-2px); }

/* ---------- room header ---------- */
.room-head { margin-bottom:1rem; }
.badge { display:inline-block; font-family:var(--mono); font-size:.68rem; color:var(--dim); background:var(--bg3); border:1px solid var(--border); padding:.25rem .6rem; border-radius:999px; letter-spacing:.02em; }
.room-head h1 { font-size:clamp(1.35rem,5vw,1.8rem); margin-top:.6rem; line-height:1.2; }
.prompt { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem 1.2rem; margin-bottom:1.2rem; color:#cdd6e0; }
.prompt b { color:var(--fg); }
.hint { color:var(--dim); font-size:.85rem; text-align:center; margin-top:.5rem; }

/* ---------- réponse générique ---------- */
.answer-row { display:flex; gap:.6rem; } .answer-row.center { justify-content:center; }
.answer-input { flex:1; min-width:0; background:var(--bg); border:1px solid var(--border); border-radius:10px; color:var(--fg); padding:.8rem 1rem; font-size:1rem; font-family:var(--mono); }
.answer-input:focus { outline:2px solid var(--blue); border-color:var(--blue); }
.answer-input.bad { border-color:var(--red); outline:1px solid var(--red); }
.answer-submit, .captcha-verify, .cookie-accept, .cookie-refuse { background:var(--bg3); color:var(--fg); border:1px solid var(--border); border-radius:10px; padding:.8rem 1.1rem; font-size:.95rem; font-weight:600; cursor:pointer; white-space:nowrap; transition:filter .12s, transform .12s; }
.answer-submit:hover, .captcha-verify:hover { filter:brightness(1.3); }
.answer-submit:active { transform:scale(.97); }
.feedback { margin-top:.8rem; font-weight:600; min-height:1.2em; text-align:center; }
.feedback.ok { color:var(--green); } .feedback.ko { color:var(--red); }
.feedback.shake { animation:shake .4s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-6px)} 80%{transform:translateX(6px)} }

/* ---------- 1 cookies ---------- */
.cookie-banner { position:relative; background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:1.2rem; min-height:210px; }
.cookie-banner>p { color:var(--dim); font-size:.9rem; margin-bottom:1rem; } .cookie-banner b { color:var(--yellow); }
.cookie-btns { display:flex; gap:.8rem; flex-wrap:wrap; }
.cookie-accept { background:var(--green); color:#06210f; border:0; font-size:1.15rem; padding:1rem 1.8rem; flex:1; }
.cookie-refuse { font-size:.8rem; opacity:.8; }
.cookie-escape { display:none; position:absolute; left:1.2rem; bottom:.6rem; color:var(--dim); font-size:.78rem; text-decoration:underline; }
.cookie-escape.show { display:inline; animation:fade .6s ease; }

/* ---------- 2 slack ---------- */
.slack-panel { display:flex; background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.slack-side { background:#3f0e40; color:#e6d9e6; padding:.7rem; font-size:.8rem; min-width:130px; }
.slack-ws { font-weight:800; margin-bottom:.6rem; color:#fff; }
.slack-ch { padding:.2rem .3rem; border-radius:6px; opacity:.85; } .slack-ch.active { background:#1164a3; color:#fff; opacity:1; }
.slack-main { flex:1; padding:1.1rem; min-width:0; }
.slack-user { display:flex; align-items:center; gap:.5rem; font-weight:700; margin-bottom:1rem; flex-wrap:wrap; }
.slack-dot { width:10px; height:10px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); }
.slack-status-line { font-weight:400; color:var(--dim); font-size:.85rem; }
@media (max-width:520px){ .slack-side{ display:none; } }

/* ---------- 3 scramble/captcha ---------- */
.scramble { font-family:var(--mono); font-size:clamp(1.8rem,8vw,2.8rem); letter-spacing:.35rem; text-align:center; color:var(--yellow); background:var(--bg2); border:1px dashed var(--border); border-radius:var(--radius); padding:1.4rem; margin-bottom:1.2rem; }
.captcha { background:#fff; color:#202124; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); }
.captcha-head { background:var(--blue); color:#fff; padding:1rem; font-size:.95rem; }
.captcha-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:#dadce0; }
.captcha-cell { aspect-ratio:1.6; border:0; background:#fff; font-size:clamp(1.4rem,7vw,2rem); cursor:pointer; }
.captcha-cell.sel { box-shadow:inset 0 0 0 4px var(--blue); }
.captcha-foot { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem; flex-wrap:wrap; }
.captcha-human { display:flex; align-items:center; gap:.6rem; cursor:pointer; color:#202124; font-size:.92rem; user-select:none; }
.captcha-human input { position:absolute; opacity:0; width:0; height:0; }
.captcha-human span { width:22px; height:22px; border:2px solid #c1c1c1; border-radius:3px; display:inline-block; position:relative; background:#fff; }
.captcha-human input:checked + span { background:var(--green); border-color:var(--green); }
.captcha-human input:checked + span::after { content:"✓"; color:#fff; position:absolute; inset:0; display:grid; place-items:center; font-size:15px; font-weight:900; }
.captcha .captcha-verify { background:var(--blue); color:#fff; border:0; }
.captcha .feedback { padding:0 1rem 1rem; text-align:left; color:var(--red); }

/* ---------- 5 bureau ---------- */
.bureau { display:grid; gap:.8rem; background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem; }
.bfield { display:flex; flex-direction:column; gap:.35rem; font-weight:600; font-size:.9rem; }
.bfield span { color:var(--dim); font-weight:400; font-size:.78rem; }
.brow { display:flex; gap:.6rem; }
.bfield select { flex:1; background:var(--bg); border:1px solid var(--border); border-radius:10px; color:var(--fg); padding:.7rem; font-family:var(--mono); }
.bureau-submit { margin-top:.4rem; }

/* ---------- 7 fork ---------- */
.fork-filtwrap { display:inline-flex; align-items:center; gap:.5rem; background:var(--bg3); border:1px solid var(--border); border-radius:999px; padding:.4rem .9rem; margin-bottom:1rem; cursor:pointer; font-weight:600; }
.fork-list { display:grid; gap:.6rem; }
.resto { text-align:left; background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:.9rem 1rem; color:var(--fg); cursor:pointer; display:flex; justify-content:space-between; gap:.6rem; align-items:center; font-size:.95rem; }
.resto:hover { border-color:var(--blue); }
.resto .tag { color:var(--dim); font-size:.78rem; white-space:nowrap; }
.fork-list.only-veg .resto:not(.veg) { display:none; }

/* ---------- 8 vigenère ---------- */
.vig { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:1.2rem; margin-bottom:1.1rem; }
.vig-cipher { font-family:var(--mono); font-size:clamp(1.1rem,5vw,1.5rem); text-align:center; color:var(--red); letter-spacing:.15em; margin-bottom:1rem; }
.vig-keyrow { display:flex; align-items:center; gap:.6rem; font-size:.85rem; color:var(--dim); margin-bottom:1rem; }
.vig-key { flex:1; background:var(--bg); border:1px solid var(--border); border-radius:8px; color:var(--fg); padding:.5rem .7rem; font-family:var(--mono); }
.vig-output { font-family:var(--mono); font-size:clamp(1.1rem,5vw,1.4rem); text-align:center; color:var(--green); letter-spacing:.05em; min-height:2rem; word-break:break-word; }

/* ---------- 9 chat ---------- */
.chat { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; margin-bottom:1rem; }
.chat-msg { font-size:.9rem; padding:.3rem 0; } .chat-msg b { color:var(--blue); margin-right:.4rem; }
.chat-err { margin-top:.6rem; font-family:var(--mono); font-size:.82rem; color:var(--red); background:rgba(255,123,114,.1); border:1px solid rgba(255,123,114,.35); border-radius:8px; padding:.6rem; }
.chat-fallback { display:none; margin-top:1rem; } .chat-fallback.show { display:block; animation:fade .5s; }

/* ---------- 10 org ---------- */
.org { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem; margin-bottom:1rem; }
.org-depth { font-family:var(--mono); font-size:.78rem; color:var(--yellow); margin-bottom:.8rem; }
.org-tree { display:grid; gap:.5rem; }
.org-node { display:flex; justify-content:space-between; align-items:center; gap:.6rem; text-align:left; background:var(--bg3); border:1px solid var(--border); border-radius:10px; padding:.8rem 1rem; color:var(--fg); cursor:pointer; font-size:.95rem; }
.org-node:hover { border-color:var(--blue); } .org-arrow { color:var(--dim); font-size:.75rem; }

/* ---------- 12 lock layer 2 ---------- */
.lock-layer2 { display:none; margin-top:1.2rem; } .lock-layer2.show { display:block; animation:fade .5s; }

/* ---------- messages code ---------- */
.msg code, .prompt code, .ticket code, .chat code { font-family:var(--mono); background:var(--bg); padding:.1rem .4rem; border-radius:5px; color:var(--green); }

/* ---------- 6 feed ---------- */
.feed { max-height:260px; overflow-y:auto; background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:.6rem; margin-bottom:1.1rem; }
.msg { padding:.45rem .6rem; border-radius:8px; font-size:.9rem; } .msg + .msg { margin-top:.2rem; }
.msg b { color:var(--blue); margin-right:.4rem; } .msg.gif { color:var(--dim); font-style:italic; }
.msg.pin { background:rgba(210,153,34,.12); border:1px solid rgba(210,153,34,.4); } .msg.pin b { color:var(--yellow); }

/* ---------- inventaire ---------- */
#inventory { position:fixed; left:0; right:0; bottom:0; display:none; align-items:center; justify-content:center; gap:.4rem; flex-wrap:wrap; padding:.7rem 1rem; background:rgba(13,17,23,.92); border-top:1px solid var(--border); backdrop-filter:blur(8px); z-index:50; }
#inventory.show { display:flex; }
.inv-label { font-family:var(--mono); font-size:.7rem; color:var(--dim); text-transform:uppercase; letter-spacing:.1em; margin-right:.4rem; }
.tile { font-family:var(--mono); font-weight:700; font-size:1.1rem; width:2.1rem; height:2.1rem; display:grid; place-items:center; background:var(--bg3); border:1px solid var(--border); border-radius:8px; color:var(--yellow); }
.tile.pop { animation:pop .6s ease; }
@keyframes pop { 0%{transform:scale(0) rotate(-20deg);opacity:0} 60%{transform:scale(1.35) rotate(8deg)} 100%{transform:scale(1)} }

/* =========================================================================
   FINALE
   ========================================================================= */
#screen-final.active { display:flex; flex-direction:column; align-items:center; min-height:60vh; }
.bsod { position:fixed; inset:0; z-index:100; background:#0b5ed7; color:#fff; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:clamp(1.5rem,8vw,6rem); gap:.8rem; animation:glitchScreen .18s steps(2) 4; }
.bsod-face { font-size:clamp(3rem,14vw,6rem); font-weight:300; } .bsod b { font-family:var(--mono); } .bsod-sub { opacity:.8; font-size:.9rem; }
.bsod-bar { width:min(360px,80%); height:8px; background:rgba(255,255,255,.25); border-radius:4px; overflow:hidden; margin-top:1rem; }
.bsod-bar span { display:block; height:100%; width:0; background:#fff; animation:load 2s ease forwards; }
@keyframes load { to { width:100%; } }

/* faces reel */
.faces { text-align:center; }
.faces-cap { font-family:var(--mono); color:var(--blue); margin-bottom:1rem; }
.faces-stage { position:relative; width:min(320px,80vw); height:min(320px,80vw); margin:0 auto; }
.faces-stage img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:16px; border:2px solid var(--border); opacity:0; transform:scale(1.05); transition:opacity .3s, transform .5s; }
.faces-stage img.on { opacity:1; transform:scale(1); }
.faces-tag { position:absolute; bottom:.6rem; left:50%; transform:translateX(-50%); background:rgba(0,0,0,.7); padding:.3rem .7rem; border-radius:999px; font-size:.8rem; font-family:var(--mono); white-space:nowrap; }
.faces.fade-out { transition:opacity .7s; opacity:0; }

/* git log */
.gitlog { font-family:var(--mono); color:var(--green); background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:1.2rem; width:100%; max-width:600px; max-height:60vh; overflow:auto; white-space:pre-wrap; font-size:.82rem; line-height:1.7; }
.gitlog .prompt { background:none; border:0; padding:0; color:var(--blue); } .gitlog.fade-out { transition:opacity .8s; opacity:0; }

/* galerie */
.confetti { position:fixed; inset:0; pointer-events:none; z-index:40; }
.gallery { width:100%; max-width:640px; text-align:center; position:relative; z-index:45; }
.gallery-grid { display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; align-items:center; transition:gap .8s; }
.cam { width:110px; opacity:0; transform:scale(.6); transition:opacity .5s, transform .5s, width .8s; background:var(--bg2); border:2px solid var(--border); border-radius:12px; overflow:hidden; padding-bottom:.4rem; }
.cam.on { opacity:1; transform:scale(1); }
.cam img, .cam .avatar-fallback { width:100%; aspect-ratio:1; object-fit:cover; display:block; }
.avatar-fallback { display:grid; place-items:center; font-size:2.2rem; font-weight:800; color:#fff; }
.cam figcaption { font-size:.74rem; font-weight:700; padding:.35rem .3rem 0; } .cam figcaption small { display:block; font-weight:400; color:var(--dim); font-size:.64rem; margin-top:.15rem; }
.gallery-grid.circle { gap:.4rem; } .gallery-grid.circle .cam { width:62px; } .gallery-grid.circle .cam figcaption small { display:none; }
.gallery-center { opacity:0; transform:translateY(10px); transition:opacity .8s, transform .8s; margin-top:1.5rem; } .gallery-center.on { opacity:1; transform:none; }
.gallery-center .group { max-width:260px; border-radius:14px; border:2px solid var(--border); margin-bottom:1rem; }
.handwritten { font-size:clamp(1.3rem,6vw,1.9rem); color:var(--pink); font-style:italic; font-family:"Segoe Script","Bradley Hand",cursive; }

/* reveal */
.reveal { opacity:0; transform:translateY(20px); transition:opacity .8s, transform .8s; width:100%; max-width:460px; text-align:center; margin-top:2rem; z-index:45; } .reveal.on { opacity:1; transform:none; }
.flip { perspective:1200px; cursor:pointer; }
.flip-inner { position:relative; transform-style:preserve-3d; transition:transform .9s cubic-bezier(.2,.8,.2,1); min-height:600px; }
.flip.open .flip-inner { transform:rotateY(180deg); }
.flip-front, .flip-back { backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:16px; border:1px solid var(--border); padding:1.6rem; }
.flip-front { background:linear-gradient(135deg,var(--purple),var(--pink)); color:#fff; font-size:3.4rem; display:flex; flex-direction:column; align-items:center; gap:.6rem; min-height:600px; justify-content:center; }
.flip-front span { font-size:1rem; font-weight:700; } .flip-front small { font-weight:400; opacity:.85; font-size:.8rem; }
.flip-back { position:absolute; inset:0; transform:rotateY(180deg); background:var(--bg2); display:flex; flex-direction:column; gap:.7rem; align-items:center; justify-content:center; }
.flip-back h2 { font-size:1.3rem; color:var(--yellow); }
.counter { font-family:var(--mono); font-size:2.6rem; font-weight:800; color:var(--green); } .counter.bounce { animation:pop .5s ease; }
.pot-label { color:var(--dim); font-size:.85rem; margin-bottom:-.2rem; }
.counter.struck { text-decoration:line-through; text-decoration-color:var(--red); text-decoration-thickness:3px; color:var(--dim); font-size:1.7rem; opacity:.65; text-shadow:none; transition:font-size .4s, opacity .4s; }
.counter-real { font-family:var(--mono); font-size:3rem; font-weight:800; color:var(--green); text-shadow:0 0 16px rgba(63,185,80,.75); display:none; }
.counter-real.show { display:block; animation:pop .55s ease; }
.axp { color:var(--dim); font-size:.8rem; margin-top:-.4rem; }
.ticket { background:var(--bg); border:1px dashed var(--border); border-radius:12px; padding:1rem; width:100%; }
.ticket-stamp { font-family:var(--mono); color:var(--green); border:2px solid var(--green); border-radius:8px; padding:.3rem; transform:rotate(-3deg); display:inline-block; font-size:.8rem; margin-bottom:.6rem; }
.ticket-venue { font-weight:700; } .ticket-code { font-size:.9rem; margin:.5rem 0; }
.copy { background:var(--bg3); color:var(--fg); border:1px solid var(--border); border-radius:6px; padding:.15rem .5rem; font-size:.78rem; cursor:pointer; margin-left:.3rem; }
.cta { display:inline-block; margin-top:.6rem; background:var(--green); color:#06210f; font-weight:800; text-decoration:none; padding:.7rem 1.4rem; border-radius:10px; }
.signed { font-size:.82rem; color:var(--dim); margin-top:.4rem; }
.replay { margin-top:1.5rem; background:none; border:1px solid var(--border); color:var(--dim); border-radius:8px; padding:.5rem 1rem; cursor:pointer; font-size:.85rem; }

/* ---------- ⭐ secret overlay ---------- */
#secret { position:fixed; inset:0; z-index:120; background:rgba(0,0,0,.8); display:none; place-items:center; padding:1rem; }
#secret.show { display:grid; animation:fade .3s; }
.secret-box { position:relative; background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; max-width:440px; width:100%; }
#secret-close { position:absolute; top:.6rem; right:.8rem; background:none; border:0; color:var(--dim); font-size:1.1rem; cursor:pointer; }
.secret-box h3 { font-family:var(--mono); font-size:.95rem; margin-bottom:.5rem; color:var(--pink); }
.secret-img { height:120px; border-radius:10px; margin:1rem 0; display:grid; place-items:center;
  background:linear-gradient(135deg,#1a1f27,#232a34); border:1px solid var(--border); overflow:hidden; }
#secret-hidden { font-family:var(--mono); font-size:.82rem; line-height:1.4; text-align:center; padding:0 .8rem; color:#5a6270; opacity:.04; }

/* ---------- responsive ---------- */
@media (max-width:480px){ .cookie-accept{font-size:1rem;} .answer-row{flex-direction:column;} .answer-submit{width:100%;} .cam{width:88px;} .captcha-cell{aspect-ratio:1;} }
@media (prefers-reduced-motion:reduce){ *{animation-duration:.001s!important; transition-duration:.001s!important;} }

/* =========================================================================
   v3 additions — chat widget, room photos, harder-step components
   ========================================================================= */

/* live chat / hint bot */
#chat { position:fixed; right:12px; bottom:4.4rem; z-index:55; width:min(300px,86vw); background:var(--bg2); border:1px solid var(--border); border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,.5); overflow:hidden; display:flex; flex-direction:column; max-height:min(340px,48vh); transition:box-shadow .3s; }
#chat.collapsed #chat-msgs { display:none; }
#chat.flash { box-shadow:0 0 0 2px var(--pink); }
#chat-head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.5rem .7rem; background:#3f0e40; color:#fff; cursor:pointer; font-size:.8rem; font-weight:700; }
#chat-badge { display:none; width:8px; height:8px; border-radius:50%; background:var(--red); }
#chat-badge.show { display:inline-block; }
#chat-ask { background:rgba(255,255,255,.16); border:0; color:#fff; border-radius:6px; padding:.25rem .55rem; font-size:.72rem; cursor:pointer; white-space:nowrap; }
#chat-ask:hover { background:rgba(255,255,255,.28); }
#chat-msgs { overflow-y:auto; padding:.5rem; display:flex; flex-direction:column; gap:.35rem; }
.cmsg { font-size:.78rem; line-height:1.35; background:var(--bg3); border-radius:8px; padding:.35rem .5rem; }
.cmsg b { color:var(--blue); margin-right:.3rem; }
.cmsg.hint { background:rgba(210,153,34,.14); border:1px solid rgba(210,153,34,.4); }
.cmsg.ok { background:rgba(63,185,80,.12); }
@media (max-width:560px){ #chat{ bottom:4rem; max-height:38vh; width:min(280px,80vw); } }

/* photo per step */
.room-photo { margin:0 0 1.1rem; border-radius:12px; overflow:hidden; border:1px solid var(--border); position:relative; }
.room-photo img { width:100%; max-height:200px; object-fit:cover; display:block; }
.room-photo figcaption { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(transparent, rgba(0,0,0,.78)); color:#fff; font-size:.8rem; padding:1.4rem .7rem .5rem; font-style:italic; }

/* 1 cookie partners */
.partners { display:grid; grid-template-columns:1fr 1fr; gap:.35rem .8rem; margin:.8rem 0 1rem; }
.partners label { display:flex; align-items:center; gap:.45rem; font-size:.82rem; color:var(--dim); cursor:pointer; }
.partners input { accent-color:var(--green); }
@media (max-width:480px){ .partners{ grid-template-columns:1fr; } }

/* 2 cryptic */
.cryptic { display:inline-block; font-family:var(--mono); color:var(--yellow); background:var(--bg); padding:.5rem .8rem; border-radius:8px; border:1px solid var(--border); }

/* 4 ROT wheel */
.rot { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:1.2rem; margin-bottom:1.1rem; }
.rot-controls { display:flex; align-items:center; gap:1rem; margin:.8rem 0; }
.rot-wheel { flex:1; accent-color:var(--pink); height:26px; }
.rot-val { font-family:var(--mono); color:var(--dim); min-width:4.5rem; text-align:right; }
.rot-output { font-family:var(--mono); font-size:clamp(1.1rem,5vw,1.4rem); text-align:center; color:var(--green); letter-spacing:.05em; min-height:2rem; }

/* 5 CC field */
.bfield.cc { flex-direction:row; align-items:center; gap:.5rem; font-size:.85rem; color:var(--yellow); cursor:pointer; }
.bfield.cc input { accent-color:var(--green); }

/* 7 fork filters */
.fork-filters { display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1rem; }
.fork-filters label { display:inline-flex; align-items:center; gap:.4rem; background:var(--bg3); border:1px solid var(--border); border-radius:999px; padding:.4rem .8rem; cursor:pointer; font-size:.85rem; font-weight:600; }
.fork-filters input { accent-color:var(--green); }

/* =========================================================================
   v4 — scattered photo patchwork + neon offbeat look
   ========================================================================= */
:root { --neon-pink:#ff2e97; --neon-cyan:#05d9e8; --neon-purple:#b537f2; }

/* neon-tinted background blobs + a faint grid */
body {
  background:
    radial-gradient(760px 460px at 12% 8%,  rgba(181,55,242,.14), transparent 60%),
    radial-gradient(760px 460px at 88% 92%, rgba(5,217,232,.12), transparent 60%),
    radial-gradient(700px 420px at 90% 4%,  rgba(255,46,151,.10), transparent 60%),
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px) 0 0/100% 44px,
    var(--bg);
}

/* keep interactive content above the photo layer */
#game { position:relative; z-index:10; }
#screen-final.active { position:relative; z-index:10; }

/* scattered photos — full image, angled, neon-framed, accumulating */
#scatter { position:fixed; inset:0; z-index:38; pointer-events:none; overflow:hidden; }
.scatter-photo {
  position:absolute; height:auto; max-height:40vh; display:block; pointer-events:auto; cursor:zoom-in;
  border:5px solid #0e1117; border-radius:6px;
  box-shadow:0 0 0 2px var(--neon-pink), 0 0 22px rgba(255,46,151,.45), 0 12px 34px rgba(0,0,0,.65);
  opacity:0; animation:scatterIn .6s ease forwards; transition:transform .15s;
}
.scatter-photo:hover { transform:scale(1.06) rotate(0deg) !important; z-index:5; }
/* on small screens the puzzle card fills the width → drop photos behind so they never block it */
@media (max-width:900px){ #scatter{ z-index:2; } .scatter-photo{ pointer-events:none; cursor:default; } }

/* fullscreen photo viewer */
#lightbox { position:fixed; inset:0; z-index:200; display:none; place-items:center; background:rgba(0,0,0,.9); padding:2rem; cursor:zoom-out; }
#lightbox.show { display:grid; animation:fade .25s; }
#lightbox img { max-width:94vw; max-height:90vh; border-radius:8px; box-shadow:0 0 0 3px var(--neon-cyan), 0 0 40px rgba(5,217,232,.5); }

/* 1 · the real exit mouse — hides anywhere on the page */
.cookie-mouse { display:none; position:fixed; z-index:60; font-size:1.5rem; background:none; border:0; cursor:pointer; padding:.2rem; opacity:.8; filter:drop-shadow(0 0 5px var(--neon-pink)); animation:mouseWiggle 1.4s ease-in-out infinite; }
.cookie-mouse.show { display:inline-block; }
.cookie-mouse:hover { opacity:1; transform:scale(1.3); }
@keyframes mouseWiggle { 0%,100%{transform:rotate(-8deg) scale(1)} 50%{transform:rotate(8deg) scale(1.12)} }

/* 4 · reset feedback */
.rot-wheel.snap { animation:snapBack .25s; }
@keyframes snapBack { 0%{filter:none} 50%{filter:hue-rotate(300deg) brightness(1.4)} 100%{filter:none} }

/* 6 · leak note */
.leak-note { background:var(--bg2); border:1px solid rgba(210,153,34,.4); border-radius:12px; padding:1rem; margin-bottom:1.1rem; font-size:.92rem; box-shadow:0 0 16px rgba(210,153,34,.12); }

/* 7 · restaurant menus */
.resto-card { background:var(--bg2); border:1px solid var(--border); border-radius:10px; margin-bottom:.6rem; overflow:hidden; }
.resto-head { width:100%; text-align:left; background:none; border:0; color:var(--fg); padding:.85rem 1rem; cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-size:.95rem; }
.resto-head .tag { color:var(--dim); font-size:.8rem; }
.resto-menu { display:none; padding:0 1rem 1rem; }
.resto-card.open .resto-menu { display:block; animation:fade .3s; }
.resto-menu ul { list-style:none; margin:.4rem 0 .8rem; padding:0; }
.resto-menu li { padding:.25rem 0; font-size:.9rem; border-bottom:1px solid var(--border); }
.resto-menu li em { color:var(--red); font-style:normal; font-size:.8rem; }
.resto-confirm { background:var(--bg3); color:var(--fg); border:1px solid var(--border); border-radius:8px; padding:.55rem 1rem; cursor:pointer; font-weight:600; font-size:.85rem; }

/* 10 · org clue */
.org-clue { color:var(--yellow); font-size:.9rem; margin:.4rem 0 .9rem; text-shadow:0 0 10px rgba(210,153,34,.3); }

/* 12 · layer 3 */
.lock-layer3 { display:none; margin-top:1.2rem; }
.lock-layer3.show { display:block; animation:fade .5s; }

/* =========================================================================
   v6 — real-escape-room: keys, nav, lightbox secrets, invisible text, padlock
   ========================================================================= */
/* OS: keys counter + git-log nav */
#os-keys { color:var(--yellow); text-shadow:0 0 8px rgba(210,153,34,.5); cursor:default; }
#os-keys.ding { animation:pop .5s ease; }
#os-nav { background:rgba(255,255,255,.08); border:0; color:var(--green); border-radius:6px; padding:.15rem .5rem; font-family:var(--mono); font-size:.72rem; cursor:pointer; margin-left:.4rem; }
#os-nav:hover { background:rgba(255,255,255,.18); }
#nav-menu { display:none; position:fixed; top:36px; left:.8rem; z-index:72; background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:.4rem; box-shadow:0 12px 40px rgba(0,0,0,.6); max-height:60vh; overflow:auto; }
#nav-menu.show { display:block; animation:fade .2s; }
#nav-menu button { display:block; width:100%; text-align:left; background:none; border:0; color:var(--fg); font-family:var(--mono); font-size:.8rem; padding:.35rem .6rem; border-radius:6px; cursor:pointer; white-space:nowrap; }
#nav-menu button:hover { background:var(--bg3); color:var(--green); }

/* lightbox secrets: post-it + take-the-key */
#lb-secret { position:absolute; inset:0; pointer-events:none; }
#lb-secret > * { pointer-events:auto; }
.postit { position:absolute; top:8%; left:50%; transform:translateX(-50%) rotate(-3deg); background:#fef08a; color:#1a1a1a; padding:1rem 1.4rem; border-radius:2px; box-shadow:0 8px 24px rgba(0,0,0,.6); font-family:var(--mono); text-align:center; max-width:80vw; }
.postit small { display:block; font-size:.7rem; color:#555; margin-bottom:.3rem; }
.postit b { font-size:1.4rem; letter-spacing:.1em; }
.lb-key { position:absolute; bottom:8%; left:50%; transform:translateX(-50%); background:var(--yellow); color:#1a1a1a; border:0; border-radius:10px; padding:.8rem 1.4rem; font-size:1.05rem; font-weight:800; cursor:pointer; box-shadow:0 0 24px rgba(210,153,34,.8); animation:pop .5s ease; }

/* draggable sticky note hiding 🗝️2 */
#drag-note { position:fixed; right:18px; bottom:8.5rem; z-index:58; width:64px; height:64px; background:linear-gradient(135deg,#fef08a,#fde047); color:#1a1a1a; border-radius:4px; box-shadow:0 6px 18px rgba(0,0,0,.5); display:grid; place-items:center; font-size:1.4rem; cursor:grab; transform:rotate(-6deg); user-select:none; touch-action:none; }
#drag-note small { position:absolute; bottom:2px; font-size:.5rem; opacity:.6; }
#drag-note.grabbing { cursor:grabbing; }
#drag-key { position:fixed; right:22px; bottom:9rem; z-index:57; font-size:1.6rem; display:none; cursor:pointer; filter:drop-shadow(0 0 8px var(--yellow)); animation:mouseWiggle 1.2s ease-in-out infinite; }
#drag-key.show { display:block; }
@media (max-width:900px){ #drag-note{ bottom:auto; top:44px; right:8px; } #drag-key{ bottom:auto; top:48px; right:12px; } }

/* invisible text (revealed by selection) */
.invisible-box { background:var(--bg2); border:1px dashed var(--border); border-radius:10px; padding:1rem; margin-bottom:1.1rem; min-height:2.5rem; }
.invisible-text { color:var(--bg2); user-select:text; }
.invisible-box .invisible-text { color:var(--bg2); }
.redacted { background:#000; color:#000; padding:0 .3rem; border-radius:3px; user-select:none; }
::selection { background:var(--neon-pink); color:#fff; }
#intro-key { color:var(--bg2); cursor:pointer; }
#intro-key:hover { color:var(--yellow); }

/* captcha near-invisible dots */
.captcha-cell { position:relative; }
.captcha-cell.dot::after { content:''; position:absolute; right:5px; bottom:5px; width:5px; height:5px; border-radius:50%; background:#000; opacity:.06; }
.captcha-cell.dot:hover::after { opacity:.5; background:var(--blue); }

/* L15 vault (was padlock) */
.padbox { display:grid; gap:.8rem; background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem; margin-bottom:1.1rem; }
.pad-strip { font-family:var(--mono); background:var(--bg); border-radius:8px; padding:.7rem; text-align:center; letter-spacing:.2em; }
.pad-log { font-size:1.3rem; line-height:1.8; background:var(--bg); border-radius:8px; padding:.7rem; }
.pad-log b { font-size:.8rem; color:var(--dim); font-family:var(--mono); }
.pad-bellrow { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.pad-bell { background:var(--bg3); color:var(--fg); border:1px solid var(--border); border-radius:8px; padding:.5rem 1rem; cursor:pointer; font-size:.95rem; }
.pad-dots { font-size:1.4rem; color:var(--green); letter-spacing:.2em; min-height:1.4rem; }

/* =========================================================================
   v7.1 — Regis takeover: villain, jumpscare, flashlight, arcade levels
   ========================================================================= */
.regis { color:var(--red); text-shadow:0 0 8px rgba(255,46,151,.7); }
.cmsg.regis { background:rgba(255,46,151,.12); border:1px solid rgba(255,46,151,.5); }
.cmsg.regis b { color:var(--red); }

/* jumpscare */
#jumpscare { position:fixed; inset:0; z-index:210; display:none; place-items:center; background:#200; }
#jumpscare.show { display:grid; animation:scareShake .15s steps(2) 3; }
#jumpscare img { width:min(60vw,400px); filter:contrast(2.4) saturate(2) hue-rotate(-40deg) brightness(1.2); border:4px solid var(--red); border-radius:8px; }
#jumpscare span { position:absolute; bottom:12%; font-family:var(--mono); font-size:2rem; color:var(--red); letter-spacing:.4em; text-shadow:0 0 14px var(--red); }
@keyframes scareShake { 0%{transform:translate(0)} 25%{transform:translate(-10px,6px)} 50%{transform:translate(8px,-8px)} 75%{transform:translate(-6px,-4px)} 100%{transform:translate(0)} }
/* jumpscare variants — different fullscreen effects */
#jumpscare.v-red { background:#300; }
#jumpscare.v-glitch { background:#001a05; animation:jsGlitch .09s steps(2) 7; }
#jumpscare.v-glitch img { border-color:var(--green); }
#jumpscare.v-zoom { background:#000; animation:none; }
#jumpscare.v-zoom img { animation:jsZoom .5s cubic-bezier(.2,.9,.2,1); }
#jumpscare.v-strobe { animation:jsStrobe .07s steps(2) 9; }
#jumpscare.v-strobe span { color:#000; text-shadow:none; mix-blend-mode:difference; }
@keyframes jsGlitch { 0%{transform:translate(0)} 20%{transform:translate(-14px,8px) skewX(6deg)} 40%{transform:translate(12px,-10px)} 60%{transform:translate(-8px,-6px) skewX(-4deg)} 80%{transform:translate(10px,4px)} 100%{transform:translate(0)} }
@keyframes jsZoom { 0%{transform:scale(.15);opacity:0} 60%{transform:scale(1.12)} 100%{transform:scale(1);opacity:1} }
@keyframes jsStrobe { 0%{background:#000} 50%{background:#fff} 100%{background:#000} }

/* flashlight (L2, L14) */
#flash { position:fixed; inset:0; z-index:42; pointer-events:none; display:none; background:radial-gradient(circle 130px at var(--mx,50%) var(--my,50%), transparent 0, transparent 85px, rgba(0,0,0,.985) 150px); }
body.flashlight #flash { display:block; }

/* L1 cookie popups + flee */
.popups { position:relative; min-height:0; }
.popups .popup { position:absolute; background:#fff; color:#111; border-radius:8px; padding:.5rem .7rem; font-size:.8rem; box-shadow:0 6px 20px rgba(0,0,0,.5); z-index:5; }
.popups .popup .pk { margin-left:.5rem; border:0; background:#eee; border-radius:4px; cursor:pointer; padding:0 .4rem; }
.cookie-form { display:none; }
.cookie-form.show { display:block; animation:fade .4s; }
.partners .locked { color:var(--yellow); }
.cookie-accept { position:relative; }

/* L4 Simon (team-named, shuffling) */
.simon-board { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; max-width:360px; margin:0 auto 1.2rem; }
.simon-pad { aspect-ratio:1.5; border:2px solid rgba(0,0,0,.3); border-radius:14px; cursor:pointer; opacity:.6; transition:opacity .12s, box-shadow .12s, filter .12s; font-weight:800; color:#0d1117; font-size:1rem; text-shadow:0 1px 2px rgba(255,255,255,.4); }
.simon-pad.lit { opacity:1; box-shadow:0 0 30px #fff; filter:brightness(1.6) saturate(1.3); }

/* L6 horror countdown */
.countdown { font-family:var(--mono); font-size:2.4rem; font-weight:800; text-align:center; color:var(--green); margin-bottom:1rem; }
.room.panic .countdown { color:var(--red); animation:cdPulse .5s ease-in-out infinite; }
.room.panic { animation:redPulse 1s ease-in-out infinite; border-radius:16px; }
@keyframes cdPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }
@keyframes redPulse { 0%,100%{box-shadow:inset 0 0 0 rgba(255,0,0,0)} 50%{box-shadow:inset 0 0 120px rgba(255,0,0,.35)} }

/* L8 stealth */
.stealth { border:1px solid var(--border); border-radius:12px; overflow:hidden; margin-bottom:1rem; background:var(--bg2); }
.stealth-wall { height:46px; background:repeating-linear-gradient(45deg,#3a1020,#3a1020 8px,#511526 8px,#511526 16px); }
.stealth-lane { display:flex; align-items:stretch; height:70px; }
.stealth-start { display:grid; place-items:center; width:110px; background:rgba(88,166,255,.2); font-size:.8rem; font-weight:700; cursor:pointer; }
.stealth-mid { flex:1; background:var(--bg); }
.stealth-goal { display:grid; place-items:center; width:110px; background:rgba(63,185,80,.25); font-size:.8rem; font-weight:700; }

/* L11 typing */
.typing { background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:1.2rem; margin-bottom:1rem; }
.type-target { font-family:var(--mono); font-size:clamp(1.1rem,4vw,1.6rem); text-align:center; color:var(--yellow); margin-bottom:.8rem; user-select:none; }
.type-bar { height:8px; background:var(--bg3); border-radius:4px; overflow:hidden; margin-top:.8rem; }
.type-bar span { display:block; height:100%; width:100%; background:linear-gradient(90deg,var(--green),var(--red)); transition:width .1s linear; }

/* L14 dark room */
.darkroom { position:relative; height:340px; border-radius:12px; background:#050608; border:1px solid var(--border); overflow:hidden; margin-bottom:1rem; }
.switch { position:absolute; width:34px; height:22px; border-radius:4px; background:#15181d; border:1px solid #22262c; cursor:pointer; }
.switch.on { background:var(--green); box-shadow:0 0 16px var(--green); }
.dark-decoy { position:absolute; background:none; border:0; font-size:1.4rem; cursor:pointer; opacity:.85; }

/* L16 boss */
.boss-hp { height:14px; background:var(--bg3); border:1px solid var(--border); border-radius:7px; overflow:hidden; margin-bottom:.8rem; }
.boss-hp span { display:block; height:100%; width:100%; background:linear-gradient(90deg,var(--red),var(--yellow)); transition:width .2s; }
.boss-arena { position:relative; height:360px; border:1px solid var(--border); border-radius:12px; background:radial-gradient(circle at 50% 50%, #1a0f1f, #0c0710); overflow:hidden; margin-bottom:1rem; }
.boss-arena.dead { filter:grayscale(1) brightness(.5); }
.boss { position:absolute; font-size:3rem; background:none; border:0; cursor:crosshair; transition:left .25s, top .25s; filter:drop-shadow(0 0 10px var(--red)); }
.boss-decoy { position:absolute; background:#fff; color:#111; border:0; border-radius:6px; padding:.3rem .9rem; font-weight:800; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.5); }
.boss-lock { display:none; }
.boss-lock.show { display:block; animation:fade .5s; }

/* finale speedrun stat */
.speedrun { font-family:var(--mono); color:var(--dim); font-size:.85rem; margin-top:.4rem; }

/* keep os-title inline */
#os-title { color:inherit; }

/* =========================================================================
   v7.2 — obstacles, harder vegan, boss clones, vault select
   ========================================================================= */
/* L8 moving patrols */
.stealth-mid { position:relative; overflow:hidden; }
.stealth-obstacle { position:absolute; font-size:1.3rem; top:0; }
.stealth-obstacle.o1 { left:28%; animation:patrolY 1.6s ease-in-out infinite; }
.stealth-obstacle.o2 { left:52%; animation:patrolY 2.1s ease-in-out infinite .5s; }
.stealth-obstacle.o3 { left:74%; animation:patrolY 1.3s ease-in-out infinite .2s; }
@keyframes patrolY { 0%,100%{ transform:translateY(2px); } 50%{ transform:translateY(38px); } }

/* L9 flag the impostor ingredient */
.resto-menu em { cursor:pointer; text-decoration:underline dotted; }
.resto-menu em:hover { color:var(--yellow); font-size:.95rem; }
.resto-menu em.flagged { color:var(--green); text-decoration:line-through; }
.resto-card.busted { opacity:.55; }

/* L16 boss clones (no red glow = fake) */
.boss-clone { position:absolute; font-size:3rem; background:none; border:0; cursor:pointer; opacity:.8; filter:grayscale(.4); }

/* L15 vault select */
.pad-sel-row { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.pad-sel { background:var(--bg); border:1px solid var(--border); border-radius:8px; color:var(--fg); padding:.4rem .6rem; font-family:var(--mono); }
.scatter-photo:nth-child(even){ box-shadow:0 0 0 2px var(--neon-cyan), 0 0 22px rgba(5,217,232,.45), 0 12px 34px rgba(0,0,0,.65); }
.scatter-photo:nth-child(3n){ box-shadow:0 0 0 2px var(--neon-purple), 0 0 22px rgba(181,55,242,.45), 0 12px 34px rgba(0,0,0,.65); }
@keyframes scatterIn { from{opacity:0} to{opacity:.94} }

/* intro sound note */
.sound-note { text-align:center; color:var(--neon-cyan); font-family:var(--mono); font-size:.85rem; margin:.2rem 0 1rem; text-shadow:0 0 10px rgba(5,217,232,.7); animation:soundPulse 1.6s ease-in-out infinite; }
@keyframes soundPulse { 0%,100%{opacity:.55} 50%{opacity:1} }

/* neon accents */
.room-head h1, #screen-accueil .btn-primary { text-shadow:0 0 8px rgba(255,46,151,.5), 0 0 22px rgba(255,46,151,.28); }
.room-head h1 { color:#fff; }
.btn-primary { box-shadow:0 0 18px rgba(63,185,80,.55), 0 0 44px rgba(63,185,80,.22); }
.terminal-card { border-color:rgba(181,55,242,.45); box-shadow:0 0 34px rgba(181,55,242,.18), 0 20px 60px rgba(0,0,0,.55); }
.prompt { border-color:rgba(5,217,232,.28); box-shadow:0 0 18px rgba(5,217,232,.08); }
.badge { border-color:rgba(255,46,151,.5); box-shadow:0 0 10px rgba(255,46,151,.25); color:#ffb3d9; }
#os-bar { border-bottom:1px solid rgba(181,55,242,.6); box-shadow:0 2px 16px rgba(181,55,242,.35); }
#os-progress { box-shadow:0 0 10px rgba(5,217,232,.8); }
.tile { box-shadow:0 0 10px rgba(210,153,34,.5); text-shadow:0 0 8px rgba(210,153,34,.6); border-color:rgba(210,153,34,.5); }
.cryptic { box-shadow:0 0 14px rgba(210,153,34,.35); }
#chat-head { box-shadow:0 0 14px rgba(181,55,242,.5) inset; }
.handwritten { text-shadow:0 0 12px rgba(247,120,186,.7); }
.counter { text-shadow:0 0 14px rgba(63,185,80,.7); }