/* =========================================================================
   Play, in the portfolio's clothes.
   Loaded after style.css, so these win. The world itself keeps its own
   colours; this is the page around it: ground, panels, type and controls.
   Palette tokens come from ../assets/theme.css, so the switch works here too.
   ========================================================================= */
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:700;font-display:swap;
  src:url(../assets/fonts/space-grotesk-700.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;
  src:url(../assets/fonts/jetbrains-mono-300.woff2) format("woff2")}
:root{
  --display:"Space Grotesk",-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --game-nav-text:#f8d58c;
  --panel:      color-mix(in srgb, var(--paper) 88%, #000 12%);
  --panel-line: color-mix(in srgb, var(--base) 26%, transparent);
  --sky:        var(--paper);          /* read by game.js for the 3D background */
}
[data-theme="cream"]{--game-nav-text:#80572f}

body{
  background:var(--paper);
  color:var(--base);
  font-family:var(--mono);
}

/* ---- the page's own chrome ---- */
header .eyebrow{
  font-family:var(--mono, "JetBrains Mono", ui-monospace, monospace);
  font-size:11.5px; letter-spacing:.14em; color:var(--muted);
}
header h1{
  font-family:var(--display, "Space Grotesk", sans-serif); font-weight:700;
  color:var(--hi); letter-spacing:-.01em;
}
header p#place{
  font-family:var(--mono, monospace); font-size:13px; color:var(--muted);
}

/* ---- buttons, chips and panels ---- */
nav button,#interact,#companion,.pose-hint,#thought,footer,dialog,#paintTools,
dialog.experience{
  font-family:var(--mono, monospace);
  background:var(--panel);
  color:var(--base);
  border:1px solid var(--panel-line);
  box-shadow:none;
}
nav button,#interact,#companion{border-radius:8px}
nav button:hover,#interact:hover{filter:none;border-color:var(--accent);color:var(--accent)}
button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
#sound{background:var(--panel);color:var(--base);text-shadow:none}
footer{color:var(--muted);border-radius:8px}
#thought{color:var(--base);border-radius:8px;font-family:var(--mono);font-size:16px}
kbd,#interact kbd{
  background:color-mix(in srgb, var(--base) 16%, transparent);
  color:var(--hi); border-radius:4px; font-family:var(--mono, monospace);
}
#touch button{background:var(--panel);border:1px solid var(--panel-line);color:var(--base);border-radius:8px}

/* ---- dialogs ---- */
dialog,dialog.experience{border-radius:10px;color:var(--base)}
dialog::backdrop{background:color-mix(in srgb, var(--paper) 70%, transparent);backdrop-filter:blur(3px)}
dialog h2,dialog h3,dialog.experience h2,dialog.experience h3{
  font-family:var(--display, sans-serif); font-weight:700; color:var(--hi);
}
dialog.experience .magnet strong,#paintTools h2{font-family:var(--display);font-weight:700}
dialog h4,dialog .eyebrow,dialog .byline{font-family:var(--mono, monospace);color:var(--muted)}
dialog p,dialog li,dialog small{font-family:var(--mono);color:var(--base)}
dialog .action{
  background:var(--accent); color:var(--paper); border-radius:8px;
  font-family:var(--mono, monospace); font-weight:500;
}
dialog .secondary{background:transparent;color:var(--base);border:1px solid var(--panel-line)}
dialog .close{background:transparent;border:0;box-shadow:none;color:var(--muted)}
dialog .close:hover{color:var(--accent)}
.pending,.local-note,dialog small{color:var(--muted)}

/* ---- loading ---- */
#loading{
  background:var(--paper); color:var(--muted);
  font-family:var(--mono, monospace); font-size:15px; letter-spacing:.12em;
  text-transform:lowercase;z-index:100;
}
#loading[hidden]{display:none}
#entry{
  position:fixed;inset:0;z-index:99;display:grid;place-items:center;
  padding:24px;background:var(--paper);color:var(--hi);text-align:center;
}
#entry[hidden]{display:none}
#entry .entry-content{width:min(100%,700px)}
#entry h2{
  margin:0 0 30px;font:700 clamp(30px,5vw,52px)/1.15 var(--display,sans-serif);
  letter-spacing:-.02em;text-shadow:none;color:var(--game-nav-text);
}
#enter-world{
  padding:13px 42px;border:4px solid #936943;border-radius:18px;
  background:#ffe6af;color:#815935;box-shadow:none;text-shadow:none;
  font:700 22px var(--display,sans-serif);
}
#enter-world:hover{border-color:#805832;color:#5f3e24;filter:brightness(1.04);transform:translateY(-2px)}
#enter-world:active{transform:translateY(2px)}
body:not(.world-entered) nav.game-controls,
body:not(.world-entered) #interact,
body:not(.world-entered) #companion,
body:not(.world-entered) #thought,
body:not(.world-entered) #touch{visibility:hidden}

