/* =========================
   WISH FIC FEST — Advanced Style
   ========================= */

/* --- Color Tokens --- */
:root{
    --bg-top:#fdf6e9;
    --bg-mid:#eddcc1;
    --bg-bot:#e3cfaf;
    --text:#3a2b06;
  
    --leather:#6a3c1f;
    --leather-dark:#4c2714;
    --leather-hi:#a26943;
  
    --page:#fffef8;
  
    --gold:#d9b24a;
    --gold-hi:#f4df95;
    --gold-deep:#b88f23;
    --shadow:rgba(0,0,0,.18);
  }
  
  *{ box-sizing:border-box; margin:0; padding:0; }
  html,body{ height:100%; }
  body{
    font:16px/1.5 "Inter", system-ui, sans-serif;
    color:var(--text);
    background:
      radial-gradient(120% 60% at 50% -10%, rgba(255,255,255,.7), rgba(255,255,255,0) 55%),
      linear-gradient(var(--bg-top), var(--bg-mid) 60%, var(--bg-bot) 100%);
  }
  
  /* =========================
     Layout & Title
     ========================= */
  .hero{
    display:grid;
    place-items:start center;
    min-height:100vh;
    padding:48px 16px 64px;
  }
  .wrap{
    display:grid;
    justify-items:center;
    gap:20px;
  }
  .wordmark{
    color:#746d5e;
    font-weight:700;
    font-size:clamp(24px,6vw,38px);
    text-shadow:0 1px 0 #fff, 0 8px 20px rgba(0,0,0,.08);
    letter-spacing:.02em;
  }
  
  /* =========================
     Book Structure
     ========================= */
  .book{
    width:min(600px,94vw);
    aspect-ratio:3/4;
    position:relative;
    perspective:1600px;
    transition:transform .5s ease;
  }
  
  /* 3D Cover */
  .cover{
    position:absolute; inset:0;
    background:
      radial-gradient(160% 160% at 10% 10%, rgba(255,255,255,.2), transparent 40%),
      linear-gradient(180deg, #7b4a2a, var(--leather));
    border-radius:18px;
    border:3px solid var(--leather-dark);
    box-shadow:
      0 28px 40px rgba(0,0,0,.25),
      inset 0 0 0 2px rgba(255,255,255,.1);
    transform-origin:left center;
    transform:rotateY(0deg);
    transition:transform 800ms cubic-bezier(.18,.7,.12,1);
    z-index:10;
    cursor:pointer;
  }
  .book.open .cover{ transform:rotateY(-150deg); }
  
  /* Edge + Strap */
  .edge{
    position:absolute; right:12px; top:8px; bottom:8px; width:10px;
    background:linear-gradient(180deg,#d7c2a7,#b9926c 55%,#a27852);
    border-radius:999px;
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.25);
    z-index:11;
  }
  .strap{
    position:absolute; right:0; top:14px; bottom:14px; width:18px;
    background:linear-gradient(180deg,#f9e6a5,#d9b24a 55%,#b88f23);
    border:3px solid rgba(143,96,16,.45);
    border-right-width:4px;
    border-radius:999px;
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.3), 0 14px 28px rgba(0,0,0,.18);
    z-index:12;
  }
  
  /* Pages */
  .page{ position:absolute; inset:0; border-radius:18px; }
  .page.left{
    background:linear-gradient(90deg,var(--leather) 0%,#7b4a2a 42%,var(--leather-hi) 85%);
    border:3px solid var(--leather-dark);
    box-shadow:0 18px 28px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.07);
    z-index:1;
  }
  .page.right{
    background:var(--page);
    box-shadow:0 22px 40px rgba(0,0,0,.12), inset 0 0 0 1px rgba(0,0,0,.04);
    border-radius:18px;
    padding:28px;
    z-index:2;
  }
  
  /* Page Inner Grid */
  .page-inner{
    display:grid;
    grid-template-columns:1fr clamp(18px,2vw,26px);
    gap:clamp(18px,4vw,28px);
    height:100%;
  }
  .page-content{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:clamp(12px,3vw,18px);
  }
  .page-rail{
    border-radius:999px;
    background:linear-gradient(180deg,#f9e6a5,#d9b24a 55%,#b88f23);
    border:3px solid rgba(143,96,16,.45);
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.3), 0 14px 28px rgba(0,0,0,.18);
  }
  
  /* =========================
     Buttons (Treasure)
     ========================= */
  .treasure{
    display:flex;
    flex-direction:column;
    gap:clamp(10px,2.5vw,16px);
    width:100%;
    max-width:460px;
    margin-inline:auto;
    opacity:0;
    transform:translateY(12px);
    transition:opacity .45s ease, transform .45s ease;
  }
  .book.open .treasure{ opacity:1; transform:translateY(0); }
  
  .gold-btn{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:.7em;
    padding:clamp(12px,3.3vw,16px);
    border-radius:999px;
    border:2px solid var(--gold-deep);
    background:linear-gradient(var(--gold-hi), var(--gold));
    color:var(--text);
    font-weight:800;
    text-decoration:none;
    font-size:clamp(14px,4vw,18px);
    box-shadow:0 12px 24px var(--shadow);
    transition:transform .1s ease, filter .2s ease, box-shadow .3s ease;
  }
  .gold-btn .icon{
    flex:0 0 1.6em;
    text-align:center;
    filter:drop-shadow(0 1px 0 rgba(255,255,255,.8));
  }
  .gold-btn .label{
    flex:1;
    text-align:left;
  }
  .gold-btn:hover{
    filter:brightness(1.03);
    box-shadow:0 14px 26px rgba(0,0,0,.2), 0 0 8px rgba(255,240,180,.4);
  }
  .gold-btn:active{
    transform:translateY(1px);
    filter:brightness(.97);
  }
  
  /* =========================
     Responsiveness
     ========================= */
  @media (max-width:520px){
    .book{ width:min(440px,92vw); }
    .page.right{ padding:22px; }
    .page-inner{ grid-template-columns:minmax(0,1fr) clamp(16px,3.2vw,20px); }
    .treasure .gold-btn{ min-height:clamp(54px,12vw,68px); }
  }
  
  @media (max-height:740px){
    .page.right{ padding:18px; }
    .treasure{ gap:10px; }
    .gold-btn{ padding:10px 14px; }
  }
  
  .hint{ opacity:.6; font-size:.9rem; }