:root{--forest-900: #050e0b;--forest-800: #08150f;--forest-700: #0d2219;--forest-600: #123024;--emerald: #1f5a44;--moss: #3d8a63;--gold: #e8c07a;--gold-deep: #b98a3c;--gold-soft: #f4dcab;--cream: #f7efdd;--violet: #a878f0;--ink: #07100c;--shadow-lg: 0 24px 70px rgba(0, 0, 0, .65);--font-display: "Rakkas", "Amiri", serif;--font-serif: "Amiri", serif;--font-ui: "Tajawal", system-ui, sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;margin:0}body{background:var(--forest-900);color:var(--cream);font-family:var(--font-ui);overflow:hidden;overscroll-behavior:none;user-select:none;-webkit-user-select:none}#root{display:flex;flex-direction:column}canvas{display:block;width:100%;height:100%}button{font-family:var(--font-ui);cursor:pointer;border:none;background:none;color:inherit}button:disabled{cursor:not-allowed}.stage{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden}.vignette-edge{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 45%,rgba(3,9,6,.55) 100%)}.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 44px;font-size:21px;font-weight:700;letter-spacing:.5px;color:#2a1a06;border-radius:999px;background:linear-gradient(180deg,#f7ddab,#e8c07a 42%,#c99a4a);box-shadow:0 12px 30px #00000080,0 0 0 1px #fff0c899 inset,0 -3px #78501480 inset;transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s ease}.btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 18px 38px #0000008c,0 0 34px #e8c07a66}.btn:active{transform:translateY(1px) scale(.99)}.btn.ghost{background:#0c1e1880;color:var(--gold-soft);border:1px solid rgba(232,192,122,.4);box-shadow:0 6px 18px #0006;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.btn.ghost:hover{background:#162e24b3;border-color:var(--gold)}.btn.small{padding:10px 22px;font-size:15px}.title-ui{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;pointer-events:none}.title-ui>*{pointer-events:auto}.brand-line{display:flex;align-items:center;gap:14px;font-family:var(--font-ui);font-size:12px;letter-spacing:7px;color:#e8c07abf;text-transform:uppercase;margin-bottom:8px;animation:fadeDown 1.4s ease both .2s}.brand-line:before,.brand-line:after{content:"";width:46px;height:1px;background:linear-gradient(90deg,transparent,rgba(232,192,122,.8),transparent)}.game-title{font-family:var(--font-display);font-size:clamp(58px,13vw,148px);line-height:.95;margin:0;background:linear-gradient(180deg,#fff8e4,#f4dcab 30%,#e8c07a 58%,#b98a3c);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 26px rgba(0,0,0,.7)) drop-shadow(0 0 46px rgba(232,192,122,.25));animation:titleIn 1.8s cubic-bezier(.22,1,.36,1) both,titleGlow 5s ease-in-out infinite 2s;letter-spacing:2px}.title-en{font-family:var(--font-ui);font-size:clamp(10px,1.6vw,15px);letter-spacing:12px;color:#f7efdd80;margin-top:6px;animation:fadeDown 1.6s ease both .6s}.tagline{font-family:var(--font-serif);font-size:clamp(16px,2.4vw,24px);color:#f7efddd1;margin:22px 0 34px;text-shadow:0 2px 14px rgba(0,0,0,.8);animation:fadeDown 1.6s ease both .9s}.title-menu{display:flex;flex-direction:column;align-items:center;gap:14px;animation:fadeUp 1.4s ease both 1.2s}.title-foot{position:absolute;bottom:18px;left:0;right:0;display:flex;justify-content:center;gap:22px;font-size:11.5px;color:#f7efdd66;letter-spacing:1px;animation:fadeUp 2s ease both 1.8s}.title-foot b{color:#e8c07ab3;font-weight:500}@keyframes titleIn{0%{opacity:0;transform:translateY(26px) scale(.96);filter:blur(14px)}to{opacity:1;transform:none;filter:blur(0)}}@keyframes titleGlow{0%,to{filter:drop-shadow(0 6px 26px rgba(0,0,0,.7)) drop-shadow(0 0 40px rgba(232,192,122,.2))}50%{filter:drop-shadow(0 6px 26px rgba(0,0,0,.7)) drop-shadow(0 0 70px rgba(232,192,122,.42))}}@keyframes fadeDown{0%{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}@keyframes fadeUp{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes floaty{0%,to{transform:translateY(0)}50%{transform:translateY(-7px)}}.icon-btn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#0918139e;border:1px solid rgba(232,192,122,.28);color:var(--gold-soft);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .2s ease}.icon-btn:hover{border-color:var(--gold);background:#142c22d9;transform:translateY(-2px)}.top-right{position:absolute;top:max(14px,env(safe-area-inset-top));left:14px;display:flex;gap:10px;z-index:6}.top-left{position:absolute;top:max(14px,env(safe-area-inset-top));right:14px;display:flex;gap:10px;z-index:6}.select-footer{position:absolute;bottom:max(16px,env(safe-area-inset-bottom));left:0;right:0;display:flex;align-items:center;justify-content:center;gap:26px;z-index:5;padding:0 20px;animation:fadeUp .9s ease both .3s}.sel-name{display:flex;flex-direction:column;gap:2px;text-align:right;min-width:96px}.sel-label{font-size:10.5px;letter-spacing:2px;color:#f7efdd73}.sel-name strong{font-family:var(--font-display);font-size:30px;line-height:1;text-shadow:0 0 22px currentColor}.carousel-arrows{position:absolute;top:50%;transform:translateY(-50%);z-index:5;display:flex}.carousel-arrows.right{right:10px}.carousel-arrows.left{left:10px}.game-root{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;background:#040a08}.game-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;touch-action:none}.hud-top{position:absolute;top:max(8px,env(safe-area-inset-top));left:10px;right:10px;display:flex;align-items:center;gap:8px;z-index:8;pointer-events:none}.hud-top>*{pointer-events:auto}.hud-chip{display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:#06120e9e;border:1px solid rgba(232,192,122,.22);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-size:12px;color:var(--gold-soft);white-space:nowrap}.hud-chip.items{color:#ffe9b8}.hud-objective{flex:1;display:flex;align-items:center;gap:8px;justify-content:center;padding:7px 16px;border-radius:999px;background:#06120e80;border:1px solid rgba(232,192,122,.14);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-size:12.5px;color:#f7efddd9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.icon-btn.sm{width:36px;height:36px}.hero-card{position:absolute;top:calc(max(8px,env(safe-area-inset-top)) + 46px);left:10px;display:flex;align-items:center;gap:8px;z-index:7;padding:6px 12px 6px 6px;border-radius:14px;background:#06120e80;border:1px solid rgba(232,192,122,.16);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.hc-name{font-family:var(--font-display);font-size:17px;line-height:1.1}.hc-ability{font-size:10px;color:#f7efdd80;letter-spacing:.4px}.portrait-wrap{position:relative;overflow:hidden;background:#08120e;flex:none}.portrait-wrap canvas{display:block}.portrait-glow{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;mix-blend-mode:screen}.controls{position:absolute;bottom:max(10px,env(safe-area-inset-bottom));left:0;right:0;display:flex;align-items:flex-end;justify-content:space-between;padding:0 max(14px,env(safe-area-inset-left)) 0 max(14px,env(safe-area-inset-right));z-index:7;pointer-events:none}.controls>*{pointer-events:auto}.joystick{position:relative;width:clamp(96px,15vh,132px);height:clamp(96px,15vh,132px);border-radius:50%;touch-action:none;background:radial-gradient(circle at 50% 45%,#e8c07a1a,#06120e73 70%);border:1px solid rgba(232,192,122,.24);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:grid;place-items:center;box-shadow:0 10px 30px #00000073,inset 0 0 30px #e8c07a14}.joy-ring{position:absolute;top:16%;right:16%;bottom:16%;left:16%;border-radius:50%;border:1px dashed rgba(232,192,122,.18)}.joy-knob{width:42%;height:42%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#f9e6bd,#c99a4a 70%,#8a6320);box-shadow:0 6px 16px #00000080,inset 0 -2px 6px #78501499;transition:transform .06s linear}.joy-hint{position:absolute;bottom:-16px;font-size:9.5px;color:#f7efdd59;letter-spacing:1px}.action-pad{display:flex;flex-direction:column;align-items:flex-end;gap:8px}.action-pad .row{display:flex;gap:8px;align-items:flex-end}.act-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:clamp(58px,9vh,76px);height:clamp(58px,9vh,76px);border-radius:50%;background:linear-gradient(160deg,#1c3a2ed9,#081410cc);border:1px solid rgba(232,192,122,.3);color:#f4dcab;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 22px #00000073,inset 0 1px #fff0c824;transition:transform .12s ease,box-shadow .12s ease;font-size:9.5px}.act-btn:active{transform:scale(.93)}.act-btn span{font-size:9.5px;letter-spacing:.3px;opacity:.85}.act-btn.small{width:40px;height:40px;border-radius:50%}.act-btn.jump{background:linear-gradient(160deg,#c89646f2,#78501ae6);color:#22140a;border-color:#ffeec880}.act-btn.interact{background:linear-gradient(160deg,#285a48eb,#0c221ae6)}.act-btn.ability{background:linear-gradient(160deg,#5a3c96d9,#1a102ce6);border-color:#b48cf066}.act-btn.ability.pulse{box-shadow:0 0 0 2px #b48cf073,0 0 26px #a878f080;animation:pulseGlow 1.8s ease-in-out infinite}@keyframes pulseGlow{0%,to{box-shadow:0 0 0 1px #b48cf04d,0 0 14px #a878f04d}50%{box-shadow:0 0 0 3px #b48cf080,0 0 30px #a878f099}}@media (max-height: 430px){.hero-card{display:none}.hud-objective{font-size:11px}}.dlg-layer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;display:flex;align-items:flex-end;cursor:pointer}.dlg-bars:before,.dlg-bars:after{content:"";position:absolute;left:0;right:0;height:7vh;background:#030806;animation:barIn .4s ease both}.dlg-bars:before{top:0}.dlg-bars:after{bottom:0;height:0}@keyframes barIn{0%{transform:scaleY(0)}to{transform:scaleY(1)}}.dlg-box{position:relative;width:min(1080px,94vw);margin:0 auto max(18px,env(safe-area-inset-bottom));display:flex;gap:16px;align-items:stretch;padding:16px 18px;border-radius:20px;background:linear-gradient(150deg,#0a1813f0,#060e0bf7);border:1px solid rgba(232,192,122,.3);box-shadow:0 24px 70px #000000b3,inset 0 1px #fff0c814;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);animation:dlgIn .34s cubic-bezier(.22,1,.36,1) both}@keyframes dlgIn{0%{opacity:0;transform:translateY(26px) scale(.98)}to{opacity:1;transform:none}}.dlg-portrait{flex:none;display:flex;align-items:flex-end}.dlg-body{flex:1;display:flex;flex-direction:column;min-width:0}.dlg-name{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:22px;line-height:1}.dlg-badge{font-family:var(--font-ui);font-size:9.5px;letter-spacing:1px;padding:3px 8px;border-radius:999px;background:#e8c07a1f;color:#e8c07acc}.dlg-text{font-size:clamp(15px,1.5vw,18px);line-height:1.75;color:#f2ead8;margin:10px 0 6px;min-height:3.4em}.caret{display:inline-block;width:2px;height:1em;background:var(--gold);margin-inline-start:3px;vertical-align:-2px;animation:blink .9s steps(2) infinite}@keyframes blink{50%{opacity:0}}.dlg-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto}.dlg-count{font-size:10.5px;color:#f7efdd59;letter-spacing:1px}.dlg-next{padding:8px 20px;border-radius:999px;font-size:13px;font-weight:700;color:#2a1a06;background:linear-gradient(180deg,#f7ddab,#d9a95c);box-shadow:0 6px 16px #0006}.dlg-next:active{transform:scale(.96)}.quote-layer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:24;display:grid;place-items:center;background:#02070559}.quote-card{display:flex;align-items:center;gap:14px;padding:14px 20px;border-radius:18px;background:#08140fe6;border:1px solid rgba(232,192,122,.4);box-shadow:0 18px 50px #0009;animation:quoteIn .4s cubic-bezier(.22,1,.36,1) both;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}@keyframes quoteIn{0%{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}.quote-name{font-family:var(--font-display);font-size:20px}.quote-text{font-family:var(--font-serif);font-size:clamp(18px,2.2vw,26px);color:#f7efdd;margin-top:2px}.menu-layer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:26;display:grid;place-items:center;background:#020705a8;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:fadeIn .25s ease both}.menu-card{width:min(420px,90vw);display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px 24px;border-radius:22px;background:linear-gradient(160deg,#0e2019f5,#060e0bfa);border:1px solid rgba(232,192,122,.3);box-shadow:0 30px 80px #000000b3}.menu-card h2{font-family:var(--font-display);font-size:30px;margin:0;color:var(--gold-soft);font-weight:400}.menu-sub{font-size:12px;color:#f7efdd80;margin:0 0 8px}.menu-card .btn{width:100%}.inv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;margin:6px 0 12px}.inv-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 6px;border-radius:14px;background:#ffffff08;border:1px solid rgba(232,192,122,.12);color:#f7efdd73}.inv-item.on{background:#e8c07a1f;border-color:#e8c07a73;color:#ffe9b8}.inv-item strong{font-size:20px;font-family:var(--font-display)}.inv-item span{font-size:10px}.toast{position:absolute;left:50%;bottom:22%;transform:translate(-50%);z-index:30;max-width:min(560px,86vw);padding:11px 18px;border-radius:14px;background:#06120eeb;border:1px solid rgba(232,192,122,.35);color:#f7efdd;font-size:13px;line-height:1.6;text-align:center;box-shadow:0 12px 40px #0000008c;animation:toastIn .3s ease both}@keyframes toastIn{0%{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%)}}.flash{position:absolute;top:0;right:0;bottom:0;left:0;background:#ffe9c0;z-index:28;pointer-events:none;animation:flashOut .32s ease-out both}@keyframes flashOut{0%{opacity:.55}to{opacity:0}}.fade-screen{position:absolute;top:0;right:0;bottom:0;left:0;background:#02060a;z-index:27;pointer-events:none;animation:fadeIn .3s ease both}.victory-layer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:32;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,#1e3c2dd9,#020705f7);animation:fadeIn .6s ease both;overflow-y:auto;padding:20px}.victory-card{width:min(620px,94vw);display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}.v-eyebrow{font-size:11px;letter-spacing:6px;color:#e8c07ab3}.v-title{font-family:var(--font-display);font-size:clamp(38px,7vw,64px);margin:0;background:linear-gradient(180deg,#fff8e4,#e8c07a 60%,#b98a3c);-webkit-background-clip:text;background-clip:text;color:transparent}.v-body{font-size:14.5px;line-height:1.9;color:#f7efddd1;max-width:480px}.v-quote{font-family:var(--font-serif);font-size:17px;color:var(--gold-soft)}.v-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}@media (max-width: 620px){.dlg-box{flex-direction:column;align-items:flex-start;gap:8px;padding:12px 14px}.dlg-portrait{position:absolute;top:-56px;right:12px}.dlg-text{font-size:14px;min-height:3em}.hud-objective{display:none}}@media (max-width: 620px){.joystick{width:clamp(84px,13vh,108px);height:clamp(84px,13vh,108px)}.act-btn{width:clamp(50px,8.2vh,64px);height:clamp(50px,8.2vh,64px)}.act-btn.small{width:34px;height:34px}.act-btn span{font-size:8px}.hero-card{padding:6px 8px;gap:7px}.hc-name{font-size:14px}.hc-ability{font-size:9px}.hud-top{padding:8px 10px;gap:6px}.hud-chip,.hud-objective{font-size:11px;padding:5px 9px}.title-menu .btn{font-size:15px}}