:root{
    --black:#0a0a0a;
    --bone:#ede6d6;
    --blood:#a10d0d;
    --blood-bright:#d81414;
    --paper:#f2ead9;
    --green:#1f7a4d;
    --yellow:#c99a1e;
    --red:#b31212;
    --grey:#3a3632;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{
    margin:0; padding:0;
    background:var(--black);
    color:var(--bone);
    font-family:'Courier New', Courier, monospace;
    min-height:100dvh;
  }
  body::before{
    content:"";
    position:fixed; inset:0;
    pointer-events:none; z-index:999; opacity:.05;
    background-image:radial-gradient(circle,#000 1px,transparent 1px);
    background-size:3px 3px; mix-blend-mode:overlay;
  }
  .wrap{max-width:640px; margin:0 auto; padding:18px 14px calc(30px + env(safe-area-inset-bottom));}

  /* ===== header ===== */
  .topbar{
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:16px; gap:10px;
  }
  .brand{
    font-family:'Impact','Arial Black',sans-serif;
    letter-spacing:2px; font-size:16px; color:var(--bone);
    text-shadow:2px 2px 0 var(--blood);
    cursor:pointer;
  }
  .me-chip{
    font-size:10px; letter-spacing:1px;
    border:1px solid var(--blood-bright); color:var(--blood-bright);
    padding:5px 9px; cursor:pointer; user-select:none;
    font-family:'Impact','Arial Black',sans-serif;
  }
  .quota{
    font-size:10px; letter-spacing:1px; color:#8c8578; text-align:right;
  }
  .quota b{color:var(--bone);}
  .quota.maxed b{color:var(--blood-bright);}

  /* ===== cover / login ===== */
  .cover{text-align:center; padding-top:7vh; animation:fadeIn .5s ease;}
  .eyebrow{letter-spacing:6px; font-size:10px; color:var(--blood-bright); font-weight:bold; margin-bottom:10px;}
  h1.title{
    font-family:'Impact','Arial Black',sans-serif;
    font-size:40px; line-height:.95; text-transform:uppercase;
    margin:0 0 14px; text-shadow:3px 3px 0 var(--blood);
  }
  .sub{font-size:13px; color:#b7ada0; line-height:1.6; max-width:420px; margin:0 auto 30px;}
  .sub b{color:var(--bone);}
  .btn{
    font-family:'Impact','Arial Black',sans-serif;
    letter-spacing:2px; text-transform:uppercase; font-size:15px;
    background:var(--blood-bright); color:var(--black);
    border:none; padding:16px 30px; cursor:pointer; width:100%; max-width:300px;
    clip-path:polygon(0 0,100% 0,96% 100%,4% 100%);
    margin:6px auto; display:block;
    transition:transform .12s ease;
  }
  .btn:active{transform:scale(.96);}
  .btn.alt{background:var(--bone);}
  .btn.ghost{
    background:transparent; color:#8c8578; clip-path:none;
    border:1px solid #4a453d; font-size:11px; padding:10px 16px; max-width:220px;
  }
  .demo-note{
    margin:34px auto 0; max-width:420px; font-size:10.5px; color:#6b655a;
    border:1px dashed #4a453d; padding:10px 12px; line-height:1.6; text-align:left;
  }
  .demo-note b{color:#8c8578;}

  /* ===== themes grid ===== */
  .themes{display:none; animation:fadeIn .4s ease;}
  .themes.active{display:block;}
  .sec-label{
    font-size:10px; letter-spacing:3px; color:var(--blood-bright);
    font-family:'Impact','Arial Black',sans-serif; margin:4px 0 12px;
  }
  .theme-card{
    background:var(--paper); color:var(--black);
    border:2px solid var(--black);
    box-shadow:5px 5px 0 var(--blood-bright);
    padding:13px 14px; margin-bottom:13px; cursor:pointer;
    display:flex; justify-content:space-between; align-items:center; gap:10px;
    transition:transform .1s ease;
  }
  .theme-card:active{transform:translate(2px,2px); box-shadow:3px 3px 0 var(--blood-bright);}
  .theme-name{
    font-family:'Georgia',serif; font-weight:bold; font-size:15.5px; line-height:1.25;
  }
  .theme-meta{font-size:10px; color:#5a544a; margin-top:3px; letter-spacing:.5px;}
  .theme-dot{
    min-width:40px; height:40px; border:2px solid var(--black);
    display:flex; align-items:center; justify-content:center;
    font-family:'Impact','Arial Black',sans-serif; font-size:12px;
  }
  .theme-card.locked{
    background:#1a1816; color:#6b655a; border-color:#3a3632;
    box-shadow:5px 5px 0 #3a3632; cursor:default;
  }
  .theme-card.locked:active{transform:none; box-shadow:5px 5px 0 #3a3632;}
  .redact{
    display:inline-block; background:#0a0a0a; color:#0a0a0a; user-select:none;
    font-family:'Georgia',serif; font-weight:bold; font-size:15px; letter-spacing:1px;
  }
  .theme-card.locked .theme-dot{border-color:#3a3632; color:#6b655a; font-size:16px;}
  .theme-card.next .theme-meta{color:var(--blood-bright);}
  .file-no{font-size:9px; letter-spacing:2px; color:var(--blood); font-family:'Impact','Arial Black',sans-serif;}
  .theme-card.locked .file-no{color:#4a453d;}
  .tabs{
    display:flex; gap:8px; margin-bottom:16px;
  }
  .tab{
    flex:1; text-align:center; font-size:11px; letter-spacing:1px; padding:9px 4px;
    border:1px solid #4a453d; color:#8c8578; cursor:pointer;
    font-family:'Impact','Arial Black',sans-serif;
  }
  .tab.on{border-color:var(--blood-bright); color:var(--blood-bright);}

  /* ===== theme page / items ===== */
  .sheet{display:none; animation:fadeIn .35s ease;}
  .sheet.active{display:block;}
  .backlink{
    font-size:11px; letter-spacing:1px; color:#8c8578; cursor:pointer; margin-bottom:12px;
    display:inline-block;
  }
  h2.theme-title{
    font-family:'Impact','Arial Black',sans-serif; font-size:26px; margin:0 0 4px;
    text-transform:uppercase; letter-spacing:1px; text-shadow:2px 2px 0 var(--blood);
  }
  .legend{
    font-size:10px; color:#8c8578; line-height:1.7; margin:8px 0 16px;
    border-left:3px solid var(--blood); padding-left:10px;
  }
  .item{
    background:var(--paper); color:var(--black);
    border:2px solid var(--black); box-shadow:4px 4px 0 var(--blood-bright);
    padding:12px 12px 10px; margin-bottom:14px;
    position:relative;
  }
  .item.locked{opacity:.45; pointer-events:none;}
  .item-name{font-family:'Georgia',serif; font-weight:bold; font-size:15px; margin-bottom:9px; padding-right:58px;}
  .opts{display:flex; flex-wrap:wrap; gap:6px;}
  .opt{
    flex:1 1 30%;
    font-size:10.5px; letter-spacing:.3px; text-align:center;
    border:1.5px solid var(--black); background:#fff;
    padding:8px 4px; cursor:pointer; user-select:none;
    font-family:'Courier New',monospace; font-weight:bold;
  }
  .opt.sel{background:var(--black); color:var(--bone);}
  .verdict{
    position:absolute; top:10px; right:10px;
    font-family:'Impact','Arial Black',sans-serif;
    font-size:9px; letter-spacing:1px; padding:4px 7px;
    border:2px solid; transform:rotate(3deg);
  }
  .v-green{color:var(--green); border-color:var(--green);}
  .v-yellow{color:var(--yellow); border-color:var(--yellow);}
  .v-red{color:var(--red); border-color:var(--red);}
  .v-wait{color:#8a8372; border-color:#8a8372; border-style:dashed;}

  /* ===== results ===== */
  .filters{display:flex; gap:7px; margin-bottom:14px; flex-wrap:wrap;}
  .fbtn{
    font-size:10px; letter-spacing:1px; padding:7px 10px; cursor:pointer;
    border:1px solid #4a453d; color:#8c8578; font-family:'Impact','Arial Black',sans-serif;
  }
  .fbtn.on{border-color:var(--bone); color:var(--bone);}
  .res-row{
    display:flex; align-items:center; gap:10px;
    background:var(--paper); color:var(--black);
    border:2px solid var(--black); padding:9px 11px; margin-bottom:8px;
  }
  .res-dot{min-width:14px; height:14px; border:2px solid var(--black);}
  .d-green{background:var(--green);} .d-yellow{background:var(--yellow);}
  .d-red{background:var(--red);} .d-wait{background:#d8d0bd;}
  .res-name{font-size:12.5px; font-family:'Georgia',serif; font-weight:bold; flex:1;}
  .res-combo{font-size:9.5px; color:#5a544a; white-space:nowrap;}
  .empty-msg{font-size:12px; color:#8c8578; padding:30px 10px; text-align:center; line-height:1.7;}

  .stamp-fx{
    position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
    pointer-events:none; z-index:1000; opacity:0;
  }
  .stamp-fx.play{animation:stampPlay .55s ease forwards;}
  .stamp-fx span{
    font-family:'Impact','Arial Black',sans-serif; font-size:44px;
    border:5px solid; padding:6px 22px; transform:rotate(-12deg); letter-spacing:3px;
    background:rgba(10,10,10,.65);
  }
  /* ===== PUP MODE (sub only) ===== */
  body.pup::after{
    content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.045;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g fill='%23d81414'><ellipse cx='32' cy='42' rx='14' ry='12'/><ellipse cx='14' cy='26' rx='6' ry='8'/><ellipse cx='26' cy='16' rx='6' ry='8'/><ellipse cx='38' cy='16' rx='6' ry='8'/><ellipse cx='50' cy='26' rx='6' ry='8'/></g></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g fill='%23d81414'><ellipse cx='32' cy='42' rx='14' ry='12'/><ellipse cx='14' cy='26' rx='6' ry='8'/><ellipse cx='26' cy='16' rx='6' ry='8'/><ellipse cx='38' cy='16' rx='6' ry='8'/><ellipse cx='50' cy='26' rx='6' ry='8'/></g></svg>");
    background-size:46px 46px, 46px 46px;
    background-position:0 0, 120px 90px;
    background-repeat:repeat;
    transform:rotate(-18deg) scale(1.4);
  }
  .wrap{position:relative; z-index:1;}
  .paw{
    display:inline-block; width:13px; height:13px; vertical-align:-2px;
    background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g fill='%23d81414'><ellipse cx='32' cy='42' rx='14' ry='12'/><ellipse cx='14' cy='26' rx='6' ry='8'/><ellipse cx='26' cy='16' rx='6' ry='8'/><ellipse cx='38' cy='16' rx='6' ry='8'/><ellipse cx='50' cy='26' rx='6' ry='8'/></g></svg>") center/contain no-repeat;
  }
  body.pup .me-chip{
    border-radius:12px 12px 12px 12px / 50%; padding:5px 11px 5px 9px;
    background:var(--blood-bright); color:var(--black); border-color:var(--blood-bright);
  }
  body.pup .me-chip .paw{filter:brightness(0);}
  .item.fav{box-shadow:4px 4px 0 var(--blood-bright), 0 0 0 3px var(--blood-bright) inset;}
  .fav-tag{
    display:inline-flex; align-items:center; gap:5px;
    font-family:'Impact','Arial Black',sans-serif; font-size:9px; letter-spacing:1.5px;
    color:var(--blood-bright); margin-bottom:6px;
  }
  .stamp-fx span.pawstamp{
    display:flex; align-items:center; gap:14px;
  }
  .stamp-fx span.pawstamp i{
    display:inline-block; width:40px; height:40px; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g fill='%23d81414'><ellipse cx='32' cy='42' rx='14' ry='12'/><ellipse cx='14' cy='26' rx='6' ry='8'/><ellipse cx='26' cy='16' rx='6' ry='8'/><ellipse cx='38' cy='16' rx='6' ry='8'/><ellipse cx='50' cy='26' rx='6' ry='8'/></g></svg>") center/contain no-repeat;
  }
  @keyframes stampPlay{0%{opacity:0;transform:scale(2)}35%{opacity:1;transform:scale(1)}75%{opacity:1}100%{opacity:0}}
  @keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

  @media(min-width:760px){
    h1.title{font-size:56px;}
    .opt{font-size:11px;}
    .btn:hover{background:#ef1c1c;}
  }

  /* ===== login ===== */
  .pw-box{display:none; max-width:300px; margin:18px auto 0; text-align:left;}
  .pw-box.on{display:block; animation:fadeIn .3s ease;}
  .pw-box label{font-size:10px; letter-spacing:3px; color:var(--blood-bright); font-family:'Impact','Arial Black',sans-serif;}
  .pw-box input{
    width:100%; margin:8px 0 4px; padding:13px; font-size:16px;
    background:var(--paper); color:var(--black); border:2px solid var(--black);
    font-family:'Courier New',monospace; border-radius:0;
  }
  .pw-box input:focus{outline:none; border-color:var(--blood-bright);}
  .pw-err{font-size:11px; color:var(--blood-bright); min-height:16px; margin-bottom:6px;}
  .logout{font-size:10px; letter-spacing:1px; color:#6b655a; cursor:pointer; text-align:center; margin:26px 0 6px;}
  .export-row{margin:6px 0 16px;}
  .v-turn{color:var(--blood-bright); border-color:var(--blood-bright); border-style:dashed;}
  .d-turn{background:repeating-linear-gradient(45deg,#d81414,#d81414 3px,#f2ead9 3px,#f2ead9 6px);}