body{font-family:'Inter',sans-serif;background:#0a0a12;color:#F0EAD6;overflow-x:hidden;-webkit-tap-highlight-color:transparent;}

  :root {
  --beige:#F0EAD6;--tan:#D2B48C;--rose:#BC4749;--rose-dk:#9b3a3c;
  --teal:#70A3A7;--teal-dk:#4e7d80;--charcoal:#403B33;
}
html,body{height:100%;}


/* HEADER */

/* HERO */
.hero{text-align:center;padding:48px 24px 32px;background:linear-gradient(180deg,rgba(188,71,73,.1) 0%,transparent 100%);}
.hero h1{font-family:'Fredoka',cursive;font-size:clamp(2rem,6vw,3.2rem);font-weight:700;color:#fff;margin-bottom:8px;}
.hero p{font-size:.92rem;color:rgba(240,234,214,.6);max-width:480px;margin:0 auto;}

/* MAIN */
.main{max-width:700px;margin:0 auto;padding:24px 16px 80px;}

/* RESULT CARD */
.result-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:32px 28px;margin-bottom:24px;min-height:280px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;transition:border-color .3s;}
.result-card.has-idea{border-color:rgba(188,71,73,.4);}
.result-card::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(188,71,73,.08) 0%,transparent 70%);pointer-events:none;}
.empty-state{text-align:center;opacity:.4;}
.empty-emoji{font-size:4rem;display:block;margin-bottom:12px;}
.empty-text{font-family:'Fredoka',cursive;font-size:1.1rem;color:rgba(240,234,214,.6);}

.idea-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;position:relative;z-index:1;}
@media(max-width:460px){.idea-grid{grid-template-columns:1fr;}}
.idea-slot{background:rgba(255,255,255,.05);border-radius:14px;padding:16px;}
.idea-slot-label{font-size:.6rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(240,234,214,.4);margin-bottom:6px;}
.idea-slot-value{font-family:'Fredoka',cursive;font-size:1.15rem;font-weight:700;color:#fff;line-height:1.2;}
.idea-slot.genre{border-left:3px solid #BC4749;}
.idea-slot.theme{border-left:3px solid #70A3A7;}
.idea-slot.mechanic{border-left:3px solid #f4a261;}
.idea-slot.twist{border-left:3px solid #a78bfa;}

.idea-title{font-family:'Fredoka',cursive;font-size:1.6rem;font-weight:700;color:#fff;text-align:center;margin-bottom:20px;line-height:1.2;position:relative;z-index:1;}

/* SPIN BUTTON */
.spin-btn{width:100%;font-family:'Fredoka',cursive;font-size:1.3rem;font-weight:700;padding:18px 32px;border-radius:16px;border:none;background:linear-gradient(135deg,var(--rose),var(--rose-dk));color:#fff;cursor:pointer;box-shadow:0 5px 0 var(--rose-dk);transition:transform .1s,filter .15s;display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:16px;}
.spin-btn:hover{filter:brightness(1.1);}
.spin-btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--rose-dk);}
.spin-btn.spinning{animation:shake .3s ease-in-out;}
@keyframes shake{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}

/* SECONDARY BUTTONS */
.btn-row{display:flex;gap:10px;flex-wrap:wrap;}
.sec-btn{flex:1;min-width:120px;font-family:'Fredoka',cursive;font-size:.95rem;font-weight:600;padding:11px 16px;border-radius:12px;border:1.5px solid rgba(240,234,214,.15);background:rgba(255,255,255,.05);color:rgba(240,234,214,.75);cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:7px;}
.sec-btn:hover{border-color:var(--teal);color:#F0EAD6;}

/* FILTERS */
.filters{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:20px;margin-bottom:24px;}
.filter-title{font-family:'Fredoka',cursive;font-size:1rem;font-weight:600;color:#F0EAD6;margin-bottom:14px;}
.filter-row{display:flex;flex-direction:column;gap:10px;}
.filter-group{display:flex;flex-direction:column;gap:6px;}
.filter-label{font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(240,234,214,.45);}
.filter-chips{display:flex;gap:6px;flex-wrap:wrap;}
.chip{font-size:.75rem;font-weight:700;padding:5px 12px;border-radius:999px;border:1.5px solid rgba(240,234,214,.12);background:rgba(255,255,255,.04);color:rgba(240,234,214,.55);cursor:pointer;transition:all .15s;user-select:none;}
.chip:hover{border-color:rgba(240,234,214,.3);color:#F0EAD6;}
.chip.on{background:var(--rose);border-color:var(--rose);color:#fff;}

/* HISTORY */
.history{margin-top:32px;}
.history-title{font-family:'Fredoka',cursive;font-size:1rem;font-weight:600;color:rgba(240,234,214,.5);margin-bottom:12px;}
.history-list{display:flex;flex-direction:column;gap:8px;}
.history-item{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:12px 16px;font-size:.82rem;color:rgba(240,234,214,.55);cursor:pointer;transition:background .15s;}
.history-item:hover{background:rgba(255,255,255,.06);color:#F0EAD6;}
.history-item strong{color:rgba(240,234,214,.8);}

/* FOOTER */
/* Welcome modal , dark-panel standard */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:500;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(6px);}
.modal-overlay.open{display:flex;}
.modal{background:#1c2333;border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:20px;width:min(460px,94vw);max-height:82vh;overflow:auto;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.6);}
.modal h3,.modal h2{font-family:'Fredoka',cursive;font-size:1.05rem;color:#f5a623;margin-bottom:10px;}
.modal-btns{display:flex;gap:8px;margin-top:12px;}
.m-ok{flex:1;padding:9px;border-radius:9px;border:none;cursor:pointer;font-family:'Fredoka',cursive;font-weight:700;background:#BC4749;color:#fff;}
.m-cancel{flex:1;padding:9px;border-radius:9px;border:1px solid rgba(255,255,255,.14);cursor:pointer;font-family:'Fredoka',cursive;background:rgba(255,255,255,.06);color:#F0EAD6;}
#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:#1c2333;border:1px solid #BC4749;color:#f5a623;padding:6px 16px;border-radius:8px;font-size:.78rem;opacity:0;transition:opacity .3s;pointer-events:none;z-index:900;}