/* Góc Giải Trí – token + component dùng chung cho các mini game (Ai Là Hacker?, Cờ Caro, …).
   Token lấy theo css/style.css của game. Khung vát pixel: sáng trên-trái, tối dưới-phải, bóng offset không blur. */
:root{--ink:#2a1c1c;--ink-2:#5a4a3a;--muted:#7a6a5a;--paper:#fff8ea;--paper-2:#fdefd2;--line:#e6d5b0;
--bar:#271f30;--bar-2:#3b2e48;--bar-3:#4b3a5e;--bar-deep:#181020;--bar-text:#f4eefc;--bar-muted:#c9b6e4;
--green:#43a047;--orange:#ff8f1f;--red:#e53935;--blue:#1e88e5;--yellow:#ffcf33;--gold:#ffe14d;--crt:#5cff7a;--cyan:#56b8ff;
--wood:#6b4528;--wood-2:#8a5a33;--wood-3:#4a2e1a;
--font:'Be Vietnam Pro',system-ui,sans-serif;--display:'Baloo 2','Be Vietnam Pro',system-ui,sans-serif;
--u:4px}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#120d18;color:var(--bar-text);font:14px/1.38 var(--font);overflow:hidden}
body{display:flex;flex-direction:column;align-items:center;
 background:#120d18 repeating-linear-gradient(0deg,#ffffff05 0 1px,transparent 1px 3px)}
button,input,select{font-family:var(--font);color:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.px{display:block;image-rendering:pixelated}
canvas{image-rendering:pixelated;image-rendering:crisp-edges}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* thanh công cụ demo — không thuộc game */
.demobar{flex:none;width:100%;background:#0b0810;border-bottom:2px solid #000;padding:4px 10px;display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:center;font-size:12px;z-index:5}
.demobar b{font:800 13px var(--display);color:var(--gold)}
.demobar a{color:var(--bar-muted);font-weight:700;text-decoration:none}
.demobar label{font:700 12px var(--font);color:var(--bar-muted);display:flex;gap:4px;align-items:center}
.demobar select,.demobar input{background:var(--bar-2);color:var(--bar-text);border:1.5px solid #5b4a78;border-radius:3px;font:700 12px var(--font);padding:1px 3px}
.tb{border:1.5px solid #5b4a78;background:var(--bar-2);border-radius:3px;padding:2px 9px;font-weight:700;font-size:12px}
.tb[aria-pressed=true]{background:var(--yellow);color:var(--ink);border-color:#cf9800}

.frame{position:relative;flex:1;min-height:0;width:min(100vw,460px);overflow:hidden;background:#2b2236;border-left:3px solid #000;border-right:3px solid #000;box-shadow:0 0 0 1px #3b2e48}
.scr{position:absolute;inset:0;display:none;flex-direction:column;gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:radial-gradient(circle at 50% 0,#4a3470 0,#271f30 55%,#1a1420 100%)}
.scr.on{display:flex}

/* ---------- khung ---------- */
.dark{background:var(--bar);border:2px solid #000;border-radius:3px;
 box-shadow:inset 2px 2px 0 var(--bar-3),inset -2px -2px 0 var(--bar-deep),0 3px 0 #000}
.paper{background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:3px;
 box-shadow:inset 2px 2px 0 #fff,inset -2px -2px 0 var(--line),0 3px 0 var(--ink)}
.lcd{background:#0e2316;color:var(--crt);border:2px solid #000;border-radius:3px;box-shadow:inset 0 0 0 2px #1d4a2e;
 background-image:repeating-linear-gradient(0deg,#ffffff08 0 1px,transparent 1px 3px)}
.ribbon{display:inline-flex;align-items:center;gap:6px;font:800 13px/1 var(--display);letter-spacing:.06em;color:var(--gold);text-shadow:0 2px 0 #000}
.ribbon::before,.ribbon::after{content:'';width:10px;height:4px;background:var(--gold);box-shadow:0 2px 0 #000}

/* ---------- nút: viền tối, môi dưới 3px, nhấn lún 2px ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;--edge:#2f8034;--lip:#276b2c;
 border:2px solid var(--edge);border-radius:3px;box-shadow:0 3px 0 var(--lip),0 3px 0 2px #0007,inset 0 2px 0 rgba(255,255,255,.35);
 padding:7px 14px;font:800 15px/1.15 var(--display);color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.4);background:linear-gradient(#62c867 50%,#3d9a42 50%);
 transition:transform .06s,box-shadow .06s,filter .12s;min-height:36px}
.btn:hover:not(:disabled){filter:brightness(1.08)}
.btn:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 var(--lip),0 1px 0 2px #0007,inset 0 2px 0 rgba(255,255,255,.2)}
.btn:disabled{cursor:not-allowed;filter:grayscale(.75) brightness(.7)}
.btn-yellow{background:linear-gradient(#ffe066 50%,#ffbf1a 50%);color:var(--ink);text-shadow:0 1px 0 #fff6;--edge:#cf9800;--lip:#9c7000}
.btn-red{background:linear-gradient(#ff7b76 50%,#d63330 50%);--edge:#9e2321;--lip:#7a1a18}
.btn-gray{background:linear-gradient(#a8a8b3 50%,#7c7c88 50%);--edge:#55555f;--lip:#45454d}
.btn-violet{background:linear-gradient(#b07be8 50%,#8346c9 50%);--edge:#5d2d96;--lip:#4a2278}
.btn-blue{background:linear-gradient(#6ab6ff 50%,#1e7fd8 50%);--edge:#145a9c;--lip:#0f4578}
.btn.big{width:100%;font-size:19px;padding:10px 12px;min-height:48px}
.btn.sm{font-size:13px;padding:4px 10px;min-height:30px}
.btn .px{flex:none}

.tag{display:inline-block;border-radius:2px;padding:0 6px;font:800 11px/1.55 var(--display);background:#4a4057;color:var(--bar-text);border:1.5px solid #0009;white-space:nowrap;box-shadow:0 1px 0 #0008}
.tag.red{background:#c0302c}.tag.green{background:#2f8034}.tag.gold{background:var(--yellow);color:var(--ink)}.tag.violet{background:#8346c9}.tag.blue{background:#1e6fc4}

.chip{border:2px solid #000;border-radius:3px;background:var(--bar-2);box-shadow:0 2px 0 #000,inset 0 2px 0 #ffffff1c;padding:5px 9px;font:700 12.5px/1.2 var(--font);color:var(--bar-text);transition:transform .06s;min-height:32px}
.chip:hover:not(:disabled){background:var(--bar-3)}
.chip:active:not(:disabled){transform:translateY(2px);box-shadow:0 0 0 #000}
.chip:disabled{opacity:.42;cursor:not-allowed}

/* ---------- lớp phủ + toast ---------- */
.ov{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:#0c0a18d8;padding:16px;
 background-image:repeating-linear-gradient(45deg,#ffffff06 0 2px,transparent 2px 6px)}
.ovbox{width:min(100%,360px);max-height:100%;overflow:auto;text-align:center;padding:16px 14px 14px;animation:pop .2s steps(4)}
@keyframes pop{from{transform:scale(.86) translateY(8px);opacity:0}}
.ovbox h2{margin:6px 0 4px;font:800 26px/1.05 var(--display);text-shadow:0 2px 0 #000}
.ovbox p{margin:6px 0;font:600 14px/1.45 var(--font)}
.ovbox .big-ic{display:flex;justify-content:center;margin:4px 0}
.ovbox .big-ic .px{width:72px;height:72px}
.ovbox .btn{margin-top:10px}
.kick{font:800 12.5px var(--display);color:var(--bar-muted);letter-spacing:.1em}
.acts{display:flex;gap:8px}.acts .btn{flex:1}
.toast{position:absolute;left:50%;bottom:132px;transform:translateX(-50%);z-index:30;background:var(--bar);border:2px solid #000;box-shadow:inset 2px 2px 0 var(--bar-3),0 3px 0 #000;padding:6px 12px;font:700 13px var(--font);border-radius:3px;white-space:nowrap;pointer-events:none;animation:pop .15s steps(3)}

@media (min-width:900px) and (min-height:640px){.frame{width:520px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}