/* ============================================================
   Layal Shakhashiro — explorable portfolio
   Bright, candy-coloured UI over a canvas world.
   ============================================================ */

:root{
  --cream:#FFF6E5;
  --ink:#3B2A52;
  --ink-soft:#6F5C8A;
  --white:#FFFFFF;
  --pink:#FF4D8D;
  --violet:#9333EA;
  --sky:#0EA5E9;
  --mint:#10B981;
  --sun:#F59E0B;
  --coral:#F97316;
  --line:rgba(147,51,234,.16);
  --shadow:0 10px 0 rgba(147,51,234,.16);
  --shadow-soft:0 14px 34px rgba(147,51,234,.20);
  --zone:#F59E0B;
  --r:20px;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0;overflow:hidden;background:var(--cream);color:var(--ink);
  font-family:'Baloo 2',system-ui,sans-serif;font-size:17px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
body.no-scroll{overflow:hidden}
kbd{
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;
  background:var(--white);border:2px solid var(--ink);border-bottom-width:3px;
  border-radius:6px;padding:1px 6px;color:var(--ink);display:inline-block;line-height:1.4;
}

#game{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}

/* ── HUD ──────────────────────────────────────────────────── */
.hud{position:fixed;inset:0;pointer-events:none;z-index:10}
.hud__top{
  position:absolute;top:14px;left:14px;right:14px;
  display:flex;gap:10px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;
}
.tag{
  display:flex;align-items:center;gap:9px;pointer-events:auto;
  background:var(--white);border:3px solid var(--ink);border-radius:100px;
  padding:7px 16px 7px 8px;box-shadow:0 5px 0 rgba(59,42,82,.18);
  font-weight:700;
}
.tag--name b{display:block;font-size:15px;line-height:1.15}
.tag--name i{display:block;font-style:normal;font-size:11.5px;color:var(--ink-soft);font-weight:600;line-height:1.2}
.tag__avatar{
  width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(140deg,var(--pink),var(--sun));font-size:18px;
}
.hud__counters{display:flex;gap:8px;flex-wrap:wrap}
.tag--count{padding:7px 14px;font-family:'JetBrains Mono',monospace;font-size:13px}
.tag--btn{cursor:pointer;font-family:inherit;font-size:14px;padding:9px 16px;transition:transform .15s,box-shadow .15s}
.tag--btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 rgba(59,42,82,.2)}
.tag--btn:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(59,42,82,.2)}

.hud__hint{
  position:absolute;left:50%;transform:translateX(-50%);bottom:16px;
  background:rgba(255,255,255,.9);border:2px dashed var(--line);border-radius:100px;
  padding:7px 18px;font-size:12.5px;font-weight:600;color:var(--ink-soft);
  display:flex;align-items:center;gap:5px;white-space:nowrap;
}
.hud__hint span{opacity:.5}

.zone-banner{
  position:absolute;top:86px;left:50%;transform:translateX(-50%);
  font-weight:800;font-size:clamp(1.4rem,5vw,2.4rem);letter-spacing:.08em;
  color:var(--zone);-webkit-text-stroke:2px var(--white);paint-order:stroke fill;
  opacity:0;
}
.zone-banner.show{animation:zoneIn 2.6s ease forwards}
@keyframes zoneIn{
  0%{opacity:0;transform:translateX(-50%) translateY(14px) scale(.9)}
  16%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
  74%{opacity:1}
  100%{opacity:0}
}

.prompt{
  position:absolute;left:50%;bottom:84px;transform:translate(-50%,20px);
  background:var(--white);border:3px solid var(--ink);border-radius:18px;
  padding:9px 18px;box-shadow:0 6px 0 rgba(59,42,82,.2);
  display:flex;align-items:center;gap:12px;
  opacity:0;transition:all .22s cubic-bezier(.2,1.4,.4,1);white-space:nowrap;
}
.prompt.show{opacity:1;transform:translate(-50%,0)}
.prompt b{font-size:15px}
.prompt span{font-size:12px;color:var(--ink-soft);display:flex;align-items:center;gap:5px}

