@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Tajawal:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#11121d;--card:#1c1d2b;--muted:#a7a6b7;--white:#f8f5ff;--pink:#ff6fae;--purple:#aa8cff;--line:#ffffff12;--green:#77e4b1}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 8% 0%,#50335b66,transparent 36%),radial-gradient(ellipse at 95% 50%,#322f6a44,transparent 33%),var(--bg);color:var(--white);font-family:'Tajawal','DM Sans',sans-serif}.app-shell{width:min(100%,560px);min-height:100vh;margin:auto;padding:20px 22px 28px;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:11px}.brand-mark{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(140deg,#ff78b4,#a37aff);font-size:20px;box-shadow:0 8px 25px #e85caa33}.brand strong,.brand small{display:block}.brand strong{font-size:16px}.brand small{font-size:11px;color:var(--muted);margin-top:1px}.connection{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px}.connection i{width:7px;height:7px;border-radius:50%;background:#e3a053;box-shadow:0 0 10px currentColor}.connection.connected i{background:var(--green)}.welcome{margin:38px 0 27px}.eyebrow{font:700 10px 'DM Sans','Tajawal',sans-serif;letter-spacing:1.6px;color:var(--pink);text-transform:uppercase}.welcome h1{font-size:39px;line-height:1.16;margin:7px 0 8px;font-weight:800;letter-spacing:-1px}.welcome h1 span{color:#ff88ba}.welcome p{color:var(--muted);font-size:15px;margin:0}.pair-strip{margin-top:20px;display:flex;align-items:center;gap:10px;color:#e6deef;font-size:13px}.avatar{width:29px;height:29px;display:grid;place-items:center;border-radius:50%;background:#443154;color:#ffa0cb}.online-count{margin-right:auto;color:#aaa8b8;font-size:11px}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:13px}.section-heading h2{font-size:21px;margin:3px 0 0}.tiny-heart{font-size:23px;color:#cf91ff}.game-list{display:grid;gap:11px}.game-card{width:100%;border:1px solid var(--line);border-radius:19px;padding:14px;background:linear-gradient(120deg,#232333,#1c1d2b);display:flex;align-items:center;text-align:right;color:var(--white);font-family:inherit;cursor:pointer;transition:transform .18s,border-color .18s;min-height:88px}.game-card:active{transform:scale(.985)}.game-card:hover{border-color:#ffffff33}.game-icon{width:51px;height:51px;flex-shrink:0;border-radius:16px;display:grid;place-items:center;font-size:25px;background:#fff1}.escape-card .game-icon{background:#9b73ff22}.island-card .game-icon{background:#66dfb222}.chase-card .game-icon{background:#ff78b522}.game-copy{padding:0 13px;display:flex;flex-direction:column;gap:4px;flex:1}.game-copy strong{font-size:17px}.game-copy small{font-size:12px;color:var(--muted);line-height:1.5}.arrow{color:#b0a6c5;font-size:20px}.footnote{color:#9c99aa;text-align:center;font-size:12px;margin:20px 0 10px}.footnote span{color:#ff8ab8;margin-left:5px}footer{margin-top:auto;padding-top:24px;text-align:center;color:#7f7c8e;font-size:11px}footer span{color:#ff80b5;margin-right:3px}.notice{padding:11px 14px;margin:0 0 14px;border:1px solid #ffffff18;border-radius:13px;background:#242436;color:#f0eafa;font-size:13px}.hidden{display:none!important}.game-panel{border:1px solid var(--line);border-radius:22px;padding:18px;background:linear-gradient(145deg,#222333,#191a28);box-shadow:0 18px 45px #0002}.game-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:13px}.game-head h2{margin:3px 0 0;font-size:23px}.back-button,.small-button{border:1px solid var(--line);background:#ffffff0a;color:var(--white);border-radius:12px;padding:9px 12px;font:600 13px 'Tajawal',sans-serif;cursor:pointer}.story{border:1px solid #d29bff20;background:#bd8cff0a;border-radius:15px;padding:13px 14px;color:#e9def9;line-height:1.7;font-size:14px;margin:12px 0}.clue{padding:14px;border-radius:15px;background:#ffbd7320;border:1px solid #ffc77740;color:#fff0d6;line-height:1.7;margin:12px 0}.room-scene{height:145px;border:1px solid #ffffff15;border-radius:16px;background:linear-gradient(#343247,#393047 57%,#272333 57%);position:relative;overflow:hidden;margin:13px 0}.room-scene:before{content:'';position:absolute;inset:0 0 43% 0;background:radial-gradient(circle at 50% 15%,#fbd99c33,transparent 22%)}.room-window{position:absolute;top:19px;left:18%;width:61px;height:67px;border:4px solid #837298;border-radius:7px;background:linear-gradient(145deg,#9b82b733,#3b3b5966)}.room-door{position:absolute;bottom:0;right:39%;width:54px;height:93px;border:4px solid #a18172;border-bottom:0;border-radius:27px 27px 0 0;background:#4e3d42}.room-door:after{content:'✦';position:absolute;top:42px;right:7px;color:#ffca7c}.room-chest{position:absolute;bottom:8px;left:17%;font-size:31px}.room-moon{position:absolute;top:20px;right:18%;font-size:26px}.inline-form{display:flex;gap:8px;margin-top:10px}.inline-form input{min-width:0;flex:1;border:1px solid #ffffff20;background:#10111b;color:var(--white);border-radius:12px;padding:11px 12px;font:14px 'Tajawal',sans-serif;outline:none}.inline-form input:focus{border-color:#ff79b3}.action-button{border:0;border-radius:12px;padding:10px 14px;background:linear-gradient(120deg,#ff72ad,#bb7af5);color:#201425;font:700 13px 'Tajawal',sans-serif;cursor:pointer;white-space:nowrap}.secondary-button{background:#ffffff12;color:#f8f5ff;border:1px solid var(--line)}.log-list{list-style:none;padding:0;margin:13px 0 0;display:grid;gap:7px}.log-list li{font-size:13px;color:#c9c5d5;padding:9px 11px;border-radius:10px;background:#ffffff08;line-height:1.5}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:12px 0}.stat{border:1px solid var(--line);background:#ffffff08;border-radius:13px;padding:9px 6px;text-align:center}.stat b{display:block;font-size:19px;color:#ffdda5}.stat small{font-size:10px;color:var(--muted)}.island-art{height:133px;border-radius:17px;margin:13px 0;background:radial-gradient(ellipse at 51% 74%,#51d9aa 0 24%,#277c78 25% 36%,transparent 37%),radial-gradient(ellipse at 48% 83%,#3cbb9a 0 15%,transparent 16%),linear-gradient(#26294a,#6ca9ba);position:relative;overflow:hidden}.island-art:after{content:'☁️        ☁️';position:absolute;top:15px;right:10%;font-size:22px;letter-spacing:28px}.island-art span{position:absolute;z-index:1;bottom:27px;left:50%;transform:translateX(-50%);font-size:45px}.choice-list{display:grid;gap:8px;margin-top:12px}.choice-button{border:1px solid #ffffff18;border-radius:13px;background:#ffffff0b;color:var(--white);padding:12px;text-align:right;font:600 14px 'Tajawal',sans-serif;cursor:pointer}.choice-button:hover{border-color:#b891ff77;background:#aa8cff15}.wait-note,.success-note{padding:12px;border-radius:12px;background:#ffffff0b;color:#d3ccdf;font-size:13px;margin-top:12px}.success-note{background:#67dfb216;color:#c5ffe4}.chase-canvas{width:100%;display:block;margin:13px auto 10px;border:1px solid #ffffff1a;border-radius:15px;background:#1b2530;touch-action:none}.dpad{width:176px;margin:12px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.dpad button{height:43px;border:1px solid #ffffff1c;border-radius:12px;background:#ffffff0c;color:white;font-size:19px;touch-action:manipulation}.dpad button:active{background:#ff78b533}.legend{display:flex;justify-content:center;gap:15px;color:var(--muted);font-size:11px;margin-top:8px}.legend span:first-child{color:#ff88bd}.legend span:last-child{color:#a98aff}.timer{color:#ffd68c;font-size:12px;font-weight:700}.game-controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}@media(max-width:380px){.app-shell{padding:17px 15px}.welcome h1{font-size:34px}.game-card{padding:11px}.game-copy{padding:0 10px}.game-copy small{font-size:11px}}