:root { --ink:#17152f; --pink:#ff4b8b; --yellow:#ffd83d; --cream:#fff6e9; --mint:#72e0c1; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; min-height:100vh; color:var(--ink); background:linear-gradient(135deg,#fff8ee,#f8dafe 55%,#cdeee4); font-family:'Fredoka',sans-serif; overflow-x:hidden; }
.game-shell { width:min(100% - 32px, 1050px); margin:auto; padding:26px 0 80px; position:relative; z-index:1; }
header { display:flex; align-items:flex-start; justify-content:space-between; }
.brand { color:var(--ink); text-decoration:none; font-size:20px; line-height:.82; letter-spacing:-1px; font-weight:700; transform:rotate(-4deg); }.brand span { color:var(--pink); font-size:28px; float:left; margin:-3px 4px 0 0; }
.badge { background:var(--yellow); padding:8px 12px; border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink); font:500 10px 'DM Mono'; letter-spacing:.8px; }.badge i { display:inline-block; width:7px; height:7px; background:#4dbf78; border-radius:50%; margin-left:5px; }
.hero { text-align:center; margin:55px auto 26px; max-width:620px; }.eyebrow { font:500 11px 'DM Mono'; letter-spacing:1.4px; margin:0 0 10px; }.hero h1 { margin:0; font-size:clamp(58px,10vw,112px); line-height:.75; letter-spacing:-5px; }.hero h1 em { color:var(--pink); font-style:normal; text-shadow:4px 4px 0 var(--ink); }.intro { max-width:420px; margin:28px auto 0; font-size:18px; line-height:1.25; }
.maker-card { background:var(--cream); border:3px solid var(--ink); box-shadow:9px 9px 0 var(--ink); padding:25px; display:grid; grid-template-columns:1fr auto 1fr auto; gap:18px; align-items:end; }.thing-input label { display:block; margin-bottom:8px; font:500 10px 'DM Mono'; letter-spacing:1.1px; }.thing-input input { width:100%; border:2px solid var(--ink); padding:15px 12px; color:var(--ink); background:white; font:500 16px 'DM Mono'; outline:none; }.thing-input input:focus { box-shadow:3px 3px 0 var(--mint); }.plus { align-self:center; font-size:38px; color:var(--pink); text-shadow:2px 2px 0 var(--ink); }.maker-card button,.again-button { border:2px solid var(--ink); background:var(--pink); color:white; box-shadow:4px 4px 0 var(--ink); padding:16px 17px; font:700 14px 'Fredoka'; letter-spacing:.2px; cursor:pointer; white-space:nowrap; transition:transform .15s,box-shadow .15s; }.maker-card button:hover,.again-button:hover { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }.maker-card button:disabled { opacity:.7; cursor:wait; }.bolt { color:var(--yellow); font-size:20px; vertical-align:-1px; }.spin { display:inline-block; animation:spin .7s linear infinite; }
.idea-line { text-align:center; font:500 11px 'DM Mono'; letter-spacing:.7px; margin:29px 0 70px; }.text-button { font:inherit; color:var(--pink); border:0; background:none; padding:0; cursor:pointer; text-decoration:underline; font-weight:bold; }
.result { max-width:620px; margin:auto; text-align:center; scroll-margin-top:24px; }.result-heading h2 { font-size:34px; margin:0 0 20px; letter-spacing:-1px; }.image-frame { min-height:350px; aspect-ratio:1; background:var(--cream); border:3px solid var(--ink); box-shadow:8px 8px 0 var(--ink); display:grid; place-items:center; overflow:hidden; }.image-frame img { width:100%; height:100%; object-fit:cover; }.loader { padding:30px; display:grid; gap:15px; place-items:center; font:500 12px 'DM Mono'; }.loader span { width:52px; height:52px; border:6px solid var(--yellow); border-top-color:var(--pink); border-radius:50%; animation:spin .8s linear infinite; }.again-button { margin:26px; background:var(--mint); color:var(--ink); }
.name-editor { margin:26px auto 0; width:min(100%, 460px); text-align:left; }.name-editor label { display:block; margin:0 0 8px; font:500 10px 'DM Mono'; letter-spacing:1px; color:var(--pink); }.name-editor input { width:100%; border:2px solid var(--ink); background:var(--cream); box-shadow:4px 4px 0 var(--ink); padding:14px 15px; color:var(--ink); font:600 19px 'Fredoka'; outline:none; }.name-editor input:focus { box-shadow:4px 4px 0 var(--mint); }
.blob { position:fixed; z-index:0; border:2px solid var(--ink); border-radius:50%; opacity:.42; }.blob-one { height:290px; width:290px; right:-120px; top:100px; background:var(--yellow); }.blob-two { height:210px; width:210px; left:-105px; bottom:40px; background:var(--pink); }.spark { position:fixed; color:var(--pink); font-size:35px; z-index:0; }.spark-one { top:190px; left:7vw; }.spark-two { right:9vw; bottom:12vh; color:var(--mint); }
@keyframes spin { to { transform:rotate(360deg); } }
@media (max-width:760px) { .hero { margin-top:45px; }.maker-card { grid-template-columns:1fr; gap:15px; padding:20px; }.plus { display:none; }.maker-card button { width:100%; }.idea-line { margin-bottom:48px; }.image-frame { min-height:0; }.brand { font-size:16px; } }