/* Aashi.exe styles — a fictional love-themed operating system */
@font-face { font-family: "Press Start 2P"; src: local("Press Start 2P"), url("fonts/PressStart2P.woff2") format("woff2"); font-display: swap; }
:root {
  --pink:#ff3fa4; --hotpink:#ff8fd0; --lavender:#b9a2ff; --sky:#5cc8ff; --navy:#0b0f3a; --navy2:#171d6b; --pearl:#f7f3ff; --chrome:#dfe8ff; --gold:#ffd86b;
  --px: "Press Start 2P", "Courier New", ui-monospace, Menlo, Consolas, monospace;
  --body: Tahoma, Verdana, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --hud-h: 30px; --task-h: 30px;
  --win-bg: rgba(16,20,84,.9); --win-border: #f7f3ff; --text: #f7f3ff;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); --safe-t: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; background: var(--navy); color: var(--text); font-family: var(--body); touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body { position: fixed; inset: 0; width: 100%; }
#app { position: absolute; inset: 0; height: var(--app-h, 100dvh); display: flex; flex-direction: column; overflow: hidden;
  background: radial-gradient(ellipse at 70% 10%, #3a2a8a 0%, transparent 55%), radial-gradient(ellipse at 10% 90%, #7a1f78 0%, transparent 50%), linear-gradient(180deg, #0b0f3a, #14185e 60%, #1f1670); }
#app::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(1.5px 1.5px at 20px 30px, #fff 50%, transparent 51%), radial-gradient(1px 1px at 90px 80px, #cfe 50%, transparent 51%), radial-gradient(1.5px 1.5px at 140px 20px, #fdf 50%, transparent 51%); background-size: 160px 110px; opacity: .55; animation: drift 90s linear infinite; pointer-events: none; }
@keyframes drift { to { background-position: -640px 440px; } }
button { font: inherit; color: inherit; }
:focus { outline: none; }
:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px var(--pink); border-radius: 8px; }

/* HUD & taskbar */
#hud, #taskbar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 0 8px; position: relative; z-index: 5; background: linear-gradient(180deg, #e9efff, #b9a2ff 55%, #ff9ad5); color: var(--navy); font-family: var(--px); font-size: 9px; border-color: #fff; }
#hud { height: calc(var(--hud-h) + var(--safe-t)); padding-top: var(--safe-t); border-bottom: 2px solid #fff; }
#taskbar { height: calc(var(--task-h) + var(--safe-b)); padding-bottom: var(--safe-b); border-top: 2px solid #fff; }
#hud[hidden] { display: none; }
.hud-title { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip { background: var(--navy); color: var(--pearl); padding: 5px 8px; border-radius: 10px; white-space: nowrap; }
.chip:empty { display: none; }
.hud-btns { display: flex; gap: 6px; }
.icon-btn { min-width: 30px; height: 24px; border-radius: 8px; border: 2px solid var(--navy); background: linear-gradient(180deg, #fff, #cfd9ff 50%, #ffb0dc); color: var(--navy); font-family: var(--px); font-size: 9px; cursor: pointer; padding: 0 6px; }
.start-btn { height: 24px; border-radius: 12px; border: 2px solid var(--navy); background: linear-gradient(180deg, #ffd0ec, #ff3fa4 60%, #ff7ac8); color: #fff; text-shadow: 0 1px 0 var(--navy); font-family: var(--px); font-size: 9px; padding: 0 12px; cursor: pointer; }
.task-item { flex: 1; background: rgba(255,255,255,.45); border: 2px inset #fff; border-radius: 6px; padding: 4px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tray { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.4); border-radius: 8px; padding: 2px 8px; }

/* Stage */
#stagewrap { position: relative; flex: 1 1 auto; min-height: 0; z-index: 1; }
#canvasbox { position: absolute; left: 0; top: 0; width: 320px; height: 180px; border: 3px solid #fff; border-radius: 6px; box-shadow: 0 0 0 3px var(--pink), 0 0 30px rgba(255,63,164,.55); overflow: hidden; background: var(--navy); box-sizing: content-box; transform: translate(-3px,-3px); }
#game { width: 100%; height: 100%; display: block; image-rendering: pixelated; image-rendering: crisp-edges; touch-action: none; }
#scan { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 60%, rgba(0,0,20,.35)); }
.scanlines #scan { opacity: 1; }

/* Windows */
#modals { position: absolute; inset: 0; pointer-events: none; display: flex; justify-content: center; align-items: center; padding: 10px; z-index: 20; }
#modals .layer { position: absolute; inset: 0; display: flex; padding: 10px; pointer-events: none; }
#modals .layer.scrim { background: rgba(5,6,30,.55); pointer-events: auto; }
#modals .layer.center { justify-content: center; align-items: center; }
#modals .layer.bottom { justify-content: center; align-items: flex-end; }
#modals .layer.dock { justify-content: flex-end; align-items: center; padding-right: 4%; }
[data-orient="portrait"] #modals .layer.bottom, [data-orient="portrait"] #modals .layer.dock { top: var(--cv-bottom, 0px); align-items: flex-start; justify-content: center; padding: 8px 10px; }
.win { pointer-events: auto; width: min(560px, 100%); max-height: 100%; display: flex; flex-direction: column; background: var(--win-bg); border: 2px solid var(--win-border); border-radius: 12px; box-shadow: 0 0 0 2px var(--pink), 0 10px 40px rgba(0,0,0,.5), 0 0 40px rgba(185,162,255,.35); backdrop-filter: blur(6px); overflow: hidden; animation: winIn .22s ease-out; }
.layer.dock .win { width: min(480px, 100%); }
[data-orient="landscape"] .layer.dock .win { width: min(480px, 46%); min-width: 300px; }
@keyframes winIn { from { transform: scale(.86); opacity: 0; } to { transform: none; opacity: 1; } }
.win-title { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: linear-gradient(180deg, #fff, #d4defc 45%, #b9a2ff 55%, #ff9ad5); color: var(--navy); font-family: var(--px); font-size: 10px; border-bottom: 2px solid #fff; }
.win-title .t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pips { display: flex; gap: 4px; } .pips i { width: 10px; height: 10px; border-radius: 50%; background: rgba(11,15,58,.35); border: 1px solid var(--navy); }
.win-x { width: 24px; height: 22px; border-radius: 7px; border: 2px solid var(--navy); background: linear-gradient(180deg, #ffd0ec, #ff3fa4); color: #fff; font-family: var(--px); font-size: 10px; cursor: pointer; }
.win-body { padding: 14px; overflow: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; font-size: 16px; line-height: 1.45; }
.win-btns { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 14px; justify-content: flex-end; }
.win-btns.stack { flex-direction: column; }
.btn { min-height: 44px; padding: 8px 16px; border-radius: 14px; border: 2px solid #fff; background: linear-gradient(180deg, #fff 0%, #dfe8ff 48%, #b9c6ff 52%, #d9c9ff 100%); color: var(--navy); font-family: var(--px); font-size: 11px; cursor: pointer; box-shadow: 0 3px 0 var(--navy2), inset 0 1px 0 #fff; text-align: center; }
.btn.primary { background: linear-gradient(180deg, #ffe0f1 0%, #ff8fd0 48%, #ff3fa4 52%, #ff6fba 100%); color: #fff; text-shadow: 0 1px 0 var(--navy); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--navy2); }
.btn[aria-pressed="true"], .opt[aria-checked="true"] { outline: 3px solid var(--gold); }
.big-title { font-family: var(--px); font-size: clamp(18px, 4.6vw, 30px); line-height: 1.25; margin: 0 0 6px; background: linear-gradient(180deg, #fff, #ffb0e0 50%, #7fd4ff); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 var(--navy)); }
.muted { color: #cfd6ff; } .small { font-size: 13px; }
.dlg-text { min-height: 3.2em; font-size: 17px; }
.dlg-speaker { font-family: var(--px); font-size: 9px; color: var(--hotpink); margin-bottom: 6px; }
.row { display: flex; align-items: center; gap: 10px; margin: 10px 0; flex-wrap: wrap; } .row label { flex: 1 1 140px; }
input[type=range] { flex: 1 1 140px; height: 32px; accent-color: var(--pink); }
input[type=checkbox] { width: 24px; height: 24px; accent-color: var(--pink); }
table.keys { border-collapse: collapse; width: 100%; font-size: 14px; } table.keys td { padding: 5px 6px; border-bottom: 1px solid rgba(255,255,255,.2); } table.keys td:first-child { font-family: var(--px); font-size: 9px; color: var(--hotpink); white-space: nowrap; }
.opts { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 12px; }
.opt { flex: 1 1 90px; min-height: 48px; border: 2px solid #fff; border-radius: 12px; background: rgba(255,255,255,.1); padding: 6px; display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; text-align: left; }
.opt .sw { width: 22px; height: 22px; border: 2px solid #fff; flex: none; display: grid; place-items: center; font-size: 12px; border-radius: 4px; color: #0b0f3a; }
.opt[aria-checked="true"] { background: rgba(255,216,107,.25); }
.opt[aria-checked="true"]::after { content: "✓"; margin-left: auto; font-weight: bold; color: var(--gold); }
.group-title { font-family: var(--px); font-size: 9px; color: var(--hotpink); margin-top: 6px; }
.studio { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; } .studio canvas { width: 120px; height: 120px; image-rendering: pixelated; background: rgba(0,0,0,.25); border-radius: 10px; border: 2px solid #fff; flex: none; }
.studio .pickers { flex: 1 1 220px; }
.typed { min-height: 4.6em; font-size: 17px; line-height: 1.5; } .caret::after { content: "▌"; animation: blink 1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } }
.stats { font-size: 13px; color: #cfd6ff; margin: 8px 0; } .card-preview { width: 100%; max-width: 320px; border-radius: 10px; border: 2px solid #fff; display: block; margin: 8px auto; -webkit-touch-callout: default; -webkit-user-select: auto; user-select: auto; }

/* Feedback, toasts, status, actions */
#feedback { position: absolute; z-index: 8; pointer-events: none; left: 50%; transform: translateX(-50%); max-width: 92%; font-size: 14px; padding: 6px 12px; border-radius: 12px; border: 2px solid #fff; background: rgba(16,20,84,.92); opacity: 0; transition: opacity .2s; text-align: center; }
#feedback.show { opacity: 1; } #feedback.bad { border-style: dashed; }
#toasts { position: absolute; z-index: 30; top: 8px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 10px; }
#toasts .win { width: min(380px, 100%); }
#sceneActions { position: absolute; z-index: 9; display: none; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; }
#sceneActions.on { display: flex; }
#status { position: absolute; z-index: 3; left: 10px; right: 10px; padding: 10px 12px; border: 2px solid #fff; border-radius: 12px; background: rgba(16,20,84,.75); }
#status[hidden] { display: none; }
.status-title { font-family: var(--px); font-size: 10px; color: var(--hotpink); margin-bottom: 6px; line-height: 1.4; } .status-text { font-size: 16px; }
.meter { height: 12px; margin-top: 8px; border: 2px solid #fff; border-radius: 8px; overflow: hidden; } .meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--pink), var(--sky)); transition: width .3s; } .meter[hidden] { display: none; }

/* Touch controls */
#controls { position: absolute; inset: 0; z-index: 10; pointer-events: none; display: none; }
.touch.has-controls #controls { display: block; }
.touch.modal-open #controls { opacity: 0; visibility: hidden; }
#controls .cluster { position: absolute; bottom: calc(8px + var(--safe-b)); display: flex; gap: 10px; align-items: flex-end; }
#controls .left { left: calc(10px + var(--safe-l)); } #controls .right { right: calc(10px + var(--safe-r)); }
#controls button { pointer-events: auto; touch-action: none; width: 62px; height: 62px; border-radius: 50%; border: 3px solid #fff; background: radial-gradient(circle at 35% 30%, #fff, #b9a2ff 45%, #6a4fd0); color: var(--navy); font-size: 24px; box-shadow: 0 4px 0 var(--navy2), 0 0 18px rgba(185,162,255,.6); opacity: .92; }
#controls button.big { width: 78px; height: 78px; background: radial-gradient(circle at 35% 30%, #fff, #ff8fd0 45%, #ff3fa4); } #controls button.small { width: 52px; height: 52px; font-size: 20px; }
#controls button.down { transform: scale(.93); filter: brightness(1.15); }
[data-orient="landscape"] #controls .cluster { flex-direction: row; } [data-orient="landscape"] #controls .left { flex-direction: column-reverse; align-items: center; }
[data-orient="landscape"] #controls .left { flex-direction: row; } [data-orient="landscape"] #controls .right { flex-direction: column; align-items: center; }

/* Boot, loading, transition */
#boot { position: absolute; inset: 0; z-index: 60; background: #05061c; padding: 20px; font-family: var(--px); font-size: clamp(9px, 2.4vw, 13px); line-height: 2; color: var(--hotpink); cursor: pointer; overflow: hidden; }
#boot[hidden] { display: none; } #boot .ok { color: var(--sky); } #boot .gate { position: absolute; left: 0; right: 0; top: 40%; text-align: center; color: var(--pearl); animation: pulse 1.6s ease-in-out infinite; } @keyframes pulse { 50% { opacity: .45; } }
#boot.fade { opacity: 0; transition: opacity .6s; }
#loading { position: absolute; inset: 0; z-index: 70; display: grid; place-items: center; background: var(--navy); transition: opacity .4s; } #loading.gone { opacity: 0; pointer-events: none; }
.load-win { width: min(320px, 86vw); padding: 14px; border: 2px solid #fff; border-radius: 12px; background: var(--win-bg); text-align: center; font-family: var(--px); font-size: 10px; } .load-title { margin-bottom: 12px; color: var(--hotpink); }
.load-bar { height: 18px; border: 2px solid #fff; border-radius: 10px; overflow: hidden; } .load-bar i { display: block; height: 100%; width: 10%; background: repeating-linear-gradient(90deg, var(--pink) 0 8px, var(--sky) 8px 16px); transition: width .25s; } .load-text { margin-top: 10px; color: var(--chrome); }
#transition { position: absolute; inset: 0; z-index: 50; pointer-events: none; display: grid; place-items: center; background: rgba(5,6,28,0); }
#transition .tw { width: min(70vw, 360px); border: 2px solid #fff; border-radius: 12px; overflow: hidden; background: var(--win-bg); box-shadow: 0 0 40px var(--pink); font-family: var(--px); font-size: 10px; text-align: center; }
#transition .tw .win-title { justify-content: flex-start; } #transition .tw p { padding: 22px 10px; margin: 0; }
#transition.closing { pointer-events: auto; background: rgba(5,6,28,.7); transition: background .25s; } #transition.closing .tw { animation: winIn .25s ease-out both; } #transition.opening .tw { animation: winOut .3s ease-in both; }
@keyframes winOut { to { transform: scale(.5); opacity: 0; } }

/* Modes */
.reduced-motion *, .reduced-motion *::before { animation: none !important; transition-duration: .01ms !important; }
.hc { --win-bg: #000; --text: #fff; }
.hc .btn, .hc .opt { background: #fff; color: #000; text-shadow: none; border-color: #fff; } .hc .btn.primary { background: #ffe14a; color: #000; } .hc .win, .hc #status, .hc #feedback { border-width: 3px; box-shadow: none; backdrop-filter: none; } .hc .muted, .hc .stats { color: #fff; }
.hc #hud, .hc #taskbar { background: #fff; } .hc .opt[aria-checked="true"] { background: #333; }

/* Short landscape screens (phones) */
@media (max-height: 460px) { .win-btns.stack { display: grid; grid-template-columns: 1fr 1fr; } .win-btns.stack .btn:first-child:nth-last-child(odd) { grid-column: 1 / -1; } :root { --hud-h: 24px; --task-h: 24px; } .win-body { padding: 10px; font-size: 14px; } .dlg-text, .typed { font-size: 15px; } .win-btns { padding: 0 10px 10px; } .btn { min-height: 40px; font-size: 10px; } .big-title { font-size: 18px; } #hud, #taskbar { font-size: 8px; } .icon-btn, .start-btn { height: 20px; } .win-title { padding: 4px 8px; } }

/* Compact gift studio + tighter option buttons on small screens */
.studio canvas { width: 96px; height: 96px; }
.opt { min-height: 42px; font-size: 12.5px; line-height: 1.15; }
.group-title { margin-top: 2px; }
.opts { margin: 4px 0 8px; }
[data-orient="portrait"] .studio { gap: 8px; } [data-orient="portrait"] .studio .pickers { flex-basis: 100%; }
[data-orient="portrait"] .studio canvas { margin: 0 auto; }
@media (max-height: 460px) { .studio canvas { width: 72px; height: 72px; } .studio { gap: 8px; } .opt { min-height: 36px; padding: 3px 5px; font-size: 11.5px; } .opt .sw { width: 18px; height: 18px; font-size: 10px; } .win-body p { margin: 0 0 6px; } }
[data-orient="landscape"] .layer.dock .win.studio-win { width: min(600px, 64%); }
@media (max-height: 460px) { .studio-win .win-body > p { font-size: 13px; } }