@import url('../fonts/fonts.css');

/* ============================ tokens ============================ */
:root {
  --bg0:#160a2e; --bg1:#241150; --bg2:#3a1d78;
  --ink:#fdf6ff; --dim:#c9b8ff;
  --pink:#ff4d6d; --yellow:#ffd23f; --teal:#3bceac; --blue:#5b8cff; --orange:#ff9f1c;
  --pixel:'Press Start 2P';
  --shadow:#0a0518;
  --frame:#0a0518;
}

*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; width:100%; max-width:100%; overflow-x:hidden; }
body{
  font-family:var(--pixel), 'Vazirmatn', monospace;
  color:var(--ink);
  background:
    radial-gradient(120% 90% at 50% -10%, var(--bg2), var(--bg1) 45%, var(--bg0) 100%);
  min-height:100%;
  overflow-x:hidden;
  line-height:1.6;
  -webkit-font-smoothing:none;
}
/* Persian: readable sans, still on the neon cabinet. */
html[dir='rtl'] body,
html[dir='rtl'] .pixel,
html[dir='rtl'] button,
html[dir='rtl'] input,
html[dir='rtl'] textarea{ font-family:'Vazirmatn', var(--pixel), sans-serif; line-height:1.9; }
.brand{ font-family:var(--pixel) !important; } /* latin brand stays pixel even in FA */

