:root { font-family:"Comic Sans MS","Segoe Print","Bradley Hand",cursive; color:#111; background:#171a21; font-synthesis:none; }
* { box-sizing:border-box; }
html,body { width:100%;height:100%;margin:0;overflow:hidden; }
button { font:inherit; }
body { display:grid;place-items:center;background:#171a21; }
.app-shell { position:relative;width:min(80vw,calc(80vh * 1.77778));height:min(80vh,calc(80vw * .5625));overflow:hidden;background:url("assets/notebook-bg.png") center/cover no-repeat;box-shadow:0 0 34px #000b; }
.orientation-gate{display:none;position:fixed;inset:0;z-index:100;background:#fff;place-items:stretch;text-align:center}.rotate-card{width:100%;height:100%;padding:max(7vh,40px) 8vw 5vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;color:#1479bd}.rotate-card::before{content:"LANDSCAPE MODE";position:absolute;top:5%;font:bold clamp(12px,3.6vw,18px)/1 sans-serif;letter-spacing:.22em;color:#e89d00}.rotate-card h1{margin:clamp(26px,7vh,56px) 0 2%;font-size:clamp(36px,11vw,58px);line-height:1.05;text-shadow:none}.rotate-card p{margin:0;max-width:420px;color:#222;font:700 clamp(18px,5vw,27px)/1.35 sans-serif}.rotate-card button{width:min(86vw,390px);min-height:58px;margin-top:7%;padding:.72em 1em;border:3px solid #111;border-radius:12px 7px;background:#ffcc22;color:#111;font:bold clamp(17px,5vw,24px)/1 sans-serif;box-shadow:0 4px 0 #c78e00;cursor:pointer}.rotate-card button:active{transform:translateY(4px);box-shadow:none}.rotate-card small{display:block;min-height:2.7em;max-width:390px;margin-top:5%;font:700 clamp(13px,3.8vw,18px)/1.4 sans-serif;color:#60717c}.phone-rotate{position:relative;width:clamp(78px,25vw,120px);aspect-ratio:.55;border:clamp(5px,1.7vw,8px) solid #111;border-radius:17px;background:#fff;box-shadow:none;animation:rotate-phone 1.8s ease-in-out infinite}.phone-rotate::after{content:"";position:absolute;left:38%;right:38%;bottom:4%;height:4px;border-radius:4px;background:#111}.phone-rotate span{position:absolute;inset:11% 8% 13%;background:#eaf7ff;border:3px solid #1479bd}.rotate-arrow{height:.7em;margin-top:-.08em;color:#ffb800;font:bold clamp(58px,18vw,92px)/1 sans-serif}.orientation-gate.checked .rotate-card{animation:gate-nudge .35s ease}
.game-screen { position:absolute;inset:0; }
.game-screen[hidden] { display:none; }
.home-screen { position:absolute;inset:0;display:grid;grid-template-columns:64% 36%;grid-template-rows:1fr auto;padding:6% 5% 4%;color:#1479bd; }
.home-screen[hidden] { display:none; }
.title-wrap { position:relative;z-index:2;align-self:center;min-width:0;padding:2% 2% 2% 39%;text-align:center;transform:none;overflow:hidden; }
.title-wrap p { margin:0 0 2%;font:bold clamp(9px,1.2vw,18px)/1.2 sans-serif;letter-spacing:.18em;color:#f2a900; }
.title-wrap h1 { margin:0;padding:.08em .02em;font:900 clamp(30px,4.25vw,64px)/1.12 "Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif;letter-spacing:.035em;color:#0783c9;-webkit-text-stroke:clamp(.5px,.08vw,1.2px) #075f94;text-shadow:0 .04em 0 #fff,.04em .07em 0 #ffca28;white-space:nowrap; }
.title-line { display:block;width:82%;height:clamp(3px,.3vw,5px);margin:3% auto 0;background:#111;border-radius:99px;transform:none; }
.home-actions { align-self:center;display:grid;gap:clamp(10px,1.4vw,20px);justify-items:center; }
.menu-button { width:78%;min-height:clamp(38px,4.5vw,66px);padding:.2em .65em;border:clamp(2px,.26vw,4px) solid #111;border-radius:8px 5px 10px 6px;background:#fff8;color:#1479bd;font:700 clamp(14px,1.65vw,25px)/1.1 "Comic Sans MS","Trebuchet MS",sans-serif;white-space:nowrap;overflow:hidden;cursor:pointer;box-shadow:3px 4px 0 #1479bd24;transform:rotate(.4deg); }
.menu-button:nth-child(2) { transform:rotate(-.6deg); }.menu-button:nth-child(3){transform:rotate(.8deg)}
.menu-button:hover { transform:scale(1.04) rotate(-1deg); }.menu-button:active{transform:translateY(4px)}
.play-button { background:#ffcc22;color:#111;font-weight:bold;box-shadow:6px 7px 0 #db981d55; }
.home-note { position:relative;z-index:3;grid-column:1/-1;justify-self:center;margin:0;padding:0 4%;font-size:clamp(11px,1.3vw,20px);white-space:nowrap;transform:none; }
.home-hero{position:absolute;z-index:1;left:3%;bottom:8%;width:26%;height:76%;object-fit:contain;object-position:left bottom;pointer-events:none}
.home-doodle { position:absolute;left:5%;top:9%;width:8%;height:22%;opacity:.18;transform:rotate(-10deg); }
.home-doodle span { position:absolute;display:block;background:#111;border-radius:99px; }
.doodle-head{width:34%;aspect-ratio:1;border-radius:50%!important;left:33%;top:0}.doodle-body{width:8%;height:43%;left:46%;top:29%}.doodle-arm,.doodle-leg{width:8%;height:38%;left:46%;top:39%;transform-origin:top}.doodle-arm.left{transform:rotate(48deg)}.doodle-arm.right{transform:rotate(-48deg)}.doodle-leg{top:67%}.doodle-leg.left{transform:rotate(33deg)}.doodle-leg.right{transform:rotate(-33deg)}
.top-bar { position:absolute;inset:2.4% 2.5% auto;height:11%;display:grid;grid-template-columns:1fr auto auto;column-gap:clamp(8px,1vw,16px);align-items:start;color:#1479bd; }
.counter{display:flex;align-items:center;gap:clamp(4px,.42vw,7px);width:max-content;min-width:clamp(112px,11vw,166px);height:clamp(40px,4.2vw,58px);padding:.25% .6%;border:clamp(2px,.2vw,3px) solid #111;border-radius:8px 5px 9px 6px;background:#ffffffd9;box-shadow:2px 3px 0 #1479bd26;transform:rotate(-.5deg)}.score{justify-self:end;transform:rotate(.5deg)}
.counter-copy{display:grid;align-content:center;min-width:1.7em}.counter-copy small{font:bold clamp(6px,.56vw,9px)/1 sans-serif;letter-spacing:.06em;color:#5c7180}.counter-copy strong{font:700 clamp(18px,2vw,30px)/1 "Comic Sans MS",cursive;color:#1479bd}
.hud-icon{flex:0 0 auto}.add-diamond{display:grid;place-items:center;width:clamp(25px,2.25vw,34px);aspect-ratio:1;margin-left:auto;padding:0;border:clamp(2px,.18vw,3px) solid #111;border-radius:50%;background:#ffcc22;color:#111;font:bold clamp(16px,1.6vw,24px)/1 sans-serif;cursor:pointer;box-shadow:1px 2px 0 #cc9200}.add-diamond:hover{background:#ffdd5c;transform:scale(1.08)}.add-diamond:active{transform:translateY(2px);box-shadow:none}
.diamond-icon,.mini-diamond{display:inline-block;width:clamp(25px,2.45vw,37px);height:clamp(20px,2vw,30px);background:linear-gradient(135deg,#72d8ff 0 35%,#168fdd 36% 65%,#0871bd 66%);clip-path:polygon(20% 0,80% 0,100% 34%,50% 100%,0 34%);filter:drop-shadow(0 2px 0 #075b9b)}
.trophy-icon{display:grid;place-items:center;width:clamp(27px,2.7vw,41px);height:clamp(24px,2.45vw,37px);color:#fff;background:#ffbd12;border:2px solid #111;border-radius:12% 12% 48% 48%;font:bold clamp(10px,1vw,16px)/1 sans-serif;filter:drop-shadow(0 2px 0 #c98500)}
.round-button{border:clamp(3px,.42vw,7px) solid #111;border-radius:50%;background:#fafafa88;cursor:pointer;box-shadow:1px 2px 0 #0003}
.pause-button{justify-self:end;width:clamp(46px,4.5vw,66px);aspect-ratio:1;display:grid;place-items:center;align-content:center;gap:2%;background:#fff;border-width:clamp(2px,.25vw,4px)}.pause-bars{display:flex;justify-content:center;gap:18%;width:48%;height:clamp(17px,1.65vw,25px)}.pause-button i{display:block;width:28%;height:100%;background:#25c96a;border:1px solid #15934a;border-radius:2px;transform:rotate(2deg)}.pause-button i+i{transform:rotate(-2deg)}.pause-button small{font:bold clamp(5px,.45vw,7px)/1 sans-serif;letter-spacing:.04em;color:#111}
.play-area{position:absolute;inset:18% 12% 7%;display:grid;grid-template-columns:47% 49%;column-gap:4%}
.puzzle-panel{position:relative;z-index:2;display:grid;grid-template-rows:22% 28% 1fr;justify-items:center;min-width:0}
.category{width:82%;height:60%;padding:0 4%;display:grid;place-items:center;border:clamp(3px,.35vw,6px) solid #111;border-radius:7px 4px 9px 6px;color:#187fc4;font:700 clamp(15px,2.15vw,33px)/1.15 "Comic Sans MS","Trebuchet MS",sans-serif;letter-spacing:.01em;text-align:center;white-space:nowrap;overflow:hidden;transform:rotate(-.5deg);background:#fff9}.category-short{font-size:clamp(20px,2.65vw,40px)}.category-medium{font-size:clamp(17px,2.25vw,34px)}.category-long{font-size:clamp(14px,1.75vw,27px)}
.word{width:100%;min-width:0;display:flex;align-items:center;justify-content:center;gap:clamp(5px,.7vw,12px)}
.letter-slot{flex:0 1 clamp(25px,3.7vw,58px);min-width:0;height:clamp(34px,4.8vw,74px);border-bottom:clamp(3px,.35vw,6px) solid #111;text-align:center;color:#1479bd;font:400 clamp(25px,3.7vw,56px)/1.15 "Comic Sans MS",cursive}
.keyboard{align-self:center;width:96%;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));grid-template-areas:"q w e r t y u i o p" ". a s d f g h j k l" ". . z x c v b n m .";gap:clamp(4px,.48vw,8px)}
.key{min-width:0;aspect-ratio:.9;padding:0;display:grid;place-items:center;border:clamp(2px,.18vw,3px) solid #1479bd;border-radius:7px 4px 8px 5px;background:#fffffff0;color:#126fa9;font:700 clamp(17px,2.25vw,34px)/1 "Comic Sans MS",cursive;cursor:pointer;box-shadow:2px 3px 0 #1479bd33;text-shadow:none;transition:transform .1s,background .15s,color .15s}.key:nth-child(3n){transform:rotate(.7deg)}.key:nth-child(3n+1){transform:rotate(-.6deg)}.key:hover{background:#dff5ff;transform:scale(1.1) rotate(-2deg);z-index:1}.key:active{transform:translateY(3px) scale(.94);box-shadow:none}.key:disabled{opacity:.48;cursor:default;box-shadow:none}.key.correct{border-color:#168a48;background:#c9f3d8;color:#15763f;opacity:.72}.key.wrong{border-color:#c33b33;background:#f7d4d1;color:#a92e28;opacity:.55;text-decoration:line-through}
.drawing-panel{position:relative;z-index:1;min-width:0;pointer-events:none}.level{position:absolute;top:2%;left:29%;z-index:2;display:flex;align-items:center;gap:.45em;padding:.12em .55em;border:clamp(2px,.2vw,3px) solid #1479bd;border-radius:8px 5px;background:#fff9;color:#1479bd;font:400 clamp(17px,2.1vw,32px)/1.3 "Comic Sans MS",cursive;transform:rotate(1deg);cursor:pointer;pointer-events:auto}.level i{width:0;height:0;border-left:.22em solid transparent;border-right:.22em solid transparent;border-top:.32em solid #1479bd}.level:hover{background:#e8f7ff;transform:scale(1.04) rotate(0)}#hangmanCanvas{width:100%;height:100%;display:block;pointer-events:none}
.hint-area{position:absolute;right:1.8%;bottom:4.5%;color:#1479bd}.hint-button{width:clamp(68px,6.5vw,98px);padding:6% 4%;display:grid;justify-items:center;gap:3px;border:clamp(2px,.2vw,3px) solid #111;border-radius:11px 7px;background:#fff;box-shadow:2px 3px 0 #1479bd26;cursor:pointer}.bulb{position:relative;width:clamp(26px,2.5vw,38px);aspect-ratio:.82;display:block;border-radius:50% 50% 42% 42%;background:#ffca18;border:2px solid #d89600;box-shadow:inset 0 0 0 1px #ffe781}.bulb::after{content:"";position:absolute;left:25%;right:25%;bottom:-17%;height:22%;border:1px solid #111;border-radius:2px 2px 5px 5px;background:#ffb900}.bulb i{position:absolute;left:48%;top:24%;width:4%;height:38%;background:#fff;box-shadow:-5px -2px 0 -1px #fff,5px -2px 0 -1px #fff}.hint-copy{display:grid;justify-items:center}.hint-copy strong{font:bold clamp(8px,.75vw,12px)/1 sans-serif;letter-spacing:.06em;color:#111}.hint-copy small{display:flex;align-items:center;gap:2px;font:bold clamp(10px,.9vw,14px)/1 "Comic Sans MS",cursive;color:#1479bd}.hint-copy .mini-diamond{width:clamp(10px,.9vw,14px);height:clamp(8px,.72vw,11px)}.hint-button:hover{transform:scale(1.04)}.hint-button:active{transform:translateY(2px);box-shadow:1px 1px 0 #1479bd26}.hint-button:disabled{opacity:.4;cursor:not-allowed}
.overlay{position:absolute;inset:0;display:grid;place-items:center;background:#ffffff9c;backdrop-filter:blur(2px);z-index:10}.overlay[hidden]{display:none}.paper-card{width:min(54%,650px);padding:3% 5%;text-align:center;background:url("assets/notebook-bg.png") center/cover;border:clamp(3px,.4vw,7px) solid #111;border-radius:12px 7px 15px 9px;box-shadow:8px 10px 0 #1479bd33;transform:rotate(-.5deg)}.paper-card p{margin:0;color:#1479bd;font-size:clamp(17px,2.4vw,36px)}.paper-card h1{margin:2% 0;color:#111;font-size:clamp(42px,6vw,90px)}.paper-card button{margin:4% 2% 0;padding:.35em 1.1em;border:4px solid #111;border-radius:9px 5px;background:#fff8;color:#1479bd;font-size:clamp(17px,2.1vw,32px);cursor:pointer}.paper-card .continue-button{background:#ffcd24;color:#111}.pause-card{width:min(40%,480px)}
#overlay .paper-card{width:min(40%,480px);padding:2% 3%;border-width:clamp(2px,.28vw,4px);box-shadow:5px 6px 0 #1479bd33}#overlay .paper-card p{font-size:clamp(14px,1.65vw,25px)}#overlay .paper-card h1{margin:1% 0;font-size:clamp(34px,4.2vw,62px)}#overlay .paper-card button{margin-top:3%;padding:.28em .85em;border-width:clamp(2px,.25vw,4px);font-size:clamp(14px,1.55vw,23px)}
.menu-overlay .paper-card { position:relative; }
.menu-overlay .paper-card h1 { margin:0 0 4%;font-size:clamp(34px,4.4vw,66px);color:#1479bd; }
.info-card { width:min(64%,760px);text-align:left; }
.info-card ol { margin:0;padding-left:1.4em;font-size:clamp(16px,2vw,30px);line-height:1.55; }
.info-card .tip { margin-top:3%;padding:2% 3%;border:3px solid #ffbe18;background:#fff9cf;color:#111;font-size:clamp(14px,1.7vw,26px); }
.paper-card .close-button { position:absolute;right:2%;top:1%;margin:0;padding:0;border:0;background:transparent;color:#111;font:bold clamp(30px,4vw,60px)/1 sans-serif; }
.settings-card { width:min(50%,620px); }
.setting-row { display:flex;align-items:center;justify-content:space-between;margin:4% 0;font-size:clamp(18px,2.4vw,36px);color:#1479bd;cursor:pointer; }
.setting-row input { position:absolute;opacity:0; }
.setting-row i { position:relative;width:clamp(58px,6vw,88px);height:clamp(30px,3.2vw,48px);border:3px solid #111;border-radius:99px;background:#ddd; }
.setting-row i::after { content:"";position:absolute;width:40%;aspect-ratio:1;left:7%;top:50%;transform:translateY(-50%);border-radius:50%;background:#fff;border:2px solid #111;transition:left .15s; }
.setting-row input:checked+i { background:#54d682; }.setting-row input:checked+i::after { left:52%; }
.paper-card .reset-button { color:#c0392b;border-color:#c0392b;font-size:clamp(15px,1.7vw,25px); }
.diamond-card{width:min(48%,580px)}.exchange-rate{display:flex;align-items:center;justify-content:center;gap:8%;margin:4% 0;padding:4%;border:3px solid #1479bd;border-radius:9px;background:#e8f7ff99;color:#1479bd;font-size:clamp(20px,2.6vw,40px)}.exchange-rate b{color:#111}.exchange-rate .mini-diamond{margin-right:.2em}.diamond-card .balance-line{color:#111;font-size:clamp(17px,2vw,30px)}.diamond-card .exchange-message{min-height:1.5em;font-size:clamp(13px,1.45vw,22px);color:#1479bd}.diamond-card .exchange-message.error{color:#c0392b}.paper-card .exchange-button{background:#ffcc22;color:#111;font-weight:bold}.paper-card .exchange-button:disabled{opacity:.4;cursor:not-allowed}
.level-card{width:min(32%,380px);padding:1.5% 2%}.menu-overlay .level-card h1{margin-bottom:2.5%;font-size:clamp(20px,2.2vw,33px)}.level-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(4px,.42vw,7px)}.paper-card .level-choice{aspect-ratio:1;margin:0;padding:0;display:grid;place-items:center;border:clamp(1px,.15vw,2px) solid #111;border-radius:6px 4px;background:#fff;color:#1479bd;font:bold clamp(13px,1.45vw,22px)/1 "Comic Sans MS",cursive}.paper-card .level-choice.current{background:#ffcc22;color:#111}.paper-card .level-choice:disabled{background:#d8d8d8;color:#777;opacity:.7}.level-note{margin-top:2.5%!important;font-size:clamp(8px,.78vw,12px)!important}.level-card .close-button{font-size:clamp(19px,2vw,30px)}
.motion-off * { transition:none!important; }
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@media(max-width:900px) and (orientation:portrait){.orientation-gate{display:grid}}
@media(max-height:500px) and (orientation:landscape){.home-screen{padding:4% 4% 3%;grid-template-columns:64% 36%}.home-hero{left:2%;bottom:9%;height:74%;width:25%}.title-wrap{padding:2% 2% 2% 38%}.title-wrap h1{font-size:clamp(27px,3.8vw,43px);letter-spacing:.025em}.title-wrap p{font-size:clamp(7px,.9vw,11px)}.menu-button{width:80%;min-height:clamp(34px,4vw,48px);font-size:clamp(13px,1.5vw,18px)}.home-note{font-size:clamp(8px,1vw,12px)}.category{width:88%}.category-short{font-size:clamp(17px,2.25vw,25px)}.category-medium{font-size:clamp(14px,1.9vw,21px)}.category-long{font-size:clamp(11px,1.45vw,16px)}}
@keyframes rotate-phone{0%,25%{transform:rotate(0)}65%,100%{transform:rotate(90deg)}}
@keyframes gate-nudge{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}