:root{color-scheme:dark;font-family:system-ui,"Noto Sans Arabic",sans-serif;color:#f6fbff;background:#101b49}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
body{background:radial-gradient(ellipse at 8% 8%,#6537cc88,transparent 42%),radial-gradient(ellipse at 95% 72%,#00cdb966,transparent 48%),linear-gradient(155deg,#17275b,#0c4059 58%,#25165e)}
main{width:100%;max-width:560px;height:var(--phone-height,100svh);margin:auto;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));display:grid;grid-template-rows:44px var(--board-height,min(70svh,600px)) var(--dock-height,44px);gap:6px;align-content:center;justify-items:center;position:relative}
button{font:inherit;font-weight:650;color:#123855;background:#f6fdff;border:1px solid #b9e2f0;border-radius:16px;min-height:44px;min-width:44px;padding:9px 14px;cursor:pointer;touch-action:manipulation;overflow-wrap:anywhere;max-width:100%}
button:active{background:#c7ffec}
button:focus-visible{outline:3px solid #ffdf56;outline-offset:3px}
button:disabled{opacity:.48;cursor:default}
.icon-button{display:grid;place-items:center;width:44px;height:44px;min-width:44px;padding:9px;border-radius:50%;box-shadow:0 3px 0 #080f4180,0 5px 16px #030b3e38}
.icon-button svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.primary{color:white;background:linear-gradient(135deg,#3054df,#914fe4);border-color:#b8b6ff;box-shadow:0 3px 0 #172665}
header{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;height:44px}
.brand{display:flex;align-items:center;gap:6px;min-width:0}
.courier{width:32px;height:40px;flex:none;filter:drop-shadow(0 3px 6px #05092b88)}
h1{margin:0;font-size:clamp(18px,5vw,24px);line-height:1.25}
h2{font-size:1.25rem;line-height:1.5;margin:0}
.toolbar{display:grid;grid-template-columns:repeat(var(--dock-columns,4),44px);gap:4px;justify-content:center;align-content:center;max-width:100%}
.postcard{position:relative;isolation:isolate;width:var(--board-width,100%);height:var(--board-height,min(70svh,600px));padding:0;border:0;border-radius:18px;overflow:hidden;box-shadow:0 12px 30px #060c3266,0 0 0 2px #b9fce9,0 3px 0 2px #3cbfc0;background:#23bcd7}
#board{position:absolute;inset:0;overflow:hidden;touch-action:none;user-select:none}
#pixi,#hit-grid,#contact-sparks{position:absolute;inset:0}
#pixi canvas{display:block;width:100%!important;height:100%!important}
#hit-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr)}
#hit-grid button{border:0;background:transparent;border-radius:0;min-width:0;min-height:0;padding:0;touch-action:none}
#hit-grid button:focus-visible{outline:4px solid white;outline-offset:-7px;box-shadow:inset 0 0 0 3px #153ab1}
#hit-grid button:active{box-shadow:inset 0 0 0 4px #ffffffaa}
.facts{position:absolute;z-index:3;inset:8px 8px auto;display:flex;justify-content:space-between;gap:4px;pointer-events:none}
.chip{font-size:12px;font-weight:700;line-height:1.5;max-width:55%;padding:4px 8px;border-radius:20px;color:#f8ffff;background:#102956d9;box-shadow:0 2px 6px #09224a33}
#gesture-note{position:absolute;z-index:3;inset:auto 0 6px;text-align:center;margin:0;font-size:12px;font-weight:700;color:#fffbe1;text-shadow:0 1px 4px #09234c;pointer-events:none}
#start,#boot-retry{position:absolute;z-index:4;inset:50% auto auto 50%;transform:translate(-50%,-50%);max-width:85%;padding:12px 24px;min-height:48px;box-shadow:0 5px 0 #111a69,0 10px 40px #07134299}
#layout-notice,#notice{position:absolute;z-index:5;inset:auto 8px 24px;margin:0;padding:10px;border-radius:12px;background:#11244aee;color:#fff5c9;font-size:.9rem;line-height:1.5;max-height:60%;overflow:auto}
#layout-notice{inset:20% 8px auto}
:root[data-art-loading="true"] #pixi{visibility:hidden}
:root[data-art-loading="true"] #play-space{background:linear-gradient(160deg,#459ce5,#24bcb6)}
#contact-sparks{pointer-events:none;overflow:hidden}
#contact-sparks i{position:absolute;width:6px;height:6px;border-radius:2px;background:var(--colour);box-shadow:0 0 6px var(--colour)}
#mute[aria-pressed="true"] .sound-wave,#mute[aria-pressed="false"] .sound-off{display:none}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
#result{position:fixed;z-index:10;top:50%;left:50%;transform:translate(-50%,-50%);width:min(90vw,420px);max-height:85svh;overflow:auto;padding:18px;color:#102d50;background:linear-gradient(135deg,#fff,#d9ffed);border:2px solid #a6ffe1;border-radius:22px;box-shadow:0 16px 55px #070f5a88}
#result p{line-height:1.5}
.stamp{display:grid;place-items:center;width:48px;height:48px;border:3px dashed #16735f;border-radius:50%;color:#16735f;font-size:1.8rem}
.controls{display:flex;gap:8px;flex-wrap:wrap}
.controls button{flex:1 1 100px}
#paper{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit}
#paper i{position:absolute;width:8px;height:14px;background:var(--colour)}
dialog{width:min(92vw,480px);max-height:90svh;padding:18px;border:1px solid #73bce3;border-radius:20px;color:#103e54;background:#f7fcff;overflow:auto;overscroll-behavior:contain}
dialog::backdrop{background:#080e36b8}
dialog p{font-size:1rem;line-height:1.65}
.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
dialog img{display:block;width:100%;max-height:64svh;object-fit:contain;border-radius:12px;margin-bottom:12px}
#reference-map{padding-inline-start:22px;line-height:1.7}
dialog summary{min-height:44px;display:flex;align-items:center;cursor:pointer}
.settings{margin-top:14px}
.album-card{position:relative;padding:8px;background:#e3f5ff;border:1px solid #79c6e9;border-radius:14px;transform:rotate(-1deg)}
.album-stamp{position:absolute;inset-inline-end:13px;bottom:13px;width:48px;height:48px;display:grid;place-items:center;color:#075f58;border:3px dashed #075f58;border-radius:50%;font-size:1.8rem;background:#f5ffedee;transform:rotate(-12deg)}
:root[data-landscape="true"] main{max-width:none;grid-template-columns:44px minmax(0,1fr)44px;grid-template-rows:var(--board-height);gap:6px;align-items:center}
:root[data-landscape="true"] header{height:auto;flex-direction:column;gap:8px}
:root[data-landscape="true"] .brand{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
:root[data-landscape="true"] .toolbar{grid-template-columns:44px}
[data-reduced="true"] .album-card,[data-reduced="true"] .album-stamp{transform:none}
[data-reduced="true"] #contact-sparks{display:none}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}}