/* scanline + grid overlay */
body::before{
  content:''; position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 2px, transparent 2px 4px),
    linear-gradient(rgba(120,80,220,.06), rgba(0,0,0,0));
  mix-blend-mode:multiply;
}
body::after{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.25;
  background-image:
    linear-gradient(rgba(123,97,255,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(123,97,255,.14) 1px, transparent 1px);
  background-size:40px 40px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 20%, #000, transparent 80%);
          mask-image:radial-gradient(120% 80% at 50% 20%, #000, transparent 80%);
}

/* ============================ layout ============================ */
#app{ position:relative; z-index:2; min-height:100vh; overflow-x:hidden; }
.screen{
  display:none;
  min-height:100vh;
  padding:84px 16px 64px;
  flex-direction:column; align-items:center; justify-content:flex-start; text-align:center;
}
.screen.active{ display:flex; animation:screen-in .45s ease-out both; }
/* min-width:0 is essential: keeps this flex child from ballooning to the width
   of its widest (unbreakable pixel/Persian) line and overflowing the viewport. */
.wrap{ width:100%; max-width:min(720px, 100%); min-width:0; margin:0 auto; }
.brand, h2.title, .tagline, .question, .card h3, .press-start .ps,
.body-text, .detail-value, .choice .cap{ overflow-wrap:anywhere; word-break:break-word; }

/* fx layer */
#fx{ position:fixed; inset:0; z-index:9; pointer-events:none; }

/* ============================ topbar ============================ */
#topbar{
  position:fixed; top:0; left:0; right:0; z-index:12;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px;
  background:linear-gradient(rgba(10,5,24,.9), rgba(10,5,24,0));
}
.lang-switch{ display:flex; gap:6px; }
.lang-btn{
  font-family:var(--pixel); font-size:10px; color:var(--dim);
  background:#1c0f3d; border:2px solid #4a2c9a; padding:8px 9px; cursor:pointer;
  box-shadow:2px 2px 0 var(--shadow); line-height:1;
}
html[dir='rtl'] .lang-btn{ font-family:'Vazirmatn'; }
.lang-btn[aria-pressed='true']{ color:var(--bg0); background:var(--yellow); border-color:var(--yellow); }
.mute-btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--pixel); font-size:9px; color:var(--dim);
  background:#1c0f3d; border:2px solid #4a2c9a; padding:8px 10px; cursor:pointer;
  box-shadow:2px 2px 0 var(--shadow);
}
html[dir='rtl'] .mute-btn{ font-family:'Vazirmatn'; }
.mute-btn .ic{ width:18px; height:18px; color:var(--teal); }
.mute-btn.is-off .ic{ color:#7a6ca8; }
.mute-btn .ic-off{ display:none; }
.mute-btn.is-off .ic-on{ display:none; }
.mute-btn.is-off .ic-off{ display:inline-block; }

/* ============================ typography ============================ */
.brand{
  font-size:clamp(20px, 6.4vw, 44px); line-height:1.25; letter-spacing:1px;
  color:var(--yellow);
  text-shadow:0 0 6px rgba(255,210,63,.5), 3px 3px 0 var(--pink), 6px 6px 0 var(--shadow);
  margin:6px 0 10px;
}
h2.title{
  font-size:clamp(15px, 4.4vw, 26px); line-height:1.35; color:var(--teal);
  text-shadow:2px 2px 0 var(--shadow); margin:6px 0 14px;
}
.tagline{ color:var(--yellow); font-size:clamp(9px,2.6vw,12px); margin:0 0 10px; }
.body-text{ color:var(--ink); font-size:clamp(11px,3vw,14px); line-height:1.9; }
html[dir='rtl'] .body-text{ font-size:clamp(13px,3.6vw,16px); }
.dim{ color:var(--dim); }
.small{ font-size:clamp(8px,2.4vw,11px); }
.p1-badge{
  display:inline-block; font-size:10px; color:var(--bg0); background:var(--pink);
  padding:6px 10px; box-shadow:2px 2px 0 var(--shadow); margin-bottom:10px;
}

/* ============================ character frames ============================ */
.frame{
  display:inline-block; padding:10px; margin:6px auto 14px;
  background:linear-gradient(160deg,#2a1660,#1a0d40);
  border:4px solid var(--frame);
  box-shadow:
    0 0 0 4px #6a3df0, 0 0 0 8px var(--frame),
    0 12px 0 rgba(0,0,0,.35), 0 0 34px rgba(123,97,255,.35);
}
.frame img{ display:block; max-width:100%; height:auto; }
img{ max-width:100%; }
.char{ width:clamp(180px, 52vw, 300px); }
.char-sm{ width:clamp(150px, 44vw, 240px); }
.char-lg{ width:clamp(200px, 62vw, 340px); }
.map-img{ width:clamp(240px, 86vw, 560px); }

.anim-wiggle{ animation:wiggle 2.6s ease-in-out infinite; transform-origin:50% 90%; }
.anim-jiggle{ animation:jiggle 1.5s ease-in-out infinite; }
.anim-twitch{ animation:twitch 3s steps(1) infinite; }
.anim-float{ animation:float 3.4s ease-in-out infinite; }

/* ============================ buttons ============================ */
.btn, button.pixel{
  font-family:var(--pixel); font-size:clamp(11px,3vw,15px); line-height:1.2;
  color:var(--bg0); background:var(--yellow);
  border:0; padding:16px 20px; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  box-shadow:0 6px 0 #b8901a, 0 10px 0 var(--shadow);
  transition:transform .05s, box-shadow .05s; margin:7px;
  image-rendering:auto;
}
html[dir='rtl'] .btn, html[dir='rtl'] button.pixel{ font-family:'Vazirmatn'; font-weight:700; }
.btn:hover, button.pixel:hover{ transform:translateY(-2px); }
.btn:active, button.pixel:active{ transform:translateY(4px); box-shadow:0 2px 0 #b8901a, 0 4px 0 var(--shadow); }
.btn .ic{ width:20px; height:20px; }

.btn-pink{ background:var(--pink); color:#fff; box-shadow:0 6px 0 #b02644, 0 10px 0 var(--shadow); }
.btn-pink:active{ box-shadow:0 2px 0 #b02644, 0 4px 0 var(--shadow); }
.btn-teal{ background:var(--teal); color:#04231b; box-shadow:0 6px 0 #218a70, 0 10px 0 var(--shadow); }
.btn-teal:active{ box-shadow:0 2px 0 #218a70, 0 4px 0 var(--shadow); }
.btn-blue{ background:var(--blue); color:#fff; box-shadow:0 6px 0 #3a5fc0, 0 10px 0 var(--shadow); }
.btn-blue:active{ box-shadow:0 2px 0 #3a5fc0, 0 4px 0 var(--shadow); }
.btn-ghost{
  background:#1c0f3d; color:var(--dim); border:2px solid #4a2c9a;
  box-shadow:0 5px 0 #0a0518;
}
.btn-ghost:active{ box-shadow:0 2px 0 #0a0518; }
.btn-big{ font-size:clamp(13px,3.6vw,18px); padding:20px 26px; }

.btn-row{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; align-items:center; margin-top:8px; }

.yes-no{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:6px; }
.choice{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background:transparent; border:0; cursor:pointer; padding:6px;
}
.choice img{ width:clamp(120px,34vw,168px); height:auto; display:block;
  border:4px solid var(--frame); box-shadow:0 0 0 3px #6a3df0, 0 8px 0 rgba(0,0,0,.35);
  transition:transform .08s; }
.choice:hover img{ transform:translateY(-3px) scale(1.02); }
.choice .cap{ font-family:var(--pixel); font-size:12px; }
html[dir='rtl'] .choice .cap{ font-family:'Vazirmatn'; font-weight:700; }
.choice-yes .cap{ color:var(--teal); }
.choice-no .cap{ color:var(--pink); }

/* ============================ cards / details ============================ */
.card{
  text-align:start; background:rgba(12,6,32,.72); border:3px solid #5a34c0;
  box-shadow:6px 6px 0 var(--shadow), inset 0 0 0 2px rgba(123,97,255,.25);
  padding:16px 18px; margin:14px auto; max-width:620px;
}
.card h3{ font-family:var(--pixel); font-size:12px; color:var(--yellow); margin:0 0 12px; letter-spacing:1px; }
html[dir='rtl'] .card h3{ font-family:'Vazirmatn'; }
.detail-row{ display:flex; gap:12px; align-items:flex-start; margin:12px 0; }
.detail-row .ic{ width:22px; height:22px; color:var(--teal); flex:0 0 auto; margin-top:2px; }
.detail-label{ color:var(--yellow); font-size:10px; display:block; margin-bottom:4px; letter-spacing:1px; }
.detail-value{ color:var(--ink); font-size:clamp(11px,2.9vw,13px); line-height:1.8; }
html[dir='rtl'] .detail-value{ font-size:clamp(13px,3.4vw,15px); }

.note{ min-height:1.2em; margin-top:12px; color:var(--teal); font-size:clamp(9px,2.6vw,12px); }
.coffee-line{ color:var(--orange); margin-top:10px; display:inline-flex; align-items:center; gap:8px; justify-content:center; }
.coffee-line .ic{ width:20px; height:20px; }

/* ============================ form ============================ */
form{ text-align:start; max-width:520px; margin:0 auto; }
.field{ margin:14px 0; }
.field label{ display:block; font-family:var(--pixel); font-size:10px; color:var(--yellow); margin-bottom:8px; letter-spacing:1px; }
html[dir='rtl'] .field label{ font-family:'Vazirmatn'; font-weight:700; font-size:13px; }
.field input, .field textarea{
  width:100%; font-family:inherit; font-size:14px; color:var(--ink);
  background:#0e0726; border:3px solid #5a34c0; padding:12px 12px;
  box-shadow:inset 2px 2px 0 rgba(0,0,0,.4);
}
html[dir='rtl'] .field input, html[dir='rtl'] .field textarea{ font-family:'Vazirmatn'; }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(59,206,172,.35); }
.field textarea{ min-height:72px; resize:vertical; }
.input-error{ border-color:var(--pink) !important; animation:shake .3s; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-error{ color:var(--pink); font-size:11px; min-height:1em; margin-top:4px; opacity:0; transition:opacity .2s; }
.form-error.show{ opacity:1; }
.question{ font-family:var(--pixel); font-size:clamp(11px,3vw,14px); color:var(--teal); text-align:center; margin:22px 0 10px; line-height:1.7; }
html[dir='rtl'] .question{ font-family:'Vazirmatn'; font-weight:700; }

/* ============================ boot ============================ */
.press-start{ margin-top:10px; }
.press-start .ps{
  font-family:var(--pixel); font-size:clamp(13px,4vw,20px); color:var(--yellow);
  animation:blink 1.05s steps(1) infinite; text-shadow:2px 2px 0 var(--shadow);
  background:transparent; border:0; cursor:pointer; display:inline-flex; align-items:center; gap:12px;
}
html[dir='rtl'] .press-start .ps{ font-family:'Vazirmatn'; font-weight:700; }
.press-start .ic{ width:22px; height:22px; color:var(--pink); }
.insert-coin{ color:var(--dim); font-size:clamp(8px,2.4vw,11px); margin-top:12px; }

/* ============================ footer ============================ */
.footer{ margin-top:26px; color:var(--dim); font-size:9px; opacity:.7; }
html[dir='rtl'] .footer{ font-size:11px; }

.link{ color:var(--blue); text-decoration:underline; }
.pointer-hint{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.pointer-hint .ic{ width:26px; height:26px; color:var(--yellow); animation:float 1.4s ease-in-out infinite; }

/* ============================ keyframes ============================ */
@keyframes screen-in{ from{ opacity:0; transform:translateY(18px) scale(.98);} to{ opacity:1; transform:none; } }
@keyframes wiggle{ 0%,100%{ transform:rotate(-3deg);} 50%{ transform:rotate(3deg);} }
@keyframes jiggle{ 0%,100%{ transform:translateY(0) scale(1);} 25%{ transform:translateY(-6px) scale(1.02);} 50%{ transform:translateY(0) scale(1);} 75%{ transform:translateY(-3px) scale(.99);} }
@keyframes twitch{ 0%,92%,100%{ transform:translate(0,0) rotate(0);} 94%{ transform:translate(-2px,1px) rotate(-1deg);} 96%{ transform:translate(2px,-1px) rotate(1deg);} 98%{ transform:translate(-1px,0) rotate(0);} }
@keyframes float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }
@keyframes blink{ 0%,49%{ opacity:1;} 50%,100%{ opacity:.15;} }
@keyframes shake{ 0%,100%{ transform:translateX(0);} 20%{ transform:translateX(-6px);} 40%{ transform:translateX(6px);} 60%{ transform:translateX(-4px);} 80%{ transform:translateX(4px);} }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
  .screen.active{ animation:none; }
}

/* narrow screens: shrink wide pixel text, trim the topbar */
@media (max-width:560px){
  .mute-btn .mute-label{ display:none; }
  #topbar{ padding:8px 10px; }
}
@media (max-width:480px){
  .brand{ font-size:clamp(18px, 8vw, 34px); }
  h2.title{ font-size:clamp(13px, 5vw, 20px); }
  .tagline{ font-size:clamp(8px, 3vw, 10px); }
  .question{ font-size:clamp(10px, 3.4vw, 13px); }
  .lang-btn{ font-size:9px; padding:7px 7px; }
}
@media (max-width:380px){
  .screen{ padding-top:74px; }
  .yes-no{ gap:8px; }
}