@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');
:root{font-family:'IBM Plex Sans Arabic',Tahoma,sans-serif;color:#fff8ea;background:#0c1516;font-synthesis:none}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden}
button{font:inherit;cursor:pointer}
.game{position:relative;width:100vw;height:100dvh;display:grid;place-items:center;background:#0c1516;overflow:hidden}
.stage{position:relative;width:min(100vw,calc(100dvh * 1672 / 941));aspect-ratio:1672/941;max-height:100dvh;overflow:hidden;background:#24332d;isolation:isolate;box-shadow:0 0 90px #0009}
.scene-image,.scene-layers,.hotspots{position:absolute;inset:0;width:100%;height:100%}
.scene-image{object-fit:fill;user-select:none;pointer-events:none}
.scene-layers{pointer-events:none}
.scene-layer{position:absolute;display:block;pointer-events:none}
.hotspots{z-index:2}
.hotspot{position:absolute;border:2px solid transparent;background:transparent;border-radius:10px;padding:0;outline-offset:3px;touch-action:none}
.hotspot:hover,.hotspot:focus-visible,.hotspot.drop-ready{border-color:#ffe3a1;background:#ffe5a126;box-shadow:0 0 0 4px #ffda9b44}
.hotspot:focus-visible{outline:2px solid white}
.hotspot .hint{position:absolute;left:50%;bottom:100%;transform:translate(-50%,-5px);white-space:nowrap;color:#fff8e8;background:#18352fe9;padding:4px 11px;border-radius:999px;font-size:clamp(10px,.9vw,13px);pointer-events:none;opacity:0;transition:opacity .15s}
.hotspot:hover .hint,.hotspot:focus-visible .hint,.stage.debug .hotspot .hint{opacity:1}
.hotspot.discovery-glow::after{content:"";position:absolute;left:50%;top:50%;width:clamp(24px,3vw,48px);height:clamp(24px,3vw,48px);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;background:radial-gradient(circle,#fff4b9e8 0,#ffe49c91 23%,#ffd37838 52%,transparent 72%);box-shadow:0 0 16px 8px #ffd8876b;animation:discover-pulse 1.35s ease-out both}
.hotspot.discovery-glow .hint{opacity:1}
@keyframes discover-pulse{0%{opacity:0;scale:.55}35%{opacity:1;scale:1}100%{opacity:0;scale:1.45}}
.stage.debug .hotspot{border-color:#ffdb74;background:#ffdb7433}
.scene-tag,.game-tools,.inventory,.story-text,.stage-actions{position:absolute;z-index:4}
.scene-tag{right:2%;top:2.2%;display:flex;align-items:center;gap:12px;background:#112a29c9;border:1px solid #fff2;border-radius:9px;padding:7px 12px;box-shadow:0 5px 20px #0003;backdrop-filter:blur(8px)}
.scene-tag strong{font-family:Amiri,serif;font-size:clamp(17px,1.6vw,27px);line-height:1}
.scene-tag span{font-size:clamp(9px,.75vw,12px);color:#f1d298}
.game-tools{top:2.2%;left:2%;display:flex;gap:7px}
.game-tools button,.stage-actions button{display:grid;place-items:center;width:clamp(32px,2.8vw,43px);height:clamp(32px,2.8vw,43px);border:1px solid #fff5;border-radius:8px;background:#102827bc;color:#fff8e9;font-size:23px;line-height:1;backdrop-filter:blur(8px)}
.game-tools button:hover,.stage-actions button:hover{background:#275049}
.story-text{bottom:calc(2.5% + 58px);left:2.2%;width:min(43%,550px);min-height:36px;max-height:40%;overflow:hidden;padding:7px 12px;border-radius:9px;background:#122b29a8;border:1px solid #f3dfad5c;box-shadow:0 7px 24px #0004;backdrop-filter:blur(6px);font-family:Amiri,serif;font-size:clamp(14px,1.45vw,23px);line-height:1.35;text-align:right;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s ease}
.story-text.visible{opacity:1;visibility:visible}
.inventory{bottom:2.5%;left:2.2%;width:clamp(230px,34vw,460px);height:clamp(88px,12vw,153px);background:none;box-shadow:none;border:0}
.inventory.collapsed{width:52px;height:52px}
.inventory-panel{position:absolute;left:0;bottom:0;width:clamp(230px,34vw,460px);height:clamp(88px,12vw,153px);padding:clamp(6px,.75vw,11px);border-radius:12px;background:linear-gradient(135deg,#102622dc,#173b38bc);border:1px solid #f4dda86e;box-shadow:0 10px 30px #0008,inset 0 1px #fff2;backdrop-filter:blur(12px);transition:opacity .18s ease,visibility .18s ease}
.inventory.collapsed .inventory-panel{opacity:0;visibility:hidden;pointer-events:none}
.inventory-toggle{position:absolute;z-index:2;left:6px;top:6px;width:26px;height:26px;display:grid;place-items:center;padding:2px;border:1px solid #f4d99e99;border-radius:8px;color:#ffdfa1;background:#1b3933e8;box-shadow:0 5px 17px #0008;touch-action:none}
.inventory.collapsed .inventory-toggle{left:0;top:0;width:52px;height:52px}
.inventory-toggle svg{width:20px;height:20px;fill:#d4a96755;stroke:#f8d99f;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.inventory.collapsed .inventory-toggle svg{width:32px;height:32px}
.inventory-badge{position:absolute;right:-5px;bottom:-5px;min-width:19px;height:19px;display:grid;place-items:center;padding:0 3px;border-radius:10px;background:#f0c67b;color:#20322b;font-size:11px;font-weight:700}
.inventory-heading{display:flex;justify-content:space-between;align-items:center;min-height:26px;margin-bottom:5px;color:#ffe5ab;font-size:clamp(10px,.95vw,15px);line-height:1}
.inventory-heading{padding-left:44px}
.inventory-heading span{font-size:clamp(9px,.75vw,12px);color:#e9f0ddbb}
.inventory-items{height:calc(100% - 31px);display:flex;direction:ltr;align-items:center;gap:6px;overflow:hidden}
.item{position:relative;flex:0 0 auto;width:var(--slot-size,64px);height:var(--slot-size,64px);display:grid;place-items:center;overflow:hidden;border:1px solid #f5e1a965;border-radius:8px;background:#e9dbb51c;color:#f9ecda;padding:3px;touch-action:none}
.item:hover,.item:focus-visible{border-color:#ffe1a0;background:#fbe7b938}
.item img{display:block;min-width:0;min-height:0;width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 4px 2px #0007)}
.item .item-name{position:absolute;bottom:-1px;left:0;right:0;background:#102a27d9;font-size:clamp(8px,.65vw,10px);line-height:1.1;white-space:nowrap;text-align:center;border-radius:0 0 7px 7px}
.item.empty{width:100%;border-style:dashed;display:flex;justify-content:center;font-size:clamp(10px,.8vw,13px);color:#ece3c7aa}
.stage-actions{right:2%;bottom:2.5%;display:flex;gap:7px}
.fullscreen-glyph{width:19px;height:19px;border:2px solid currentColor;display:block}
.drag-ghost{position:fixed;z-index:30;width:74px;height:74px;object-fit:contain;pointer-events:none;filter:drop-shadow(0 7px 5px #000a)}
.inventory.drop-ready .inventory-panel,.inventory.drop-ready .inventory-toggle{border-color:#ffe2a0;box-shadow:0 0 0 4px #ffe4aa66,0 10px 30px #0008}
.dialog-backdrop{position:absolute;z-index:20;inset:0;background:#071512ac;display:grid;place-items:center;padding:20px}
.hidden{display:none}
.dialog-card{width:min(530px,90%);max-height:85%;overflow:auto;padding:20px 25px;background:#fbf4e4;color:#264039;border:1px solid #e1c898;border-radius:15px;box-shadow:0 25px 80px #0009}
.dialog-top{display:flex;align-items:start;justify-content:space-between;color:#ad7933;font-size:12px;font-weight:700}
.dialog-controls{display:flex;align-items:center;gap:9px}
.dialog-top button{border:0;background:none;color:#47605a;font-size:28px;line-height:1}
.dialog-top #dialog-audio{font-size:18px;padding:3px}
.dialog-card h2{font-family:Amiri,serif;font-size:clamp(25px,2.2vw,34px);line-height:1.2;margin:7px 0}
.dialog-card h2:focus{outline:none}
.dialog-card p{font-family:Amiri,serif;font-size:clamp(17px,1.55vw,23px);line-height:1.55;white-space:pre-line;margin:0 0 19px}
.dialog-card .quiz-hint{padding:8px 10px;margin:-8px 0 13px;border-radius:8px;background:#fff1c8;color:#775228;font-size:clamp(15px,1.25vw,19px)}
.dialog-card .quiz-hint.hidden{display:none}
.dialog-choices{display:flex;gap:8px;flex-wrap:wrap}
.dialog-choices button{border:1px solid #c9b185;background:#efe4cb;color:#254039;border-radius:8px;padding:8px 13px;font-size:13px;font-weight:600}
.dialog-choices button:first-child{background:#254b42;color:#fff;border-color:#254b42}
.dialog-card.quiz-options .dialog-choices button:first-child{background:#efe4cb;color:#254039;border-color:#c9b185}
.dialog-choices button:hover{filter:brightness(.93)}
.dialog-card.has-media{width:min(950px,94%);max-height:92%;padding:clamp(12px,1.6vw,22px)}
.dialog-card.has-media h2{margin:3px 0 9px}
.dialog-image{display:block;width:100%;max-height:48vh;aspect-ratio:1672/941;object-fit:contain;border-radius:9px;background:#ddcdb1;box-shadow:0 5px 18px #3b2d1d30}
.dialog-image.hidden{display:none}
.dialog-card.has-media p{margin:10px 0 15px}
.dinner-summary{position:absolute;z-index:5;left:2.5%;top:9%;width:min(31%,470px);padding:clamp(15px,1.5vw,24px);color:#fff4de;background:linear-gradient(135deg,#162c2adf,#192320d9);border:1px solid #d8ad68a1;border-radius:13px;box-shadow:0 16px 50px #0007;backdrop-filter:blur(12px)}
.dinner-summary.hidden{display:none}
.dinner-eyebrow{display:block;font-size:clamp(10px,.8vw,13px);letter-spacing:.04em;color:#edc984}
.dinner-summary h2{font-family:Amiri,serif;font-size:clamp(29px,2.7vw,43px);line-height:1;margin:7px 0 16px}
.dinner-summary ul{list-style:none;margin:0 0 18px;padding:0}
.dinner-summary li{display:grid;grid-template-columns:24px 1fr;gap:9px;align-items:start;padding:8px 0;border-top:1px solid #f9e7bc30;font-size:clamp(12px,1vw,16px);line-height:1.35}
.dinner-summary li:first-child{border-top:0}
.dinner-summary li .achievement-mark{color:#f3cf83;font-weight:700}
.dinner-summary li.pending{color:#e7e6d0b0}
.dinner-summary button{border:1px solid #e5c788a6;background:#e6c584;color:#1f3029;padding:7px 13px;border-radius:7px;font-weight:700;font-size:clamp(11px,.9vw,14px)}
.dinner-summary button:hover{background:#f3d99b}
.stage.dinner .inventory,.stage.dinner .story-text,.stage.dinner .hotspots{display:none}
@media(max-width:700px){.scene-tag span{display:none}.story-text{width:min(72%,360px);bottom:calc(2.5% + 52px);font-size:clamp(12px,3vw,16px);line-height:1.2;max-height:34%;padding:5px 8px}.inventory{width:min(68vw,310px);height:clamp(86px,16vw,110px)}.inventory.collapsed{width:44px;height:44px}.inventory-panel{width:min(68vw,310px);height:clamp(86px,16vw,110px);padding:6px}.inventory.collapsed .inventory-toggle{width:44px;height:44px}.inventory-toggle{width:26px;height:26px;left:4px;top:4px}.inventory-toggle svg{width:20px;height:20px}.inventory.collapsed .inventory-toggle svg{width:27px;height:27px}.inventory-heading{min-height:24px;margin-bottom:2px;padding-left:35px}.inventory-items{height:calc(100% - 26px)}.stage-actions{bottom:3%}.game-tools button,.stage-actions button{width:28px;height:28px;font-size:18px}.fullscreen-glyph{width:15px;height:15px}.dialog-choices button{min-height:38px}}
@media(max-width:700px){.dinner-summary{left:2%;top:9%;width:46%;padding:9px}.dinner-summary h2{margin:3px 0 5px}.dinner-summary li{padding:3px 0;grid-template-columns:13px 1fr;gap:3px;font-size:9px}.dinner-summary button{font-size:9px;padding:4px 6px}.dialog-card.has-media{max-height:95%;padding:9px}.dialog-image{max-height:43vh}.dialog-card.has-media p{font-size:15px;line-height:1.3;margin:6px 0}.dialog-card.has-media h2{font-size:20px}.dialog-choices button{padding:5px 8px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}