.map-wrap{
  position:absolute;right:14px;bottom:14px;pointer-events:auto;
  background:var(--white);border:3px solid var(--ink);border-radius:16px;
  padding:8px 8px 4px;box-shadow:0 6px 0 rgba(59,42,82,.18);
  transform-origin:bottom right;transition:transform .3s cubic-bezier(.2,1.3,.4,1);
  transform:scale(.62);
}
.map-wrap.big{transform:scale(1.45)}
.map-wrap canvas{display:block;width:264px;height:184px;border-radius:8px;background:var(--cream)}
.map-wrap__label{
  display:block;text-align:center;font-size:10px;font-weight:700;
  color:var(--ink-soft);margin-top:3px;
}

/* ── touch controls ───────────────────────────────────────── */
.touch{display:none}
.stick{
  position:absolute;left:18px;bottom:18px;width:118px;height:118px;border-radius:50%;
  background:rgba(255,255,255,.72);border:3px solid var(--ink);pointer-events:auto;
  display:grid;place-items:center;touch-action:none;
}
.stick__nub{
  width:52px;height:52px;border-radius:50%;
  background:linear-gradient(140deg,var(--pink),var(--sun));border:3px solid var(--ink);
}
.touch__btns{position:absolute;right:18px;bottom:130px;display:grid;gap:12px;justify-items:center}
.round-btn{
  pointer-events:auto;cursor:pointer;font-family:inherit;font-weight:800;
  border:3px solid var(--ink);border-radius:50%;background:var(--white);color:var(--ink);
  width:58px;height:58px;font-size:13px;box-shadow:0 5px 0 rgba(59,42,82,.22);
}
.round-btn--a{width:76px;height:76px;font-size:20px;background:linear-gradient(140deg,var(--mint),#7BE495);color:var(--white)}
.round-btn:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(59,42,82,.22)}

/* ── start card ───────────────────────────────────────────── */
.start{
  position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:20px;
  background:radial-gradient(circle at 30% 20%,#FFE1F0,#FFF6E5 60%);
  transition:opacity .5s,visibility .5s;overflow:auto;
}
.start.gone{opacity:0;visibility:hidden}
.start__box{
  background:var(--white);border:4px solid var(--ink);border-radius:30px;
  box-shadow:0 14px 0 rgba(59,42,82,.18);
  padding:34px 34px 30px;max-width:560px;text-align:center;
}
.start__badge{
  display:inline-block;background:var(--sun);color:var(--white);
  border:3px solid var(--ink);border-radius:100px;padding:3px 16px;
  font-weight:800;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  transform:rotate(-2deg);margin-bottom:14px;
}
.start__box h1{
  margin:0 0 6px;font-size:clamp(2.6rem,9vw,4.2rem);line-height:.92;font-weight:800;
  letter-spacing:-.02em;
}
.start__box h1 span{
  background:linear-gradient(100deg,var(--pink),var(--violet) 55%,var(--sky));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.start__role{margin:0 0 14px;font-weight:700;color:var(--violet);font-size:15px}
.start__blurb{margin:0 0 20px;color:var(--ink-soft);font-weight:600;font-size:15.5px}
.picker{margin:0 0 20px}
.picker__label{
  margin:0 0 10px;font-weight:800;font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);
}
.picker__row{display:flex;gap:12px;justify-content:center}
.pick{
  cursor:pointer;font-family:inherit;font-weight:800;font-size:13px;color:var(--ink);
  display:grid;justify-items:center;gap:2px;padding:10px 18px 8px;border-radius:20px;
  background:var(--cream);border:3px solid var(--line);
  transition:transform .15s,border-color .15s,background .15s,box-shadow .15s;
}
.pick canvas{width:72px;height:72px;display:block}
.pick:hover{transform:translateY(-3px)}
.pick.on{
  border-color:var(--ink);background:var(--white);
  box-shadow:0 6px 0 rgba(59,42,82,.2);
}
.pick.on span{color:var(--violet)}

.start__keys{
  display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin-bottom:22px;
  font-size:13px;color:var(--ink-soft);font-weight:600;text-align:left;
}
.start__keys div{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.big-btn{
  cursor:pointer;font-family:inherit;font-weight:800;font-size:19px;
  padding:14px 38px;border-radius:100px;color:var(--white);
  background:linear-gradient(140deg,var(--pink),var(--violet));
  border:4px solid var(--ink);box-shadow:0 8px 0 rgba(59,42,82,.25);
  transition:transform .14s,box-shadow .14s;
}
.big-btn:hover{transform:translateY(-3px);box-shadow:0 11px 0 rgba(59,42,82,.25)}
.big-btn:active{transform:translateY(5px);box-shadow:0 2px 0 rgba(59,42,82,.25)}
.start__note{margin:16px 0 0;font-size:12.5px;color:var(--ink-soft);font-weight:600}

/* ── info panel ───────────────────────────────────────────── */
.panel{
  position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px;
  background:rgba(59,42,82,.34);backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;transition:opacity .22s,visibility .22s;
}
.panel.open{opacity:1;visibility:visible}
.panel__box{
  position:relative;background:var(--white);border:4px solid var(--ink);border-radius:26px;
  box-shadow:0 12px 0 rgba(59,42,82,.2);
  width:min(620px,100%);max-height:86vh;overflow:auto;padding:30px 30px 28px;
  transform:scale(.9) translateY(14px);transition:transform .28s cubic-bezier(.2,1.4,.4,1);
}
.panel.open .panel__box{transform:none}
.panel__close{
  position:absolute;top:14px;right:14px;cursor:pointer;
  width:38px;height:38px;border-radius:50%;font-size:15px;font-weight:800;
  background:var(--cream);border:3px solid var(--ink);color:var(--ink);
}
.panel__close:hover{background:var(--pink);color:var(--white)}
.panel__head{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px;padding-right:44px}
.panel__icon{
  width:52px;height:52px;flex:none;display:grid;place-items:center;font-size:26px;
  background:var(--cream);border:3px solid var(--ink);border-radius:16px;
}
.panel__box h2{margin:0;font-size:clamp(1.4rem,4.4vw,1.85rem);line-height:1.1;font-weight:800}
.panel__meta{
  margin:3px 0 0;font-family:'JetBrains Mono',monospace;font-size:12.5px;
  color:var(--violet);font-weight:600;
}
.panel__body p{margin:0 0 11px;color:var(--ink-soft);font-weight:600;font-size:15.5px}
.panel__chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.panel__chips span{
  font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:600;
  padding:5px 12px;border-radius:100px;background:var(--cream);
  border:2px solid var(--line);color:var(--ink);
}
.panel__link,.panel__action{
  display:inline-block;margin-top:18px;cursor:pointer;font-family:inherit;
  font-weight:800;font-size:15px;text-decoration:none;
  padding:11px 24px;border-radius:100px;color:var(--white);
  background:linear-gradient(140deg,var(--sky),var(--violet));
  border:3px solid var(--ink);box-shadow:0 5px 0 rgba(59,42,82,.22);
}
.panel__action{background:linear-gradient(140deg,var(--coral),var(--pink))}
.panel__link:active,.panel__action:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(59,42,82,.22)}

/* ── wardrobe ─────────────────────────────────────────────── */
.wardrobe .picker__row{margin-bottom:18px}
.slot{margin-bottom:16px}
.slot__name{
  margin:0 0 7px;font-weight:800;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);
}
.slot__row{display:flex;flex-wrap:wrap;gap:8px}
.item{
  cursor:pointer;font-family:inherit;display:grid;justify-items:center;gap:1px;
  min-width:76px;padding:9px 10px 7px;border-radius:16px;
  background:var(--cream);border:3px solid var(--line);color:var(--ink);
  transition:transform .15s,border-color .15s,background .15s,box-shadow .15s;
}
.item b{font-size:20px;line-height:1.1}
.item span{font-size:11px;font-weight:700}
.item:not(.locked):hover{transform:translateY(-3px)}
.item.on{border-color:var(--ink);background:var(--white);box-shadow:0 5px 0 rgba(59,42,82,.18)}
.item.on span{color:var(--violet)}
.item.locked{cursor:not-allowed;opacity:.5;border-style:dashed}

/* ── toast ────────────────────────────────────────────────── */
.toast{
  position:fixed;left:50%;bottom:26px;z-index:60;
  transform:translate(-50%,160%);transition:transform .45s cubic-bezier(.2,1.3,.4,1);
  background:var(--ink);color:var(--white);font-weight:700;font-size:14px;
  padding:11px 22px;border-radius:100px;box-shadow:var(--shadow-soft);
  max-width:calc(100% - 32px);text-align:center;
}
.toast.show{transform:translate(-50%,0)}

/* ── confetti ─────────────────────────────────────────────── */
.confetti{
  position:fixed;top:-20px;width:10px;height:16px;z-index:70;border-radius:2px;
  animation:fall 3.4s linear forwards;pointer-events:none;
}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg);opacity:.2}}

