:root{
  --ink:#2a1f15;
  --paper:#f2e4c9;
  --paper-dark:#e3cfab;
  --edge:#8c6b45;
  --stamp:#7f291f;
  --muted:#6f593f;
  --ok:#35653b;
  --bad:#8a2f2a;
  --desk-image:url('../assets/desk-wood.jpg');
  --paper-image:url('../assets/paper-texture.jpg');
  --rune-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 520'%3E%3Cpath d='M95 438 L95 82 L248 82 L322 150 L322 226 L254 290 L186 290 L334 438 L252 438 L144 312 L144 438 Z' fill='none' stroke='%23d2b78a' stroke-opacity='0.23' stroke-width='18' stroke-linejoin='miter'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{overflow-x:hidden}
body{
  margin:0;
  font-family:Manrope,system-ui,sans-serif;
  color:var(--ink);
  background-image:var(--rune-image),var(--desk-image);
  background-position:50% 84%,center;
  background-size:min(18vmin,150px),cover;
  background-repeat:no-repeat,no-repeat;
  background-attachment:fixed,fixed;
  overflow-x:hidden;
}
.page-bg{
  display:none;
}
.page-bg::after{
  content:none;
}
.scene{min-height:100dvh;display:grid;place-items:center;padding:1.2rem;position:relative}
.desk-items{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.clue-card{
  position:absolute;
  margin:0;
  width:min(240px,28vw);
  background:#f5e8d0;
  border:1px solid #9f7c56;
  padding:10px 10px 26px;
  box-shadow:0 10px 22px rgba(0,0,0,.35);
  transform-origin:center;
  pointer-events:auto;
  text-decoration:none;
  color:inherit;
  cursor:default;
}
.clue-card img{
  display:block;
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border:1px solid #b3956f;
  filter:sepia(.22) contrast(.95);
}
.clue-link{
  display:block;
  text-decoration:none;
  color:inherit;
}
.clue-card-a{left:max(16px,6vw);top:16%;transform:rotate(-6deg)}
.clue-card-b{right:max(16px,6vw);bottom:14%;transform:rotate(5deg)}
.stack{
  position:relative;
  width:min(900px,96vw);
  z-index:1;
}
.paper-tab{
  position:absolute;
  right:-10px;
  top:120px;
  width:24px;
  height:130px;
  border:1px solid #c6b79f;
  border-radius:2px;
  background:#fffdf7;
  padding:0;
  color:transparent;
  box-shadow:0 4px 8px rgba(0,0,0,.22);
  transform:rotate(1deg);
  z-index:1;
}
.stack::before,
.stack::after{
  content:"";
  position:absolute;
  inset:0;
  border:2px solid #8d6b46;
  border-radius:12px;
  background:linear-gradient(180deg,#e9d7b8,#dbc39d);
  box-shadow:0 8px 20px rgba(0,0,0,.20);
}
.stack::before{
  transform:translate(12px,12px) rotate(1.1deg);
  z-index:-2;
}
.stack::after{
  transform:translate(6px,6px) rotate(-.7deg);
  z-index:-1;
}
.dossier{
  width:100%;
  background:
    linear-gradient(180deg,var(--paper),var(--paper-dark)),
    var(--paper-image) center/cover no-repeat,
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(0,0,0,.02) 5px 6px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 2px, rgba(0,0,0,.015) 2px 3px);
  border:2px solid var(--edge);
  border-radius:12px;
  padding:1.35rem;
  box-shadow:
    0 14px 40px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -2px 0 rgba(115,78,40,.25);
  position:relative;
  transform:rotate(-.35deg);
  z-index:2;
  overflow:hidden;
}
.dossier::before{
  content:"";
  position:absolute;
  right:16px;
  top:-2px;
  width:120px;
  height:26px;
  background:linear-gradient(180deg,#d8be95,#bea071);
  border:2px solid var(--edge);
  border-bottom:none;
  border-radius:8px 8px 0 0;
}
.stamp{
  margin:0 0 .7rem;
  font-family:'Special Elite',monospace;
  letter-spacing:.08em;
  color:var(--stamp);
  border:2px dashed rgba(127,41,31,.5);
  display:inline-block;
  padding:.22rem .52rem;
  background:rgba(127,41,31,.05);
  transform:rotate(-1.4deg);
}
h1{margin:.2rem 0 .4rem;font-size:1.5rem;font-family:'Special Elite',monospace}
.lore{margin:0 0 .8rem;line-height:1.6;max-width:70ch}
.prompt{margin:.1rem 0 .7rem;font-weight:700}
.answer-row{display:flex;gap:.55rem;align-items:center}
.answer-row input{
  flex:1;
  background:#f8efd9;
  border:1px solid #9b7950;
  color:var(--ink);
  border-radius:8px;
  padding:.62rem .7rem;
  font-size:1rem;
  min-width:0;
}
 .answer-row button{flex:0 0 auto;min-height:46px}
button,.ghost-btn,.cta{
  border:1px solid #8e6d48;
  background:#ead7b6;
  color:var(--ink);
  border-radius:999px;
  padding:.52rem .86rem;
  text-decoration:none;
  cursor:pointer;
}
button:hover,.ghost-btn:hover,.cta:hover{filter:brightness(.97)}
.feedback{min-height:1.3rem;margin:.65rem 0 0;color:var(--muted)}
.feedback.ok{color:var(--ok)}
.feedback.bad{color:var(--bad)}
.audio-wrap{
  margin-top:.8rem;
  padding:.8rem .9rem;
  border:1px dashed #987754;
  border-radius:12px;
  background:rgba(255,248,232,.45);
}
.audio-label{
  margin:0 0 .45rem;
  font-family:'Special Elite',monospace;
  font-size:.92rem;
  color:#65482c;
}
.audio-wrap audio{
  width:100%;
}
.gacha-wrap{
  margin-top:.8rem;
  padding:.8rem .9rem;
  border:1px dashed #987754;
  border-radius:12px;
  background:rgba(255,248,232,.45);
}
.gacha-row{
  display:flex;
  gap:.6rem;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.gacha-result{
  font-size:.92rem;
  color:#5f452b;
  background:#f3e5cc;
  border:1px solid #b39167;
  border-radius:999px;
  padding:.3rem .6rem;
}
.gacha-card{
  margin-top:.8rem;
  width:min(100%,360px);
  aspect-ratio:5/7;
  position:relative;
  border-radius:14px;
  transform-style:preserve-3d;
  transition:transform .55s ease;
  box-shadow:0 14px 30px rgba(0,0,0,.24);
}
.gacha-modal-card{
  width:min(430px,92vw);
  padding:16px 16px 14px;
}
.gacha-modal-card .gacha-card{
  margin-top:0;
  width:100%;
}
.gacha-card.is-loading{
  animation:gachaShake .35s linear infinite;
}
.gacha-card.is-revealed{
  transform:rotateY(180deg);
}
.gacha-card-face{
  position:absolute;
  inset:0;
  border-radius:14px;
  border:1px solid #8f6c45;
  backface-visibility:hidden;
  overflow:hidden;
}
.gacha-card-front{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:16px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.16), transparent 45%),
    linear-gradient(160deg,#7f5b39,#4f3720);
  color:#f4e7d1;
}
.gacha-card-mark{
  font-family:'Special Elite',monospace;
  font-size:.9rem;
  letter-spacing:.08em;
}
.gacha-card-sub{
  align-self:flex-end;
  font-size:.82rem;
  opacity:.84;
}
.gacha-card-back{
  transform:rotateY(180deg);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:.35rem;
  padding:12px;
  background:linear-gradient(180deg,#efe0c4,#dbc29b);
}
#gacha-character-image{
  display:block;
  width:100%;
  height:72%;
  border-radius:10px;
  object-fit:contain;
  object-position:center center;
  border:1px solid #a8875d;
  background:radial-gradient(circle at 50% 40%, #f8ebd4 0%, #e6d1ad 100%);
  padding:6px;
}
.gacha-card-game{
  margin-top:auto;
  font-size:.82rem;
  color:#5d4124;
  opacity:.92;
}
.gacha-card-name{
  font-weight:700;
  font-size:1.02rem;
  text-align:center;
}
.gacha-card-rarity{
  font-size:.86rem;
  color:#694b2d;
}
.gacha-card.rarity-important{
  box-shadow:
    0 0 0 1px rgba(228,186,103,.7),
    0 0 18px rgba(255,214,122,.42),
    0 14px 30px rgba(0,0,0,.24);
}
.gacha-card.rarity-important .gacha-card-back{
  background:
    radial-gradient(circle at 50% 16%, rgba(255,239,190,.9), rgba(236,206,145,.62) 45%, rgba(219,194,155,.95) 100%),
    linear-gradient(180deg,#efe0c4,#dbc29b);
}
.gacha-card.rarity-important .gacha-card-back::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent 22%, rgba(255,247,220,.38) 50%, transparent 78%);
  animation:gachaRareSweep 1.65s ease-in-out infinite;
  pointer-events:none;
}
.gacha-card-rarity.rarity-important-text{
  color:#7b4f12;
  font-weight:700;
  text-shadow:0 0 10px rgba(255,220,140,.48);
}
.plate-confirm{
  margin-top:.9rem;
  border:1px dashed #987754;
  border-radius:12px;
  background:rgba(255,248,232,.52);
  padding:.95rem .9rem;
  display:grid;
  gap:.65rem;
  justify-items:center;
}
.plate-confirm-value{
  width:min(100%,420px);
  border:2px solid #2c2c2c;
  border-radius:10px;
  background:linear-gradient(180deg,#f4f4f4,#e6e6e6);
  color:#101010;
  font-family:'Special Elite',monospace;
  font-size:clamp(1.2rem,4vw,2rem);
  letter-spacing:.24em;
  text-align:center;
  padding:.48rem .7rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 6px 12px rgba(0,0,0,.16);
}
.plate-confirm-question{
  margin:0;
  font-weight:700;
  color:#4b3520;
}
@keyframes gachaShake{
  0%{transform:translateX(0) rotate(0)}
  25%{transform:translateX(-2px) rotate(-.5deg)}
  50%{transform:translateX(2px) rotate(.5deg)}
  75%{transform:translateX(-2px) rotate(-.5deg)}
  100%{transform:translateX(0) rotate(0)}
}
@keyframes gachaRareSweep{
  0%{transform:translateX(-110%)}
  100%{transform:translateX(120%)}
}
.visible-zone{
  margin-top:1rem;
  border-top:1px dashed #987754;
  padding-top:.8rem;
}
.visible-zone h2{
  margin:.1rem 0 .5rem;
  font-size:1rem;
  font-family:'Special Elite',monospace;
}
.visible-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:.5rem;
}
.visible-card{
  position:relative;
  border:1px solid #a4835c;
  border-radius:10px;
  background:#f6ead5;
  padding:.5rem .55rem;
}
.visible-card .name{font-weight:700;font-size:.92rem}
.visible-card .state{margin-top:.2rem;font-size:.8rem;color:#6a533a}
.visible-card.current{border-color:#91653a;background:#ecd7b6}
.visible-card.done{border-color:#5b7f58;background:#e2efdf}
.visible-card.has-archive-paper{
  overflow:visible;
}
.archive-paper-tab{
  position:absolute;
  right:-8px;
  top:18px;
  width:22px;
  height:92px;
  border:1px solid #c6b79f;
  border-radius:2px;
  background:#fffdf7;
  box-shadow:0 4px 8px rgba(0,0,0,.16);
  transform:rotate(1deg);
  padding:0;
  color:transparent;
  cursor:pointer;
  z-index:-1;
}
.visible-progress{
  margin-top:.35rem;
  height:6px;
  border:1px solid #9a7c58;
  border-radius:999px;
  overflow:hidden;
  background:#e5d3b6;
}
.visible-progress > i{
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg,#7f5f3d,#b88a55);
}
.row-actions{display:flex;gap:.5rem;margin-top:.75rem}
.step-nav{
  justify-content:flex-start;
  flex-wrap:wrap;
}
.step-nav button{
  min-height:40px;
}
.ghost{background:#efdfc3}
.danger{border-color:#8a4f46;background:#ddb9b2}
textarea{
  width:100%;
  min-height:86px;
  margin-top:.6rem;
  background:#f7edd8;
  border:1px solid #9c7a53;
  border-radius:8px;
  padding:.55rem;
  color:var(--ink);
}
.admin-only{display:none}

.modal{
  position:fixed;
  inset:0;
  background:rgba(16,11,8,.7);
  display:grid;
  place-items:center;
  z-index:40;
}
.modal-card{
  position:relative;
  width:min(430px,90vw);
  background:linear-gradient(180deg,#efe3cb,#e3d0ae);
  border:1px solid #987552;
  border-radius:12px;
  padding:16px;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
}
.modal-card img{
  display:block;
  width:100%;
  height:auto;
}
.modal-close{
  position:absolute;
  right:8px;
  top:8px;
  width:30px;
  height:30px;
  border-radius:999px;
  padding:0;
  line-height:1;
  font-size:20px;
}
.topbar{
  position:fixed;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  width:min(900px,95vw);
  display:flex;
  align-items:center;
  gap:.5rem;
  justify-content:space-between;
  background:#e9d5b3d9;
  border:1px solid #8f6f49;
  border-radius:999px;
  padding:.35rem .45rem;
  z-index:20;
  backdrop-filter:blur(2px);
}
.brand{font-family:'Special Elite',monospace;font-size:.95rem;letter-spacing:.05em}
.nav{display:flex;gap:.35rem}
.nav a{padding:.35rem .65rem;border-radius:999px;color:var(--muted);text-decoration:none;border:1px solid transparent}
.nav a.active{border-color:#8f6f49;background:#f3e4ca;color:var(--ink)}

.dossier > *{position:relative; z-index:1}

@media (max-width:980px){
  .scene{padding:5.2rem 1rem 1.25rem}
  .stack{width:min(100%,720px)}
  .clue-card{width:min(180px,24vw)}
  .clue-card-a{top:12%}
  .clue-card-b{bottom:10%}
  .paper-tab{top:100px;height:112px}
}

@media (max-width:760px){
  .topbar{
    left:0;
    right:0;
    transform:none;
    width:auto;
    top:0;
    border-radius:0 0 18px 18px;
    padding:.6rem .75rem;
  }
  .brand{display:none}
  .nav{display:none}
  .scene{
    display:block;
    min-height:100dvh;
    padding:4.9rem .75rem 1rem;
  }
  .desk-items{
    display:block;
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:5;
  }
  .clue-card{
    width:78px;
    padding:6px 6px 14px;
  }
  .clue-card-a{
    left:8px;
    top:10px;
    transform:rotate(-6deg);
  }
  .clue-card-b{
    right:8px;
    top:auto;
    bottom:18px;
    transform:rotate(5deg);
  }
  .stack{
    width:100%;
    max-width:none;
  }
  .stack::before{transform:translate(8px,8px) rotate(1.1deg)}
  .stack::after{transform:translate(4px,4px) rotate(-.7deg)}
  .paper-tab{
    left:50%;
    right:auto;
    top:auto;
    bottom:-10px;
    width:124px;
    height:22px;
    border-radius:3px;
    transform:translateX(-50%) rotate(0deg);
  }
  .dossier{
    padding:1rem .9rem 1.1rem;
    transform:none;
    border-radius:14px;
  }
  .dossier::before{
    right:12px;
    width:86px;
    height:20px;
  }
  h1{
    font-size:1.22rem;
    line-height:1.25;
  }
  .lore,
  .prompt{
    font-size:.95rem;
  }
  .answer-row{
    position:sticky;
    bottom:0;
    z-index:4;
    flex-direction:column;
    align-items:stretch;
    margin:1rem -.2rem -.2rem;
    padding:.8rem .2rem .2rem;
    background:linear-gradient(180deg, rgba(242,228,201,0), rgba(242,228,201,.96) 30%, rgba(227,207,171,.98) 100%);
  }
  .answer-row input,
  .answer-row button{
    width:100%;
    min-height:48px;
  }
  .visible-list{
    grid-template-columns:1fr;
  }
  .row-actions{
    flex-direction:column;
  }
  textarea{
    min-height:110px;
  }
  .modal{
    padding:12px;
  }
  .modal-card{
    width:min(100%,420px);
    padding:14px;
  }
}

@media (max-width:900px) and (orientation:landscape){
  .scene{
    display:grid;
    padding:4.2rem 5.6rem 1rem;
  }
  .desk-items{
    display:block;
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:5;
  }
  .clue-card{
    width:88px;
    padding:6px 6px 14px;
  }
  .clue-card-a{
    left:10px;
    top:54%;
    transform:translateY(-55%) rotate(-6deg);
  }
  .clue-card-b{
    right:10px;
    top:50%;
    bottom:auto;
    transform:translateY(-45%) rotate(5deg);
  }
  .stack{
    width:min(100%,680px);
  }
}

@media (max-width:420px){
  .scene{padding:4.7rem .6rem .9rem}
  .dossier{
    padding:.92rem .78rem 1rem;
  }
  .clue-card{
    width:66px;
    padding:5px 5px 12px;
  }
  .clue-card-a{top:6px}
  .clue-card-b{top:auto;bottom:16px}
  .stamp{
    font-size:.84rem;
    line-height:1.35;
  }
  h1{
    font-size:1.1rem;
  }
  .paper-tab{
    left:50%;
    right:auto;
    top:auto;
    bottom:-9px;
    width:108px;
    height:20px;
    transform:translateX(-50%) rotate(0deg);
  }
  button,.ghost-btn,.cta{
    padding:.62rem .82rem;
  }
  .manuscript-redstone{
    right:9px;
    top:9px;
    width:min(78px,24vw);
  }
}

.archive-page .scene{
  display:block;
  padding:5.2rem 1rem 1.25rem;
}
.archive-page .dossier{
  transform:none;
  max-width:680px;
  margin:0 auto;
}
.archive-page .visible-list{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:.45rem;
}
.archive-page .visible-card{
  min-width:0;
  min-height:132px;
  padding:.45rem;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:flex-start;
}
.archive-page .visible-card .name{
  font-size:.7rem;
  line-height:1.2;
  word-break:break-word;
}
.archive-page .visible-card .state{
  margin-top:.12rem;
  font-size:.57rem;
  line-height:1.2;
}
.archive-page .visible-card .detail{
  margin-top:.24rem;
  font-size:.53rem;
  line-height:1.25;
  color:#5f4a33;
  word-break:break-word;
}
.archive-page .visible-progress{
  margin-top:auto;
  width:100%;
  height:4px;
}
.archive-page .visible-card.placeholder{
  background:rgba(246,234,213,.42);
  border-style:dashed;
}
.manuscript-page .scene{
  display:block;
  padding:5.2rem 1rem 1.25rem;
}
.manuscript-wrap{
  width:min(980px,100%);
  margin:0 auto;
}
.manuscript-shell{
  position:relative;
}
.manuscript-sheet{
  position:relative;
  min-height:min(78vh,1080px);
  padding:clamp(1.1rem,3vw,2rem);
  overflow:hidden;
  border-radius:10px;
  box-shadow:0 24px 44px rgba(0,0,0,.28);
}
.manuscript-paper{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:10px;
  filter:sepia(.05) saturate(.95) contrast(.98);
}
.manuscript-redstone{
  position:absolute;
  right:16px;
  top:16px;
  width:min(108px,16vw);
  height:auto;
  image-rendering:pixelated;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.22));
  z-index:1;
  pointer-events:none;
  user-select:none;
}
.manuscript-nav,
.manuscript-body{
  position:relative;
  z-index:1;
}
.manuscript-nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:1rem;
  margin-bottom:.8rem;
  padding:0;
}
.manuscript-nav .ghost-btn{
  background:transparent;
}
.manuscript-body{
  display:grid;
  gap:1rem;
  margin-top:1rem;
  padding:0 clamp(.8rem,3vw,2.2rem) clamp(.8rem,3vw,1.6rem);
}
.manuscript-entry{
  padding:.2rem 0;
}
.manuscript-entry p{
  margin:0;
  white-space:pre-line;
  line-height:1.8;
  font-family:'Special Elite',monospace;
  font-size:clamp(.96rem,1.35vw,1.12rem);
  color:#4d2e18;
  text-shadow:0 1px 0 rgba(255,255,255,.24);
}
.manuscript-entry strong{
  color:#5b2b18;
}
@media (max-width:760px){
  .archive-page .scene{
    padding:4.8rem .65rem 1rem;
  }
  .archive-page .dossier{
    padding:.95rem .75rem 1rem;
    max-width:none;
  }
  .archive-page .visible-list{
    gap:.35rem;
  }
  .archive-page .visible-card{
    padding:.3rem;
    min-height:96px;
    aspect-ratio:auto;
    overflow:visible;
  }
  .archive-page .visible-card.has-archive-paper{
    overflow:visible;
  }
  .archive-page .visible-card .name{
    font-size:.62rem;
  }
  .archive-page .visible-card .state{
    font-size:.52rem;
  }
  .archive-page .visible-card .detail{
    display:block;
  }
  .archive-page .visible-progress{
    height:3px;
  }
  .manuscript-page .scene{
    padding:4.8rem .65rem 1rem;
  }
  .manuscript-nav{
    align-items:flex-start;
    flex-direction:column;
  }
  .manuscript-sheet{
    min-height:auto;
    padding:0;
  }
  .manuscript-body{
    padding:.6rem 1rem 1rem;
  }
}