/* ---- back to the portfolio, in the site's nav voice ---- */
.play-back{
  position:fixed; left:32px; bottom:26px; z-index:30;
  font-family:var(--mono, monospace); font-size:14px; color:var(--muted);
  text-decoration:none; transition:color .18s ease;
}
.play-back::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left center;
  transition:transform .2s cubic-bezier(.4,0,.2,1);
}
.play-back:hover,.play-back:focus-visible{color:var(--accent)}
.play-back:hover::after,.play-back:focus-visible::after{transform:scaleX(1)}
@media(max-width:700px){.play-back{left:auto;right:15px;bottom:auto;top:22px}}

/* Small, game-like navigation stays out of the world itself. */
header.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
nav.game-controls{position:fixed;inset:24px 28px auto;display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none;z-index:20}
nav.game-controls button,nav.game-controls a{pointer-events:auto}
nav.game-controls .left-controls,nav.game-controls .right-controls{display:flex;align-items:center;gap:12px}
nav.game-controls #exit{display:flex;align-items:center;gap:12px;color:var(--game-nav-text);text-decoration:none;font:700 16px var(--display,sans-serif)}
nav.game-controls #exit .exit-label{white-space:nowrap;text-shadow:none}
nav.game-controls #help,nav.game-controls #exit .exit-icon,nav.game-controls #sound{
  position:static;display:grid;place-items:center;width:64px;height:64px;padding:0;
  border:5px solid #8e693f;border-radius:50%;background:#f8d58c;color:#80572f;
  box-shadow:none;text-shadow:none;font-family:var(--display,sans-serif);text-decoration:none;
}
nav.game-controls #help{font-size:41px;font-weight:700;line-height:1}
nav.game-controls #exit svg,nav.game-controls #sound svg{width:33px;height:33px}
nav.game-controls #sound .sound-wave{display:none}
nav.game-controls #sound[aria-pressed="true"] .sound-wave{display:block}
nav.game-controls #sound[aria-pressed="true"] .sound-muted{display:none}
nav.game-controls #help:hover,nav.game-controls #exit:hover .exit-icon,nav.game-controls #sound:hover{transform:translateY(-2px);filter:brightness(1.05)}
nav.game-controls #help:active,nav.game-controls #exit:active .exit-icon,nav.game-controls #sound:active{transform:translateY(2px)}
nav.game-controls #exit:hover .exit-label{color:#fff0c9}
[data-theme="cream"] nav.game-controls #exit:hover .exit-label{color:#5f3e24}
nav.game-controls #exit:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
nav.game-controls #home,#companion,#touch{display:none!important}