/* ── résumé overlay ───────────────────────────────────────── */
.resume{
  position:fixed;inset:0;z-index:55;overflow-y:auto;padding:76px 20px 70px;
  background:
    radial-gradient(circle at 12% 8%,#FFE1F0,transparent 42%),
    radial-gradient(circle at 88% 22%,#DFF3FF,transparent 45%),
    var(--cream);
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
}
.resume.open{opacity:1;visibility:visible}
.resume__close{
  position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:2;cursor:pointer;
  font-family:inherit;font-weight:800;font-size:14px;padding:10px 22px;border-radius:100px;
  background:var(--white);border:3px solid var(--ink);color:var(--ink);
  box-shadow:0 5px 0 rgba(59,42,82,.2);
}
.resume__close:hover{background:var(--pink);color:var(--white)}
.resume__inner{max-width:880px;margin:0 auto}

.r-head{
  background:var(--white);border:4px solid var(--ink);border-radius:26px;
  box-shadow:0 10px 0 rgba(59,42,82,.16);padding:30px;margin-bottom:26px;
}
.r-head h1{margin:0;font-size:clamp(2rem,7vw,3.2rem);line-height:1;font-weight:800}
.r-head h1 span{
  background:linear-gradient(100deg,var(--pink),var(--violet) 60%,var(--sky));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.r-head .r-role{margin:6px 0 12px;font-weight:700;color:var(--violet)}
.r-head p{margin:0 0 14px;color:var(--ink-soft);font-weight:600}
.r-contact{display:flex;flex-wrap:wrap;gap:8px}
.r-contact a{
  text-decoration:none;font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:600;
  background:var(--cream);border:2px solid var(--line);border-radius:100px;
  padding:6px 14px;color:var(--ink);
}
.r-contact a:hover{background:var(--pink);color:var(--white);border-color:var(--ink)}

.r-section{margin-bottom:30px}
.r-section > h2{
  display:inline-block;margin:0 0 16px;font-size:1.05rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;
  background:var(--sun);color:var(--white);border:3px solid var(--ink);
  border-radius:100px;padding:4px 18px;transform:rotate(-1.4deg);
}
.r-section:nth-of-type(2n) > h2{background:var(--sky)}
.r-section:nth-of-type(3n) > h2{background:var(--mint)}
.r-section:nth-of-type(4n) > h2{background:var(--pink)}

.r-card{
  background:var(--white);border:3px solid var(--ink);border-radius:20px;
  box-shadow:0 7px 0 rgba(59,42,82,.14);padding:22px 24px;margin-bottom:14px;
}
.r-card__top{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;justify-content:space-between}
.r-card h3{margin:0;font-size:1.22rem;font-weight:800}
.r-card__meta{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--violet);font-weight:600}
.r-card p{margin:9px 0 0;color:var(--ink-soft);font-weight:600;font-size:15px}
.r-card ul{margin:10px 0 0;padding-left:20px;color:var(--ink-soft);font-weight:600;font-size:15px}
.r-card li{margin-bottom:5px}
.r-card li::marker{color:var(--pink)}
.r-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.r-chips span{
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;
  padding:4px 11px;border-radius:100px;background:var(--cream);
  border:2px solid var(--line);
}
.r-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.r-grid .r-card{margin:0}
.r-card a{color:var(--sky);font-weight:800}

.r-foot{
  text-align:center;color:var(--ink-soft);font-weight:600;font-size:13px;
  padding:10px 0 30px;
}

/* ── responsive ───────────────────────────────────────────── */
@media (max-width:820px){
  .hud__hint{display:none}
  .touch{display:block}
  .tag--name i{display:none}
  .hud__top{top:10px;left:10px;right:10px}
  .map-wrap{transform:scale(.5);bottom:8px;right:4px}
  .map-wrap.big{transform:scale(.88)}
  .prompt{bottom:auto;top:132px}
  .panel__box{padding:24px 20px 22px}
  .start__box{padding:26px 22px 24px}
  .start__keys{grid-template-columns:1fr}
  .resume{padding-top:68px}
}
@media (hover:none) and (pointer:coarse){
  .touch{display:block}
}