:root{
    --bg1:#fef6e4; --bg2:#f9e6c9; --ink:#5b4636;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{margin:0;height:100%;}
  body{
    font-family:"Chalkboard SE","Comic Sans MS","Segoe Print",system-ui,sans-serif;
    color:var(--ink);
    background:var(--bg1);
    overflow:hidden;
    user-select:none;
    touch-action:none;
  }
  /* cute handwritten Chinese fallback for the zh page */
  html[lang^="zh"] body{
    font-family:"Hannotate SC","Hanzipen SC","Yuanti SC","STYuanti","Kaiti SC","KaiTi","STKaiti","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  }
  html[lang^="zh"] .hud h1{ letter-spacing:1px; }
  #stage{position:fixed; inset:0; display:block;}
  /* language toggle — fixed corner, separate from the measured HUD/toolbar chrome */
  .langlink{
    position:fixed; top:12px; right:14px; z-index:6;
    font-size:12px; font-weight:bold; padding:5px 12px;
    color:var(--ink); text-decoration:none; transform:rotate(1.5deg);
  }
  .langlink:hover{ transform:rotate(0deg); }
  .hud{
    position:fixed; top:14px; left:50%; transform:translateX(-50%);
    text-align:center; pointer-events:none; z-index:5;
  }
  .hud h1{
    margin:0; font-size:23px; font-weight:bold; letter-spacing:.2px; display:block;
  }
  /* title stays page-centered; the byline hangs off its right without affecting centering */
  .titlewrap{ position:relative; display:inline-block; }
  .byline{
    position:absolute; left:100%; top:50%; transform:translateY(-50%);
    margin-left:8px; white-space:nowrap;
    font-size:11px; font-weight:normal; opacity:.5; letter-spacing:.3px;
  }

  /* flat hand-drawn "sticker" pill — cream fill, ink outline, hard offset shadow */
  .pill{
    background:#fffaf0; border:2px solid #e0c9a4; color:var(--ink);
    border-radius:13px 16px 12px 15px; box-shadow:2px 3px 0 #e6d2b3;
  }
  .progress{ display:inline-block; margin:8px 0 0; font-size:12px; opacity:.9; padding:4px 13px; transform:rotate(-1deg); }
  .status{ margin:0; max-width:92vw; text-align:center; font-size:13px; font-weight:bold; padding:5px 15px; transform:rotate(1deg); }

  .bottombar{
    position:fixed; left:50%; bottom:14px; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:8px;
    z-index:5; width:100%; max-width:560px; pointer-events:none;
  }
  .toolbar{
    display:flex; gap:9px; flex-wrap:wrap; justify-content:center;
    max-width:96vw; pointer-events:auto;
  }
  .tool{
    cursor:pointer; font:inherit; font-size:14px; font-weight:bold;
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 13px; color:var(--ink);
    background:#fffaf0; border:2.5px solid #c8a882;
    border-radius:15px 18px 13px 16px;
    box-shadow:2px 3px 0 #d8c4a4;
    transition:transform .1s, box-shadow .1s, background .15s, border-color .15s;
  }
  .tool svg{width:21px; height:21px; display:block; stroke:currentColor; fill:none;}
  .tool .lbl{font-size:13px; letter-spacing:.2px;}
  .tool:nth-of-type(odd){ transform:rotate(-2deg); }
  .tool:nth-of-type(even){ transform:rotate(1.5deg); }
  .tool:hover{ transform:translateY(-2px) rotate(0deg); }
  .tool:active{ transform:translateY(1px) rotate(0deg); box-shadow:1px 1px 0 #d8c4a4; }
  .tool.active{
    background:#ffe1a3; border-color:#c98f2e; box-shadow:2px 3px 0 #d8a94e;
    transform:rotate(0deg);
  }
  @media (max-width:520px){
    .tool{padding:7px 11px; font-size:13px; gap:5px;}
    .tool svg{width:19px; height:19px;}
    .hud h1{font-size:19px;}
    .photoCard{padding:16px 16px 18px;}
    .photoCard h2{font-size:21px;}
  }

  .overlay{
    position:fixed; inset:0; z-index:50;
    background:rgba(91,70,54,0.55);
    display:flex; align-items:center; justify-content:center;
    padding:20px;
  }
  .overlay.hidden{ display:none; }
  .photoCard{
    background:#fffaf0; border:3px solid #c8a882; border-radius:22px 26px 20px 24px;
    padding:22px 24px 24px; max-width:620px; width:100%; text-align:center;
    box-shadow:5px 7px 0 #d8c4a4; max-height:94vh; overflow-y:auto;
  }
  .photoCard h2{margin:0 0 4px; font-size:23px; display:inline-flex; align-items:center; gap:8px;}
  .photoCard h2 svg{width:24px; height:24px; transform:rotate(-6deg);}
  .photoCard p{margin:0 0 14px; font-size:13px; opacity:.7;}
  .photoCard img{
    max-width:100%; max-height:64vh; width:auto; height:auto;
    margin:0 auto; border-radius:14px; display:block; border:2.5px solid #c8a882;
  }
  /* nudge to screenshot, since there's no share button */
  .shareHint{margin:14px 0 0; font-size:13px; opacity:.6;}
  /* author + play link — small, dropped to the card's bottom-right edge.
     scoped under .photoCard to outrank the generic ".photoCard p" rule */
  .photoCard .credit{margin:22px 2px -4px 0; font-size:11px; opacity:.5; letter-spacing:.2px; text-align:right; line-height:1.3;}
  .photoCard .credit .url{font-weight:bold; opacity:.85;}
  .photoActions{display:flex; gap:10px; justify-content:center; margin-top:16px; flex-wrap:wrap;}
  .photoActions .tool{font-size:15px; padding:10px 18px;}