/* Centered, indie-game controls card. */
dialog.help-dialog{
  position:fixed;inset:0;margin:auto;width:min(820px,calc(100vw - 32px));
  max-height:calc(100dvh - 32px);padding:42px 52px 48px;
  border:7px solid #805832;border-radius:30px;background:#ffe6af;color:#815935;
  box-shadow:0 7px 0 #654221,0 20px 70px #271b1670;
}
dialog.help-dialog::backdrop{background:#1b1a1366;backdrop-filter:blur(8px)}
dialog.help-dialog h2{font-family:var(--display,sans-serif);font-size:clamp(38px,5vw,58px);font-weight:700;text-align:center;color:#815935;margin:0 40px 26px}
dialog.help-dialog .close{top:18px;right:20px;width:48px;height:48px;padding:0;border:4px solid #936943;border-radius:50%;font:38px/1 var(--display,sans-serif);color:#815935}
dialog.help-dialog .control-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;max-width:610px;margin:auto}
dialog.help-dialog .control-card{display:flex;flex-direction:column;align-items:center;min-height:205px;padding:20px 12px 14px;border:4px dashed #c69254;border-radius:18px;text-align:center}
dialog.help-dialog .control-card h3{font-family:var(--display,sans-serif);font-size:25px;font-weight:700;color:#93613c;margin:0 0 18px}
dialog.help-dialog .control-symbol{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;min-height:85px}
dialog.help-dialog .control-keys{display:flex;gap:5px;margin-top:5px}
dialog.help-dialog kbd{display:grid;place-items:center;min-width:52px;height:48px;margin:0;padding:0 10px;border:3px solid #c99c55;border-bottom-width:7px;border-radius:10px;background:#ffe5a9;color:#a5752b;font:700 25px var(--display,sans-serif)}
dialog.help-dialog .control-card p{font:13px var(--mono,monospace);color:#98724d;margin:10px 0 0}
dialog.help-dialog .wheel-icon{display:grid;place-items:center;width:51px;height:78px;border:5px solid #bd8e48;border-radius:28px;color:#a5752b;font:700 50px/1 var(--display,sans-serif)}
dialog.help-dialog .control-touch{font:13px/1.5 var(--mono,monospace);color:#98724d;text-align:center;margin:24px 0 0}

/* Every object panel shares the controls card's centered game-window shell. */
dialog,dialog.experience,dialog.experience.photo-memory{
  position:fixed;inset:0;margin:auto;max-height:calc(100dvh - 32px);
  padding:42px 48px 46px;border:7px solid #805832;border-radius:30px;
  background:#ffe6af;color:#815935;box-shadow:0 7px 0 #654221,0 20px 70px #271b1670;
  overflow:auto;
}
dialog::backdrop,dialog.experience::backdrop{background:#1b1a1366;backdrop-filter:blur(8px)}
dialog.experience.laptop-ui{background:#ffe6af!important;border:7px solid #805832!important}
dialog.laptop-ui .desktop-apps{justify-content:center;padding:32px 12px 40px}
dialog.laptop-ui .desktop-apps button{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:96px;padding:0;color:#815935;line-height:1.2}
dialog.laptop-ui .app-mark{display:grid;place-items:center;width:68px;height:68px;border-radius:10px;background:#fff0cc;box-shadow:none;border:2px solid #c69254}
dialog.laptop-ui .app-mark svg{display:block;width:34px;height:34px}
dialog.laptop-ui .desktop-message{color:#815935;text-align:center}
dialog.laptop-ui #desktop-os{text-transform:none!important}
dialog h2,dialog.experience h2{font-family:var(--display,sans-serif);font-size:clamp(30px,4vw,42px);font-weight:700;line-height:1.1;color:#815935;text-align:center;margin:0 44px 25px}
dialog h3,dialog.experience h3{color:#93613c}
dialog h4,dialog .eyebrow,dialog .byline{color:#98724d}
dialog p,dialog li,dialog small,dialog.experience p,dialog.experience small{color:#815935}
dialog .pending,dialog .local-note{color:#98724d}
dialog .close,dialog.help-dialog .close{top:18px;right:20px;width:48px;height:48px;padding:0;border:4px solid #936943;border-radius:50%;background:transparent;box-shadow:none;font:38px/1 var(--display,sans-serif);color:#815935}
dialog .close:hover,dialog.help-dialog .close:hover{color:#5f3e24;border-color:#5f3e24}
dialog .action,dialog.experience .action{background:#946b42;color:#ffeac0;border:3px solid #805832;border-radius:10px;font-family:var(--display,sans-serif);font-weight:700}
dialog .action.secondary,dialog.experience .action.secondary{background:transparent;color:#815935}
dialog .book-detail,dialog .memory-note{border-color:#c69254}
dialog .book-detail textarea{background:#fff4d9;border:2px solid #c69254;color:#5f3e24}
.book-cover{display:block;height:145px;margin-bottom:10px;overflow:hidden}
.book-cover img{display:block;width:100%;height:100%;margin:0;object-fit:contain}
.book-pick[data-book="things"] .book-cover img{
  position:relative;left:50%;top:50%;width:auto;height:128.1%;max-width:none;
  object-fit:fill;transform:translate(-50%,-50%);
  clip-path:inset(11% 17.7% 11% 17.7%);
}
.library-layout:not(.library-focused){display:block}
.library-layout:not(.library-focused) .book-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 18px}
.library-layout:not(.library-focused) .book-cover{height:200px}
.library-layout:not(.library-focused) .book-pick{font-size:14px}
.library-left{min-width:0}
dialog.magnet-gallery .magnet-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
dialog.magnet-gallery .magnet{background:transparent;border:0;box-shadow:none}
dialog.magnet-gallery .magnet img{height:150px}
@media(max-width:700px){dialog.magnet-gallery .magnet-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}dialog.magnet-gallery .magnet img{height:130px}}
.book-focus{display:flex;flex-direction:column;gap:14px;min-height:490px}
.book-back,.book-nav button{
  border:0;background:none;box-shadow:none;padding:5px 0;
  color:#815935;font:700 15px var(--display,sans-serif);
}
.book-back{align-self:flex-start}
.book-back:hover,.book-nav button:hover{text-decoration:underline;text-underline-offset:4px}
.book-stage{display:grid;place-items:center;flex:1;min-height:320px;padding:8px 22px 18px;perspective:1000px}
.book-model{
  --depth:22px;position:relative;width:min(100%,235px);aspect-ratio:2 / 3;
  transform-style:preserve-3d;transform:rotateY(25deg) rotateX(4deg);
  animation:book-arrive .48s cubic-bezier(.18,.8,.24,1) both;
}
.book-front,.book-back-face,.book-spine,.book-pages{position:absolute;display:block;backface-visibility:hidden}
.book-front{inset:0;overflow:hidden;background:var(--book-spine);transform:translateZ(11px);box-shadow:inset 5px 0 7px #0003,17px 21px 18px #3f291e55}
.book-front::after{content:"";position:absolute;inset:0 auto 0 0;width:9px;background:linear-gradient(90deg,#0005,#fff2 48%,transparent);pointer-events:none}
.book-front img{display:block;width:100%;height:100%;object-fit:cover}
.book-model[data-book="things"] .book-front img{width:155%;height:128.1%;max-width:none;transform:translate(-17.7%,-11%)}
.book-back-face{inset:0;background:var(--book-spine);transform:rotateY(180deg) translateZ(11px)}
.book-spine{top:0;bottom:0;left:0;width:var(--depth);background:linear-gradient(90deg,#0005,transparent 30%,#fff3 58%,#0003),var(--book-spine);transform-origin:left center;transform:translateZ(11px) rotateY(-90deg)}
.book-pages{top:4px;bottom:4px;right:0;width:var(--depth);background:repeating-linear-gradient(0deg,#f6e7c9 0 2px,#d5c1a0 2px 3px);transform-origin:right center;transform:translateZ(-11px) rotateY(90deg)}
.book-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;border-top:2px dashed #c69254;padding-top:10px;color:#98724d;font:13px var(--mono,monospace)}
.book-nav button{font-size:14px;white-space:nowrap}
@keyframes book-arrive{from{opacity:.2;transform:translateY(14px) rotateY(48deg) rotateX(7deg) scale(.52)}to{opacity:1;transform:translateY(0) rotateY(25deg) rotateX(4deg) scale(1)}}
@media(max-width:700px){
  .library-layout:not(.library-focused) .book-cover{height:150px}
  .book-focus{min-height:410px}
  .book-stage{min-height:270px}
  .book-model{width:min(100%,205px)}
}
@media(max-width:440px){.library-layout:not(.library-focused) .book-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.book-model{animation:none}}
dialog.experience.photo-memory{padding:34px;width:min(490px,calc(100vw - 32px))}
.jacket-choice{
  display:flex;align-items:center;gap:12px;width:100%;margin:20px 0 18px;padding:11px 12px;
  border:3px dashed #c69254;border-radius:14px;background:#fff0cc;color:#815935;
  box-shadow:none;text-align:left;transition:transform .15s ease,background .15s ease,border-color .15s ease;
}
.jacket-choice:hover{transform:translateY(-2px);border-color:#936943;filter:none}
.jacket-choice:active{transform:translateY(1px)}
.jacket-choice[aria-pressed="true"]{border-style:solid;border-color:#805832;background:#f5d394}
.jacket-icon{display:grid;place-items:center;flex:none;width:48px;height:48px;border:2px solid #c69254;border-radius:10px;background:#ffe6af;color:#936943}
.jacket-icon svg{width:34px;height:34px}
.jacket-copy{display:grid;gap:3px;min-width:0;flex:1}
.jacket-copy strong{font:700 16px/1.2 var(--display,sans-serif)}
.jacket-copy small{font:12px var(--mono,monospace);color:#98724d}
.jacket-state{flex:none;padding:5px 8px;border:2px solid #c69254;border-radius:7px;font:700 12px var(--mono,monospace);text-transform:uppercase}
.jacket-choice[aria-pressed="true"] .jacket-state{border-color:#805832;background:#805832;color:#ffe6af}
@media(max-width:520px){
  dialog.experience.wardrobe-ui{padding:26px 20px 30px}
  dialog.experience.wardrobe-ui .wardrobe-layout{grid-template-columns:1fr}
  .jacket-choice{gap:9px}
}
#paintTools{background:#ffe6af;color:#815935;border:5px solid #936943;border-radius:24px;box-shadow:0 6px 0 #805832,0 20px 50px #271b1640}
#paintTools p{color:#98724d}
#paintTools button{background:#946b42;color:#ffeac0}
#paintTools #leavePaint{color:#815935}
#paintHold{position:relative;isolation:isolate;overflow:hidden}
#paintHold::before{content:"";position:absolute;z-index:0;inset:0 auto 0 0;width:var(--hold-progress,0%);background:#c69254;transition:width .06s linear}
#paintHold .paint-hold-label,#paintHold kbd{position:relative;z-index:1}
/* Smaller in-world messages use the same materials as the controls card. */
#thought,#interact,.pose-hint,#visit-cursor{
  background:#ffe6af;color:#815935;border:4px solid #936943;
  border-radius:18px;box-shadow:none;text-shadow:none;
}
#thought{border-radius:18px 18px 18px 6px;padding:13px 18px;font-family:var(--mono);font-size:15px;line-height:1.6}
#thought.intro-line{pointer-events:auto;cursor:pointer;padding-right:40px}
#thought.intro-line::after{content:">";position:absolute;right:15px;top:50%;transform:translateY(-50%);font:500 16px var(--mono,monospace)}
body.intro-speaking #interact{visibility:hidden}
#interact{padding:10px 18px;font:700 15px var(--display,sans-serif)}
#interact:hover{border-color:#805832;color:#5f3e24;filter:brightness(1.04)}
#interact kbd{
  display:inline-grid;place-items:center;min-width:29px;margin-right:9px;padding:4px 6px;
  background:#fff0cc;color:#a5752b;border:2px solid #c99c55;
  border-bottom-width:4px;border-radius:7px;font:700 14px var(--display,sans-serif);
}
.pose-hint{padding:10px 16px;font:700 13px var(--display,sans-serif)}
#visit-cursor{padding:7px 12px;font:700 13px var(--display,sans-serif)}
/* Only the portfolio's title and label faces are used in the game. */
#paintTools p,#paintTools button,#touch button,footer,#companion,
dialog blockquote,dialog label,dialog textarea,dialog figcaption{
  font-family:var(--mono);
}
@media(max-width:700px){
  nav.game-controls{inset:16px 16px auto;flex-direction:row}
  nav.game-controls .left-controls,nav.game-controls .right-controls{gap:8px}
  nav.game-controls #exit{gap:8px;font-size:12px}
  nav.game-controls #help,nav.game-controls #exit .exit-icon,nav.game-controls #sound{width:52px;height:52px;border-width:4px}
  nav.game-controls #help{font-size:33px}
  nav.game-controls #exit svg,nav.game-controls #sound svg{width:27px;height:27px}
  dialog.help-dialog{inset:0;width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:28px 20px;border-width:5px;border-radius:22px}
  dialog.help-dialog h2{font-size:39px;margin-bottom:18px}
  dialog.help-dialog .close{top:12px;right:12px;width:38px;height:38px;font-size:29px}
  dialog.help-dialog .control-grid{gap:10px}
  dialog.help-dialog .control-card{min-height:170px;padding:13px 5px;border-width:3px;border-radius:13px}
  dialog.help-dialog .control-card h3{font-size:18px;margin-bottom:10px}
  dialog.help-dialog kbd{min-width:37px;height:36px;font-size:18px;border-width:2px;border-bottom-width:5px}
  dialog.help-dialog .wheel-icon{height:58px;width:40px;font-size:38px}
  dialog.help-dialog .control-card p{font-size:10px}
  dialog,dialog.experience,dialog.experience.photo-memory{inset:0;width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:28px 20px;border-width:5px;border-radius:22px}
  dialog.experience h2,dialog h2{font-size:30px;margin:0 38px 20px}
  dialog .close,dialog.help-dialog .close{top:12px;right:12px;width:38px;height:38px;font-size:29px}
  .book-cover{height:115px}
}
@media(max-width:420px){
  dialog.help-dialog .control-grid{gap:6px}
  dialog.help-dialog .control-card{padding-inline:3px}
  dialog.help-dialog kbd{min-width:30px;height:32px;font-size:16px}
}
@media(max-width:360px){
  nav.game-controls{inset:12px 12px auto}
  nav.game-controls #exit{font-size:11px;gap:6px}
  nav.game-controls .right-controls{gap:6px}
  nav.game-controls #help,nav.game-controls #exit .exit-icon,nav.game-controls #sound{width:44px;height:44px;border-width:3px}
  nav.game-controls #help{font-size:29px}
}

/* The Play world speaks in lowercase, including dynamically opened panels. */
body,body *{text-transform:lowercase!important}