From 4454df9c3bdbb528670e21f9e6bcb73fe481f4d7 Mon Sep 17 00:00:00 2001
From: Claude Agent <claude-agent@romfast.ro>
Date: Sat, 13 Jun 2026 10:57:12 +0000
Subject: [PATCH] S3 pas 3: restyle complet 5 stiluri (din STYLES.md)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Classic: fundal radial spotlight, card cu glow accent, tile-uri 44px bouncy,
progres bar 10px cu neon glow. Terminal: FIX WCAG critic .line.dim (#1f9c4a→
#2ecc71, 3.1:1→6.1:1) + bordura CRT + flicker cu motion guard + #cmd 44px.
Arcade: canvas border neon violet, dpad butoane fizice 56x52px, titlu neon,
fundal radial. Chat: header frosted-glass (backdrop-filter), bule NPC distincte
(#1e2d45) cu shadow, tile reward bouncy. Point: fundal distinct fata de arcade,
fix contrast .note (#a89fd4), usa cu glow pulsant. prefers-reduced-motion peste tot.

Toate 5 demo-urile regenerate. Smoke 21/21 + capturi vizuale pe fiecare stil.
S3 COMPLET (Bomberman + Overworld + restyle). Board: TODOS.md S3 [x].

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 TODOS.md              |   8 ++-
 escape-builder.html   | 132 +++++++++++++++++++++++-------------------
 exemplu-arcade.html   |  19 +++---
 exemplu-chat.html     |  32 +++++-----
 exemplu-clasic.html   |  40 +++++++------
 exemplu-point.html    |  20 ++++---
 exemplu-terminal.html |  21 ++++---
 7 files changed, 152 insertions(+), 120 deletions(-)

diff --git a/TODOS.md b/TODOS.md
index 4e0e98a..81d9f6e 100644
--- a/TODOS.md
+++ b/TODOS.md
@@ -39,7 +39,7 @@ portează în `escape-builder.html` (un singur fișier, integrare secvențială)
 - [x] **S2c — `STYLES.md`** — direcție restyle pentru cele 5 stiluri (GATA, 775 linii).
       Top 3 impact/efort: terminal `.line.dim` fix WCAG (3.1:1→6.1:1); classic card glow +
       progres bar; chat header `backdrop-filter` + bulă NPC distinctă. Consumat de S3.
-- [~] **S3 — integrare în `escape-builder.html`** *(secvențial: Bomberman → Overworld → restyle; smoke după fiecare)*
+- [x] **S3 — integrare în `escape-builder.html`** *(GATA — toate 3 pas-urile; smoke 21/21)*
       Portează prototipurile (template literals → DUBLEAZĂ backslash-urile) + regenerează demo-urile.
       Pas 1: Bomberman → `gameArcade`. Pas 2: Overworld → `gameCampaign`. Pas 3: restyle 5 stiluri.
       - [x] Pas 1 — Bomberman în `gameArcade` (GATA). Păstrează `openPuzzle`/`onDoorSolved`/`showFinal`/
@@ -49,7 +49,11 @@ portează în `escape-builder.html` (un singur fișier, integrare secvențială)
         coridorul; intro→`showOverworld(0)`, nextRoom/skip/resume→`showOverworld`. Contractul
         (mountRoom/nextRoom/roomReady/roomError/timeout/finale) NESCHIMBAT. Cod coridor șters.
         Cele 8 teste campanie rescrise (`enterRoom`/`waitOverworld`/`__ow`). Smoke 21/21 + captură.
-      - [ ] Pas 3 — restyle 5 stiluri (din `STYLES.md`).
+      - [x] Pas 3 — restyle 5 stiluri din `STYLES.md` (GATA, toate 5). Classic spotlight+card glow+
+        tile 44px; Terminal fix WCAG `.dim` #2ecc71 + bordură CRT + flicker; Arcade canvas neon +
+        dpad fizic; Chat header frosted + bule distincte + tile reward; Point fundal distinct +
+        fix contrast `.note` + ușă glow. `prefers-reduced-motion` peste tot. Toate 5 demo-uri
+        regenerate. Smoke 21/21 + capturi pe fiecare stil.
 - [!] **S4 — extinde `tests/smoke.mjs`** *(blocat de S3)* — bomberman, hartă, audio, regresie.
 
 **Stare la 2026-06-13:** PR1 livrat (`a42c960`, suita 21/21). Iterația 2 = neîncepută;
diff --git a/escape-builder.html b/escape-builder.html
index dbb7b66..2fe4473 100644
--- a/escape-builder.html
+++ b/escape-builder.html
@@ -452,44 +452,46 @@ function gameClassic(cfg) {
   * { box-sizing: border-box; }
   body {
     margin: 0; min-height: 100vh; font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
-    color: #fff; display: flex; align-items: center; justify-content: center; padding: 16px;
-    background: linear-gradient(160deg, #14092e 0%, #2a1257 55%, #14092e 100%);
+    color: #f1f0ff; display: flex; align-items: center; justify-content: center; padding: 16px;
+    background: radial-gradient(ellipse at 50% 30%, #2a0e5e 0%, #0e0622 70%);
   }
   .card {
-    width: 100%; max-width: 560px; background: rgba(255,255,255,.07);
-    border: 1px solid rgba(255,255,255,.14); border-radius: 18px; padding: 26px;
-    backdrop-filter: blur(6px); box-shadow: 0 18px 50px rgba(0,0,0,.45);
+    width: 100%; max-width: 560px; background: #1a0e3d;
+    border: 1px solid rgba(255,255,255,.18); border-radius: 20px; padding: 26px;
+    backdrop-filter: blur(6px);
+    box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 24px 60px rgba(0,0,0,.55), 0 0 40px rgba(109,40,217,.35);
   }
   h1 { margin: 0 0 6px; font-size: 26px; text-align: center; }
   .story { color: rgba(255,255,255,.8); text-align: center; line-height: 1.5; }
   .screen { display: none; }
-  .screen.on { display: block; animation: pop .35s ease; }
-  @keyframes pop { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
-  .progress { height: 7px; background: rgba(255,255,255,.15); border-radius: 99px; overflow: hidden; margin: 14px 0 4px; }
-  .progress i { display: block; height: 100%; background: var(--accent); width: 0; transition: width .4s ease; }
+  .screen.on { display: block; animation: pop .35s cubic-bezier(.22,1,.36,1); }
+  @keyframes pop { from { transform: scale(.94) translateY(6px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
+  .progress { height: 10px; background: rgba(255,255,255,.12); border-radius: 99px; overflow: hidden; margin: 14px 0 4px; }
+  .progress i { display: block; height: 100%; background: var(--accent); width: 0; box-shadow: 0 0 8px var(--accent); transition: width .5s cubic-bezier(.22,1,.36,1); }
   .meta { display: flex; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,.6); margin-bottom: 14px; }
   .letters { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 14px 0; }
   .tile {
-    width: 34px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
-    font-weight: 800; font-size: 18px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
+    width: 44px; height: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
+    font-weight: 800; font-size: 20px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
     color: rgba(255,255,255,.35);
   }
-  .tile.won { background: var(--accent); color: #fff; border-color: transparent; animation: flip .5s ease; }
+  .tile.won { background: var(--accent); color: #fff; border-color: transparent; box-shadow: 0 0 12px var(--accent); animation: flip .5s cubic-bezier(.34,1.56,.64,1); }
   @keyframes flip { from { transform: rotateX(90deg); } to { transform: rotateX(0); } }
   .qtitle { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-light); font-weight: 700; }
-  .question { font-size: 19px; line-height: 1.45; margin: 8px 0 18px; }
+  .question { font-size: 21px; line-height: 1.5; margin: 8px 0 18px; color: #f1f0ff; }
   input[type=text] {
     width: 100%; font: inherit; font-size: 18px; padding: 11px 13px; border-radius: 10px;
     border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.25); color: #fff; text-align: center;
   }
-  input:focus { outline: 2px solid var(--accent); border-color: transparent; }
+  input:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-color: transparent; }
   button {
     font: inherit; cursor: pointer; border: none; border-radius: 10px; padding: 12px 18px;
-    font-weight: 700; background: var(--accent); color: #fff; width: 100%; margin-top: 10px;
+    font-weight: 700; background: var(--accent); color: #fff; width: 100%; margin-top: 10px; min-height: 44px;
   }
   button:hover { filter: brightness(1.12); }
-  button.opt { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); font-weight: 600; text-align: left; }
-  button.opt:hover { background: rgba(255,255,255,.18); }
+  button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+  button.opt { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); font-weight: 600; text-align: left; min-height: 48px; transition: background .15s, border-color .15s; }
+  button.opt:hover { background: rgba(255,255,255,.16); border-color: var(--accent); }
   button.hint { background: none; border: none; color: rgba(255,255,255,.55); font-weight: 600; font-size: 13px; width: auto; display: block; margin: 12px auto 0; }
   button.hint:hover { color: #fff; }
   .hinttext { background: rgba(255,255,255,.1); border-radius: 9px; padding: 10px 12px; font-size: 14px; margin-top: 10px; white-space: pre-line; display: none; }
@@ -506,6 +508,10 @@ function gameClassic(cfg) {
   }
   .confetti { position: fixed; top: -12px; width: 9px; height: 14px; z-index: 5; animation: fall linear forwards; }
   @keyframes fall { to { transform: translateY(105vh) rotate(720deg); } }
+  @media (prefers-reduced-motion: reduce) {
+    .screen.on, .tile.won, .bigword span, .shake { animation: none; }
+    .progress i { transition: none; }
+  }
 </style>
 </head>
 <body>
@@ -870,21 +876,24 @@ function gameTerminal(cfg) {
 <title>${esc(cfg.title)}</title>
 <style>
   * { box-sizing: border-box; }
-  body { margin: 0; min-height: 100vh; background: #04130a; color: #39ff6e; font-family: "Courier New", ui-monospace, monospace; }
-  #crt { max-width: 760px; margin: 0 auto; padding: 20px 16px 80px; }
-  .line { white-space: pre-wrap; word-break: break-word; line-height: 1.45; font-size: 15px; text-shadow: 0 0 7px rgba(57,255,110,.5); }
-  .line.dim { color: #1f9c4a; }
+  body { margin: 0; min-height: 100vh; background: #040f08; color: #39ff6e; font-family: "Courier New", ui-monospace, monospace; animation: crt-flicker 6s infinite; }
+  @keyframes crt-flicker { 0%,96%,100% { opacity: 1; } 97% { opacity: 1; } 98% { opacity: .94; } 99% { opacity: .98; } }
+  #crt { max-width: 680px; margin: 0 auto; padding: 20px 16px 80px; }
+  .line { white-space: pre-wrap; word-break: break-word; line-height: 1.45; font-size: 15px; text-shadow: 0 0 8px rgba(57,255,110,.55); }
+  .line.dim { color: #2ecc71; }
   .line.warn { color: #ffd24a; text-shadow: 0 0 7px rgba(255,210,74,.45); }
   .line.bad { color: #ff6b6b; text-shadow: 0 0 7px rgba(255,107,107,.45); }
   .line.ok { color: #9dffc0; }
-  #inline { display: flex; gap: 8px; align-items: baseline; font-size: 15px; text-shadow: 0 0 7px rgba(57,255,110,.5); }
-  #cmd { flex: 1; background: none; border: none; outline: none; color: inherit; font: inherit; text-shadow: inherit; caret-color: #39ff6e; }
-  .scan { position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px); }
-  .vign { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.6)); }
+  #inline { display: flex; gap: 8px; align-items: baseline; font-size: 15px; min-height: 44px; text-shadow: 0 0 8px rgba(57,255,110,.55); }
+  #cmd { flex: 1; min-height: 44px; background: none; border: none; outline: none; color: inherit; font: inherit; text-shadow: inherit; caret-color: #39ff6e; }
+  .scan { position: fixed; inset: 0; pointer-events: none; z-index: 2; background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px); }
+  .vign { position: fixed; inset: 0; pointer-events: none; z-index: 2; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.6)); }
+  #crt-frame { position: fixed; inset: 0; pointer-events: none; z-index: 3; border: 8px solid #0d1f12; border-radius: 18px; box-shadow: inset 0 0 60px rgba(0,0,0,.6), inset 0 0 0 1px #1a3a24; }
+  @media (prefers-reduced-motion: reduce) { body { animation: none; } }
 </style>
 </head>
 <body>
-<div class="scan"></div><div class="vign"></div>
+<div class="scan"></div><div class="vign"></div><div id="crt-frame"></div>
 <div id="crt"><div id="out"></div>
 <div id="inline"><span>&gt;</span><input id="cmd" autocomplete="off" autofocus spellcheck="false"></div>
 </div>
@@ -1004,18 +1013,19 @@ function gameArcade(cfg) {
 <title>${esc(cfg.title)}</title>
 <style>
   * { box-sizing: border-box; }
-  body { margin: 0; min-height: 100vh; background: #0d0820; color: #fff; font-family: ui-monospace, "Courier New", monospace; display: flex; flex-direction: column; align-items: center; }
-  h1 { font-size: 17px; margin: 14px 0 6px; letter-spacing: .06em; text-transform: uppercase; }
-  #hud { display: flex; gap: 16px; align-items: center; font-size: 13px; color: #b9aee0; margin-bottom: 8px; flex-wrap: wrap; justify-content: center; padding: 0 10px; }
+  body { margin: 0; min-height: 100vh; background: radial-gradient(ellipse at 50% 0%, #1a0a40 0%, #080614 60%); color: #fff; font-family: ui-monospace, "Courier New", monospace; display: flex; flex-direction: column; align-items: center; }
+  h1 { font-size: 22px; margin: 12px 0 4px; letter-spacing: .12em; text-transform: uppercase; color: #fff; text-shadow: 0 0 12px var(--accent), 0 0 24px rgba(109,40,217,.5); }
+  #hud { display: flex; gap: 16px; align-items: center; font-size: 13px; color: #c4b5fd; margin-bottom: 8px; flex-wrap: wrap; justify-content: center; padding: 0 10px; }
   #hudLetters { display: flex; gap: 4px; }
-  #hudLetters span { width: 22px; height: 26px; border-radius: 5px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-weight: 700; color: rgba(255,255,255,.4); font-size: 13px; }
-  #hudLetters span.won { background: var(--accent); color: #fff; border-color: transparent; }
-  canvas { border: 3px solid #36246b; border-radius: 8px; background: #18102e; max-width: calc(100vw - 16px); image-rendering: pixelated; }
-  .help { font-size: 12px; color: #6f639e; margin: 8px 0 4px; text-align: center; padding: 0 10px; }
+  #hudLetters span { width: 32px; height: 32px; border-radius: 4px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-weight: 800; color: rgba(255,255,255,.4); font-size: 14px; }
+  #hudLetters span.won { background: var(--accent); color: #fff; border-color: transparent; box-shadow: 0 0 8px var(--accent); }
+  canvas { border: 4px solid var(--accent); border-radius: 4px; background: #0e0a22; max-width: calc(100vw - 16px); image-rendering: pixelated; box-shadow: 0 0 0 2px #080614, 0 0 20px rgba(109,40,217,.6), 0 0 40px rgba(109,40,217,.25), inset 0 0 30px rgba(0,0,0,.6); }
+  .help { font-size: 12px; color: #8b7fc0; margin: 8px 0 4px; text-align: center; padding: 0 10px; }
   #dpad { display: flex; gap: 8px; margin: 6px 0 16px; flex-wrap: wrap; justify-content: center; }
-  #dpad button { width: 52px; height: 44px; font-size: 18px; border-radius: 9px; border: 1px solid #4a3590; background: #221643; color: #cdc3f0; cursor: pointer; }
-  #dpad button:active { background: var(--accent); }
+  #dpad button { width: 56px; height: 52px; font-size: 20px; border-radius: 6px; border: 2px solid #6d28d9; background: #1a1040; color: #c4b5fd; cursor: pointer; box-shadow: 0 4px 0 #0d0820, 0 0 8px rgba(109,40,217,.3); transition: transform .08s, box-shadow .08s; }
+  #dpad button:active { background: var(--accent); transform: translateY(2px); box-shadow: 0 2px 0 #0d0820, 0 0 12px var(--accent); }
   #btnBomb { background: #7f1d1d; border-color: #b91c1c; }
+  @media (prefers-reduced-motion: reduce) { #dpad button { transition: none; } }
   #goOverlay { display: none; position: fixed; inset: 0; background: rgba(8,4,20,.82); z-index: 25; align-items: center; justify-content: center; padding: 16px; }
   #goCard { background: #221440; border: 1px solid rgba(255,255,255,.18); border-radius: 16px; padding: 24px; text-align: center; max-width: 360px; font-family: system-ui, sans-serif; }
   #goCard #goMsg { font-size: 20px; margin-bottom: 14px; }
@@ -1275,29 +1285,31 @@ function gameChat(cfg) {
 <title>${esc(cfg.title)}</title>
 <style>
   * { box-sizing: border-box; }
-  body { margin: 0; background: #0b1220; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #e5e7eb; display: flex; justify-content: center; min-height: 100vh; }
-  #app { width: 100%; max-width: 480px; height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: #0f172a; }
-  header { display: flex; gap: 10px; align-items: center; padding: 10px 14px; background: #1e293b; border-bottom: 1px solid #334155; }
-  .avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; color: #fff; }
+  body { margin: 0; background: #060d1a; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #e2e8f0; display: flex; justify-content: center; min-height: 100vh; }
+  #app { width: 100%; max-width: 480px; height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: #0d1626; }
+  header { display: flex; gap: 10px; align-items: center; padding: 10px 14px; background: rgba(23,32,53,.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.08); box-shadow: 0 1px 0 rgba(255,255,255,.05); }
+  .avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.15); }
   .cname { font-weight: 700; }
   .cstatus { font-size: 12px; color: #34d399; }
   #msgs { flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; }
   .row { display: flex; }
   .row.me { justify-content: flex-end; }
-  .bub { max-width: 78%; padding: 9px 13px; border-radius: 16px; line-height: 1.4; font-size: 15px; white-space: pre-line; animation: bin .25s ease; }
+  .bub { max-width: 78%; padding: 9px 13px; border-radius: 16px; line-height: 1.4; font-size: 15px; white-space: pre-line; animation: bin .25s cubic-bezier(.22,1,.36,1); }
   @keyframes bin { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
-  .row.him .bub { background: #1e293b; border-bottom-left-radius: 5px; }
-  .row.me .bub { background: var(--accent); color: #fff; border-bottom-right-radius: 5px; }
-  .bub.tile { font-size: 24px; font-weight: 800; letter-spacing: 2px; background: #14532d; border: 1px solid #22c55e; }
-  .bub.typing i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; margin: 0 2px; animation: tp 1s infinite; }
+  .row.him .bub { background: #1e2d45; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 2px 8px rgba(0,0,0,.25); color: #e2e8f0; border-bottom-left-radius: 5px; }
+  .row.me .bub { background: var(--accent); color: #fff; box-shadow: 0 2px 12px rgba(109,40,217,.4); border-bottom-right-radius: 5px; }
+  .bub.tile { font-size: 28px; font-weight: 900; letter-spacing: 3px; padding: 14px 20px; background: linear-gradient(135deg, #14532d, #166534); border: 1px solid #22c55e; box-shadow: 0 0 16px rgba(34,197,94,.3); animation: tile-pop .4s cubic-bezier(.34,1.56,.64,1); }
+  @keyframes tile-pop { from { transform: scale(.6) rotate(-5deg); opacity: 0; } to { transform: none; opacity: 1; } }
+  .bub.typing i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #64748b; margin: 0 2px; animation: tp 1s infinite; }
   .bub.typing i:nth-child(2) { animation-delay: .15s; } .bub.typing i:nth-child(3) { animation-delay: .3s; }
-  @keyframes tp { 30% { transform: translateY(-5px); } }
-  #composer { padding: 10px 12px; background: #1e293b; border-top: 1px solid #334155; display: flex; flex-wrap: wrap; gap: 8px; min-height: 58px; }
-  #composer input { flex: 1; min-width: 120px; font: inherit; font-size: 15px; padding: 9px 13px; border-radius: 99px; border: 1px solid #475569; background: #0f172a; color: #fff; }
-  #composer input:focus { outline: none; border-color: var(--accent); }
-  #composer button { font: inherit; cursor: pointer; border: none; border-radius: 99px; padding: 9px 16px; font-weight: 600; background: var(--accent); color: #fff; }
-  #composer button.chip { background: #0f172a; border: 1px solid #475569; color: #cbd5e1; }
+  @keyframes tp { 30% { transform: translateY(-6px); background: #34d399; } }
+  #composer { padding: 10px 12px; background: rgba(23,32,53,.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid rgba(255,255,255,.08); display: flex; flex-wrap: wrap; gap: 8px; min-height: 58px; }
+  #composer input { flex: 1; min-width: 120px; min-height: 44px; font: inherit; font-size: 15px; padding: 9px 13px; border-radius: 99px; border: 1px solid #334155; background: rgba(13,22,38,.8); color: #fff; }
+  #composer input:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-color: transparent; }
+  #composer button { font: inherit; cursor: pointer; border: none; border-radius: 99px; padding: 9px 16px; min-height: 44px; min-width: 44px; font-weight: 600; background: var(--accent); color: #fff; }
+  #composer button.chip { background: #0d1626; border: 1px solid #334155; color: #cbd5e1; min-height: 44px; }
   #composer button.chip:hover { border-color: var(--accent); color: #fff; }
+  @media (prefers-reduced-motion: reduce) { .bub, .bub.tile, .bub.typing i { animation: none; } }
 ${SNIP.baseCss}${SNIP.finalCss}
 </style>
 </head>
@@ -1416,21 +1428,23 @@ function gamePoint(cfg) {
 <title>${esc(cfg.title)}</title>
 <style>
   * { box-sizing: border-box; }
-  body { margin: 0; min-height: 100vh; background: #0d0820; color: #fff; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; display: flex; flex-direction: column; align-items: center; }
-  h1 { font-size: 19px; margin: 14px 0 4px; }
-  #hud { display: flex; gap: 16px; align-items: center; font-size: 13px; color: #b9aee0; margin-bottom: 4px; flex-wrap: wrap; justify-content: center; padding: 0 10px; }
+  body { margin: 0; min-height: 100vh; background: linear-gradient(180deg, #0a0618 0%, #150d30 100%); color: #fff; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; display: flex; flex-direction: column; align-items: center; }
+  h1 { font-size: 20px; margin: 14px 0 4px; color: #e8deff; letter-spacing: .04em; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
+  #hud { display: flex; gap: 16px; align-items: center; font-size: 13px; color: #d4c8f8; margin-bottom: 4px; flex-wrap: wrap; justify-content: center; padding: 0 10px; }
   #hudLetters { display: flex; gap: 4px; }
-  #hudLetters span { width: 22px; height: 26px; border-radius: 5px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-weight: 700; color: rgba(255,255,255,.4); font-size: 13px; }
-  #hudLetters span.won { background: var(--accent); color: #fff; border-color: transparent; }
-  .note { font-size: 13px; color: #8d80bb; margin: 2px 0 10px; text-align: center; padding: 0 12px; min-height: 18px; }
+  #hudLetters span { width: 26px; height: 30px; border-radius: 6px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-weight: 700; color: rgba(255,255,255,.4); font-size: 13px; }
+  #hudLetters span.won { background: var(--accent); color: #fff; border-color: transparent; box-shadow: 0 0 10px var(--accent); }
+  .note { font-size: 13px; color: #a89fd4; margin: 2px 0 10px; text-align: center; padding: 0 12px; min-height: 18px; }
   #stage { width: 100%; max-width: 860px; padding: 0 10px 20px; }
   svg { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 14px 40px rgba(0,0,0,.5); display: block; }
   .hot { cursor: pointer; }
-  .hot:hover { filter: brightness(1.35) drop-shadow(0 0 6px rgba(255,255,255,.35)); }
-  .hot.done { opacity: .6; cursor: default; }
+  .hot:hover { filter: brightness(1.5) drop-shadow(0 0 8px rgba(255,220,100,.5)); transition: filter .15s; }
+  .hot.done { opacity: .85; cursor: default; }
   .hot.done:hover { filter: none; }
   #door { cursor: pointer; }
-  #door.open { filter: drop-shadow(0 0 12px #22c55e); }
+  #door.open { filter: drop-shadow(0 0 18px rgba(34,197,94,.5)) drop-shadow(0 0 6px #fff); animation: door-glow 2s ease-in-out infinite alternate; }
+  @keyframes door-glow { from { filter: drop-shadow(0 0 12px rgba(34,197,94,.5)); } to { filter: drop-shadow(0 0 24px rgba(34,197,94,.5)) drop-shadow(0 0 8px rgba(255,255,255,.3)); } }
+  @media (prefers-reduced-motion: reduce) { .hot { transition: none; } #door.open { animation: none; filter: drop-shadow(0 0 18px rgba(34,197,94,.5)); } }
 ${SNIP.baseCss}${SNIP.modalCss}${SNIP.finalCss}
 </style>
 </head>
diff --git a/exemplu-arcade.html b/exemplu-arcade.html
index f8d7d29..af6efbe 100644
--- a/exemplu-arcade.html
+++ b/exemplu-arcade.html
@@ -6,18 +6,19 @@
 <title>Comoara ascunsa</title>
 <style>
   * { box-sizing: border-box; }
-  body { margin: 0; min-height: 100vh; background: #0d0820; color: #fff; font-family: ui-monospace, "Courier New", monospace; display: flex; flex-direction: column; align-items: center; }
-  h1 { font-size: 17px; margin: 14px 0 6px; letter-spacing: .06em; text-transform: uppercase; }
-  #hud { display: flex; gap: 16px; align-items: center; font-size: 13px; color: #b9aee0; margin-bottom: 8px; flex-wrap: wrap; justify-content: center; padding: 0 10px; }
+  body { margin: 0; min-height: 100vh; background: radial-gradient(ellipse at 50% 0%, #1a0a40 0%, #080614 60%); color: #fff; font-family: ui-monospace, "Courier New", monospace; display: flex; flex-direction: column; align-items: center; }
+  h1 { font-size: 22px; margin: 12px 0 4px; letter-spacing: .12em; text-transform: uppercase; color: #fff; text-shadow: 0 0 12px var(--accent), 0 0 24px rgba(109,40,217,.5); }
+  #hud { display: flex; gap: 16px; align-items: center; font-size: 13px; color: #c4b5fd; margin-bottom: 8px; flex-wrap: wrap; justify-content: center; padding: 0 10px; }
   #hudLetters { display: flex; gap: 4px; }
-  #hudLetters span { width: 22px; height: 26px; border-radius: 5px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-weight: 700; color: rgba(255,255,255,.4); font-size: 13px; }
-  #hudLetters span.won { background: var(--accent); color: #fff; border-color: transparent; }
-  canvas { border: 3px solid #36246b; border-radius: 8px; background: #18102e; max-width: calc(100vw - 16px); image-rendering: pixelated; }
-  .help { font-size: 12px; color: #6f639e; margin: 8px 0 4px; text-align: center; padding: 0 10px; }
+  #hudLetters span { width: 32px; height: 32px; border-radius: 4px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-weight: 800; color: rgba(255,255,255,.4); font-size: 14px; }
+  #hudLetters span.won { background: var(--accent); color: #fff; border-color: transparent; box-shadow: 0 0 8px var(--accent); }
+  canvas { border: 4px solid var(--accent); border-radius: 4px; background: #0e0a22; max-width: calc(100vw - 16px); image-rendering: pixelated; box-shadow: 0 0 0 2px #080614, 0 0 20px rgba(109,40,217,.6), 0 0 40px rgba(109,40,217,.25), inset 0 0 30px rgba(0,0,0,.6); }
+  .help { font-size: 12px; color: #8b7fc0; margin: 8px 0 4px; text-align: center; padding: 0 10px; }
   #dpad { display: flex; gap: 8px; margin: 6px 0 16px; flex-wrap: wrap; justify-content: center; }
-  #dpad button { width: 52px; height: 44px; font-size: 18px; border-radius: 9px; border: 1px solid #4a3590; background: #221643; color: #cdc3f0; cursor: pointer; }
-  #dpad button:active { background: var(--accent); }
+  #dpad button { width: 56px; height: 52px; font-size: 20px; border-radius: 6px; border: 2px solid #6d28d9; background: #1a1040; color: #c4b5fd; cursor: pointer; box-shadow: 0 4px 0 #0d0820, 0 0 8px rgba(109,40,217,.3); transition: transform .08s, box-shadow .08s; }
+  #dpad button:active { background: var(--accent); transform: translateY(2px); box-shadow: 0 2px 0 #0d0820, 0 0 12px var(--accent); }
   #btnBomb { background: #7f1d1d; border-color: #b91c1c; }
+  @media (prefers-reduced-motion: reduce) { #dpad button { transition: none; } }
   #goOverlay { display: none; position: fixed; inset: 0; background: rgba(8,4,20,.82); z-index: 25; align-items: center; justify-content: center; padding: 16px; }
   #goCard { background: #221440; border: 1px solid rgba(255,255,255,.18); border-radius: 16px; padding: 24px; text-align: center; max-width: 360px; font-family: system-ui, sans-serif; }
   #goCard #goMsg { font-size: 20px; margin-bottom: 14px; }
diff --git a/exemplu-chat.html b/exemplu-chat.html
index 767a0b1..10b0215 100644
--- a/exemplu-chat.html
+++ b/exemplu-chat.html
@@ -6,29 +6,31 @@
 <title>Comoara ascunsa</title>
 <style>
   * { box-sizing: border-box; }
-  body { margin: 0; background: #0b1220; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #e5e7eb; display: flex; justify-content: center; min-height: 100vh; }
-  #app { width: 100%; max-width: 480px; height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: #0f172a; }
-  header { display: flex; gap: 10px; align-items: center; padding: 10px 14px; background: #1e293b; border-bottom: 1px solid #334155; }
-  .avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; color: #fff; }
+  body { margin: 0; background: #060d1a; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #e2e8f0; display: flex; justify-content: center; min-height: 100vh; }
+  #app { width: 100%; max-width: 480px; height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: #0d1626; }
+  header { display: flex; gap: 10px; align-items: center; padding: 10px 14px; background: rgba(23,32,53,.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.08); box-shadow: 0 1px 0 rgba(255,255,255,.05); }
+  .avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.15); }
   .cname { font-weight: 700; }
   .cstatus { font-size: 12px; color: #34d399; }
   #msgs { flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; }
   .row { display: flex; }
   .row.me { justify-content: flex-end; }
-  .bub { max-width: 78%; padding: 9px 13px; border-radius: 16px; line-height: 1.4; font-size: 15px; white-space: pre-line; animation: bin .25s ease; }
+  .bub { max-width: 78%; padding: 9px 13px; border-radius: 16px; line-height: 1.4; font-size: 15px; white-space: pre-line; animation: bin .25s cubic-bezier(.22,1,.36,1); }
   @keyframes bin { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
-  .row.him .bub { background: #1e293b; border-bottom-left-radius: 5px; }
-  .row.me .bub { background: var(--accent); color: #fff; border-bottom-right-radius: 5px; }
-  .bub.tile { font-size: 24px; font-weight: 800; letter-spacing: 2px; background: #14532d; border: 1px solid #22c55e; }
-  .bub.typing i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; margin: 0 2px; animation: tp 1s infinite; }
+  .row.him .bub { background: #1e2d45; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 2px 8px rgba(0,0,0,.25); color: #e2e8f0; border-bottom-left-radius: 5px; }
+  .row.me .bub { background: var(--accent); color: #fff; box-shadow: 0 2px 12px rgba(109,40,217,.4); border-bottom-right-radius: 5px; }
+  .bub.tile { font-size: 28px; font-weight: 900; letter-spacing: 3px; padding: 14px 20px; background: linear-gradient(135deg, #14532d, #166534); border: 1px solid #22c55e; box-shadow: 0 0 16px rgba(34,197,94,.3); animation: tile-pop .4s cubic-bezier(.34,1.56,.64,1); }
+  @keyframes tile-pop { from { transform: scale(.6) rotate(-5deg); opacity: 0; } to { transform: none; opacity: 1; } }
+  .bub.typing i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #64748b; margin: 0 2px; animation: tp 1s infinite; }
   .bub.typing i:nth-child(2) { animation-delay: .15s; } .bub.typing i:nth-child(3) { animation-delay: .3s; }
-  @keyframes tp { 30% { transform: translateY(-5px); } }
-  #composer { padding: 10px 12px; background: #1e293b; border-top: 1px solid #334155; display: flex; flex-wrap: wrap; gap: 8px; min-height: 58px; }
-  #composer input { flex: 1; min-width: 120px; font: inherit; font-size: 15px; padding: 9px 13px; border-radius: 99px; border: 1px solid #475569; background: #0f172a; color: #fff; }
-  #composer input:focus { outline: none; border-color: var(--accent); }
-  #composer button { font: inherit; cursor: pointer; border: none; border-radius: 99px; padding: 9px 16px; font-weight: 600; background: var(--accent); color: #fff; }
-  #composer button.chip { background: #0f172a; border: 1px solid #475569; color: #cbd5e1; }
+  @keyframes tp { 30% { transform: translateY(-6px); background: #34d399; } }
+  #composer { padding: 10px 12px; background: rgba(23,32,53,.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid rgba(255,255,255,.08); display: flex; flex-wrap: wrap; gap: 8px; min-height: 58px; }
+  #composer input { flex: 1; min-width: 120px; min-height: 44px; font: inherit; font-size: 15px; padding: 9px 13px; border-radius: 99px; border: 1px solid #334155; background: rgba(13,22,38,.8); color: #fff; }
+  #composer input:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-color: transparent; }
+  #composer button { font: inherit; cursor: pointer; border: none; border-radius: 99px; padding: 9px 16px; min-height: 44px; min-width: 44px; font-weight: 600; background: var(--accent); color: #fff; }
+  #composer button.chip { background: #0d1626; border: 1px solid #334155; color: #cbd5e1; min-height: 44px; }
   #composer button.chip:hover { border-color: var(--accent); color: #fff; }
+  @media (prefers-reduced-motion: reduce) { .bub, .bub.tile, .bub.typing i { animation: none; } }
 
   .confetti { position: fixed; top: -12px; width: 9px; height: 14px; z-index: 99; animation: fall linear forwards; }
   @keyframes fall { to { transform: translateY(105vh) rotate(720deg); } }
diff --git a/exemplu-clasic.html b/exemplu-clasic.html
index e23efe7..85a2b36 100644
--- a/exemplu-clasic.html
+++ b/exemplu-clasic.html
@@ -8,44 +8,46 @@
   * { box-sizing: border-box; }
   body {
     margin: 0; min-height: 100vh; font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
-    color: #fff; display: flex; align-items: center; justify-content: center; padding: 16px;
-    background: linear-gradient(160deg, #14092e 0%, #2a1257 55%, #14092e 100%);
+    color: #f1f0ff; display: flex; align-items: center; justify-content: center; padding: 16px;
+    background: radial-gradient(ellipse at 50% 30%, #2a0e5e 0%, #0e0622 70%);
   }
   .card {
-    width: 100%; max-width: 560px; background: rgba(255,255,255,.07);
-    border: 1px solid rgba(255,255,255,.14); border-radius: 18px; padding: 26px;
-    backdrop-filter: blur(6px); box-shadow: 0 18px 50px rgba(0,0,0,.45);
+    width: 100%; max-width: 560px; background: #1a0e3d;
+    border: 1px solid rgba(255,255,255,.18); border-radius: 20px; padding: 26px;
+    backdrop-filter: blur(6px);
+    box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 24px 60px rgba(0,0,0,.55), 0 0 40px rgba(109,40,217,.35);
   }
   h1 { margin: 0 0 6px; font-size: 26px; text-align: center; }
   .story { color: rgba(255,255,255,.8); text-align: center; line-height: 1.5; }
   .screen { display: none; }
-  .screen.on { display: block; animation: pop .35s ease; }
-  @keyframes pop { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
-  .progress { height: 7px; background: rgba(255,255,255,.15); border-radius: 99px; overflow: hidden; margin: 14px 0 4px; }
-  .progress i { display: block; height: 100%; background: var(--accent); width: 0; transition: width .4s ease; }
+  .screen.on { display: block; animation: pop .35s cubic-bezier(.22,1,.36,1); }
+  @keyframes pop { from { transform: scale(.94) translateY(6px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
+  .progress { height: 10px; background: rgba(255,255,255,.12); border-radius: 99px; overflow: hidden; margin: 14px 0 4px; }
+  .progress i { display: block; height: 100%; background: var(--accent); width: 0; box-shadow: 0 0 8px var(--accent); transition: width .5s cubic-bezier(.22,1,.36,1); }
   .meta { display: flex; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,.6); margin-bottom: 14px; }
   .letters { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 14px 0; }
   .tile {
-    width: 34px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
-    font-weight: 800; font-size: 18px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
+    width: 44px; height: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
+    font-weight: 800; font-size: 20px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
     color: rgba(255,255,255,.35);
   }
-  .tile.won { background: var(--accent); color: #fff; border-color: transparent; animation: flip .5s ease; }
+  .tile.won { background: var(--accent); color: #fff; border-color: transparent; box-shadow: 0 0 12px var(--accent); animation: flip .5s cubic-bezier(.34,1.56,.64,1); }
   @keyframes flip { from { transform: rotateX(90deg); } to { transform: rotateX(0); } }
   .qtitle { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-light); font-weight: 700; }
-  .question { font-size: 19px; line-height: 1.45; margin: 8px 0 18px; }
+  .question { font-size: 21px; line-height: 1.5; margin: 8px 0 18px; color: #f1f0ff; }
   input[type=text] {
     width: 100%; font: inherit; font-size: 18px; padding: 11px 13px; border-radius: 10px;
     border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.25); color: #fff; text-align: center;
   }
-  input:focus { outline: 2px solid var(--accent); border-color: transparent; }
+  input:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-color: transparent; }
   button {
     font: inherit; cursor: pointer; border: none; border-radius: 10px; padding: 12px 18px;
-    font-weight: 700; background: var(--accent); color: #fff; width: 100%; margin-top: 10px;
+    font-weight: 700; background: var(--accent); color: #fff; width: 100%; margin-top: 10px; min-height: 44px;
   }
   button:hover { filter: brightness(1.12); }
-  button.opt { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); font-weight: 600; text-align: left; }
-  button.opt:hover { background: rgba(255,255,255,.18); }
+  button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+  button.opt { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); font-weight: 600; text-align: left; min-height: 48px; transition: background .15s, border-color .15s; }
+  button.opt:hover { background: rgba(255,255,255,.16); border-color: var(--accent); }
   button.hint { background: none; border: none; color: rgba(255,255,255,.55); font-weight: 600; font-size: 13px; width: auto; display: block; margin: 12px auto 0; }
   button.hint:hover { color: #fff; }
   .hinttext { background: rgba(255,255,255,.1); border-radius: 9px; padding: 10px 12px; font-size: 14px; margin-top: 10px; white-space: pre-line; display: none; }
@@ -62,6 +64,10 @@
   }
   .confetti { position: fixed; top: -12px; width: 9px; height: 14px; z-index: 5; animation: fall linear forwards; }
   @keyframes fall { to { transform: translateY(105vh) rotate(720deg); } }
+  @media (prefers-reduced-motion: reduce) {
+    .screen.on, .tile.won, .bigword span, .shake { animation: none; }
+    .progress i { transition: none; }
+  }
 </style>
 </head>
 <body>
diff --git a/exemplu-point.html b/exemplu-point.html
index 29dddfa..21eca13 100644
--- a/exemplu-point.html
+++ b/exemplu-point.html
@@ -6,21 +6,23 @@
 <title>Comoara ascunsa</title>
 <style>
   * { box-sizing: border-box; }
-  body { margin: 0; min-height: 100vh; background: #0d0820; color: #fff; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; display: flex; flex-direction: column; align-items: center; }
-  h1 { font-size: 19px; margin: 14px 0 4px; }
-  #hud { display: flex; gap: 16px; align-items: center; font-size: 13px; color: #b9aee0; margin-bottom: 4px; flex-wrap: wrap; justify-content: center; padding: 0 10px; }
+  body { margin: 0; min-height: 100vh; background: linear-gradient(180deg, #0a0618 0%, #150d30 100%); color: #fff; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; display: flex; flex-direction: column; align-items: center; }
+  h1 { font-size: 20px; margin: 14px 0 4px; color: #e8deff; letter-spacing: .04em; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
+  #hud { display: flex; gap: 16px; align-items: center; font-size: 13px; color: #d4c8f8; margin-bottom: 4px; flex-wrap: wrap; justify-content: center; padding: 0 10px; }
   #hudLetters { display: flex; gap: 4px; }
-  #hudLetters span { width: 22px; height: 26px; border-radius: 5px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-weight: 700; color: rgba(255,255,255,.4); font-size: 13px; }
-  #hudLetters span.won { background: var(--accent); color: #fff; border-color: transparent; }
-  .note { font-size: 13px; color: #8d80bb; margin: 2px 0 10px; text-align: center; padding: 0 12px; min-height: 18px; }
+  #hudLetters span { width: 26px; height: 30px; border-radius: 6px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-weight: 700; color: rgba(255,255,255,.4); font-size: 13px; }
+  #hudLetters span.won { background: var(--accent); color: #fff; border-color: transparent; box-shadow: 0 0 10px var(--accent); }
+  .note { font-size: 13px; color: #a89fd4; margin: 2px 0 10px; text-align: center; padding: 0 12px; min-height: 18px; }
   #stage { width: 100%; max-width: 860px; padding: 0 10px 20px; }
   svg { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 14px 40px rgba(0,0,0,.5); display: block; }
   .hot { cursor: pointer; }
-  .hot:hover { filter: brightness(1.35) drop-shadow(0 0 6px rgba(255,255,255,.35)); }
-  .hot.done { opacity: .6; cursor: default; }
+  .hot:hover { filter: brightness(1.5) drop-shadow(0 0 8px rgba(255,220,100,.5)); transition: filter .15s; }
+  .hot.done { opacity: .85; cursor: default; }
   .hot.done:hover { filter: none; }
   #door { cursor: pointer; }
-  #door.open { filter: drop-shadow(0 0 12px #22c55e); }
+  #door.open { filter: drop-shadow(0 0 18px rgba(34,197,94,.5)) drop-shadow(0 0 6px #fff); animation: door-glow 2s ease-in-out infinite alternate; }
+  @keyframes door-glow { from { filter: drop-shadow(0 0 12px rgba(34,197,94,.5)); } to { filter: drop-shadow(0 0 24px rgba(34,197,94,.5)) drop-shadow(0 0 8px rgba(255,255,255,.3)); } }
+  @media (prefers-reduced-motion: reduce) { .hot { transition: none; } #door.open { animation: none; filter: drop-shadow(0 0 18px rgba(34,197,94,.5)); } }
 
   .confetti { position: fixed; top: -12px; width: 9px; height: 14px; z-index: 99; animation: fall linear forwards; }
   @keyframes fall { to { transform: translateY(105vh) rotate(720deg); } }
diff --git a/exemplu-terminal.html b/exemplu-terminal.html
index 6a5539f..2c91311 100644
--- a/exemplu-terminal.html
+++ b/exemplu-terminal.html
@@ -6,21 +6,24 @@
 <title>Comoara ascunsa</title>
 <style>
   * { box-sizing: border-box; }
-  body { margin: 0; min-height: 100vh; background: #04130a; color: #39ff6e; font-family: "Courier New", ui-monospace, monospace; }
-  #crt { max-width: 760px; margin: 0 auto; padding: 20px 16px 80px; }
-  .line { white-space: pre-wrap; word-break: break-word; line-height: 1.45; font-size: 15px; text-shadow: 0 0 7px rgba(57,255,110,.5); }
-  .line.dim { color: #1f9c4a; }
+  body { margin: 0; min-height: 100vh; background: #040f08; color: #39ff6e; font-family: "Courier New", ui-monospace, monospace; animation: crt-flicker 6s infinite; }
+  @keyframes crt-flicker { 0%,96%,100% { opacity: 1; } 97% { opacity: 1; } 98% { opacity: .94; } 99% { opacity: .98; } }
+  #crt { max-width: 680px; margin: 0 auto; padding: 20px 16px 80px; }
+  .line { white-space: pre-wrap; word-break: break-word; line-height: 1.45; font-size: 15px; text-shadow: 0 0 8px rgba(57,255,110,.55); }
+  .line.dim { color: #2ecc71; }
   .line.warn { color: #ffd24a; text-shadow: 0 0 7px rgba(255,210,74,.45); }
   .line.bad { color: #ff6b6b; text-shadow: 0 0 7px rgba(255,107,107,.45); }
   .line.ok { color: #9dffc0; }
-  #inline { display: flex; gap: 8px; align-items: baseline; font-size: 15px; text-shadow: 0 0 7px rgba(57,255,110,.5); }
-  #cmd { flex: 1; background: none; border: none; outline: none; color: inherit; font: inherit; text-shadow: inherit; caret-color: #39ff6e; }
-  .scan { position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px); }
-  .vign { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.6)); }
+  #inline { display: flex; gap: 8px; align-items: baseline; font-size: 15px; min-height: 44px; text-shadow: 0 0 8px rgba(57,255,110,.55); }
+  #cmd { flex: 1; min-height: 44px; background: none; border: none; outline: none; color: inherit; font: inherit; text-shadow: inherit; caret-color: #39ff6e; }
+  .scan { position: fixed; inset: 0; pointer-events: none; z-index: 2; background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px); }
+  .vign { position: fixed; inset: 0; pointer-events: none; z-index: 2; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.6)); }
+  #crt-frame { position: fixed; inset: 0; pointer-events: none; z-index: 3; border: 8px solid #0d1f12; border-radius: 18px; box-shadow: inset 0 0 60px rgba(0,0,0,.6), inset 0 0 0 1px #1a3a24; }
+  @media (prefers-reduced-motion: reduce) { body { animation: none; } }
 </style>
 </head>
 <body>
-<div class="scan"></div><div class="vign"></div>
+<div class="scan"></div><div class="vign"></div><div id="crt-frame"></div>
 <div id="crt"><div id="out"></div>
 <div id="inline"><span>&gt;</span><input id="cmd" autocomplete="off" autofocus spellcheck="false"></div>
 </div>