:root{color-scheme:dark;font-family:Georgia,serif;color:#f7edd5;background:#101d29;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% 35%,#243b48 0,transparent 65%),#101d29}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:3px solid #f8d38b;outline-offset:4px}button:disabled{cursor:default}#app{max-width:1080px;margin:auto;padding:30px 36px 18px}.top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #53616a;padding-bottom:18px}.brand{font-size:22px;letter-spacing:4px}.tag,.eyebrow,.meta,.sub,footer{font-family:Arial,sans-serif;font-size:11px;letter-spacing:2px;color:#9eb4ba}.tag{color:#deb67a}.ghost{border:1px solid #58676e;color:#dce3df;background:transparent;border-radius:5px;padding:12px 16px}.hero{text-align:center;padding:58px 0 24px}.eyebrow{color:#d1ae75}.hero h1{font-size:clamp(48px,7vw,82px);font-weight:400;letter-spacing:-3px;line-height:1;margin:20px 0 16px}.hero h1 span{color:#e5bd7b}.hero p{font-size:18px;line-height:1.6;color:#b5c8cb;max-width:500px;margin:20px auto}.primary{background:#e9bd78;color:#17232d;border:0;padding:16px 28px;border-radius:6px;font-family:Arial,sans-serif;font-weight:700;letter-spacing:1px;box-shadow:0 4px 0 #9d7644}.primary:hover{background:#f9cf8e}.menu-actions{display:flex;justify-content:center;gap:12px;margin:28px}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;max-width:700px;margin:36px auto}.feature{border-top:1px solid #64706e;padding-top:20px;line-height:1.6;color:#adc1c4}.feature b{display:block;color:#f3e5c7;font-weight:400;font-size:19px}.book{width:130px;height:90px;margin:15px auto;position:relative;transform:rotate(-7deg);border:3px solid #cba46b;border-radius:8px;background:linear-gradient(90deg,#244453 49%,#cba46b 49%,#cba46b 52%,#244453 52%);box-shadow:10px 12px 0 #0c182366,0 0 70px #dbbc6a22}.book:after{content:'W';display:block;color:#eed099;font-size:46px;line-height:80px;text-align:right;padding-right:12px}.stage-line{display:flex;justify-content:space-between;align-items:center;margin:25px 0 18px}.stage-line h1{font-size:27px;font-weight:400;margin:8px 0}.dots{display:flex;gap:9px}.dot{width:10px;height:10px;border:1px solid #d6b77c;border-radius:50%}.dot.on{background:#dfbc7e}.arena{min-height:255px;border:1px solid #52636a;border-radius:12px;background:radial-gradient(ellipse at bottom,#3e5554aa,transparent 70%),linear-gradient(140deg,#1e3440,#172732);display:grid;grid-template-columns:1fr 90px 1fr;position:relative;overflow:hidden;padding:25px 45px}.arena:after{content:'';position:absolute;inset:auto 0 0;height:40px;background:linear-gradient(170deg,transparent 25%,#354743 26%,#263b3e 70%);pointer-events:none}.fighter{text-align:center;z-index:1}.fighter h2{font-size:20px;font-weight:400;margin:0 0 10px}.hp{text-align:left;max-width:220px;margin:auto;font-family:Arial,sans-serif;font-size:11px;color:#c1d3cf}.hp span{float:right}.bar{height:7px;background:#0e1d27;border-radius:5px;margin:8px 0;overflow:hidden}.bar i{display:block;height:100%;background:#80c8b2;transition:width .3s}.enemy .bar i{background:#dc9b8c}.versus{align-self:center;text-align:center;font-size:13px;letter-spacing:3px;color:#97aaa8}.creature{height:105px;width:115px;margin:10px auto 0;position:relative}.keeper:before{content:'';position:absolute;width:64px;height:80px;bottom:0;left:26px;clip-path:polygon(50% 0,80% 35%,100% 100%,0 100%,18% 35%);background:linear-gradient(90deg,#67a9b0,#42737d)}.keeper:after{content:'• •';position:absolute;top:24px;left:37px;background:#f1d3a2;border:9px solid #294c5b;border-radius:50%;width:42px;height:38px;color:#253e48;font:20px Arial;line-height:20px}.ink{border-radius:50% 45% 35% 35%;width:88px;height:80px;margin-top:26px;background:#ae8fb9;box-shadow:inset -15px -8px #776480;transform:rotate(-5deg)}.ink:after{content:'• •';position:absolute;inset:18px 0 auto;font:bold 32px Arial;color:#192a36}.ink:before{content:'';position:absolute;left:-14px;right:-12px;bottom:-6px;height:25px;border-radius:50%;background:#8e789d}.thorn{background:#92ac82;box-shadow:inset -15px -8px #566f60}.eraser{background:#d9a385;box-shadow:inset -15px -8px #9d6c68;border-radius:15px 40px 10px 35px}.notice{font:14px/1.6 Arial,sans-serif;color:#d4ddcf;min-height:51px;margin:17px 0 9px;padding-left:14px;border-left:2px solid #ddba7c}.spell{text-align:center}.spell .sub{margin:10px 0}.word{font-size:32px;letter-spacing:9px;height:49px;color:#f1ce92;padding-left:9px}.tiles{display:flex;justify-content:center;gap:11px;margin:12px 0 20px}.tile{width:64px;height:72px;border:1px solid #f6d499;background:#ead6ad;color:#213441;border-radius:7px;font-size:31px;box-shadow:0 5px 0 #927953;position:relative}.tile small{position:absolute;bottom:5px;right:7px;font:10px Arial;color:#647071}.tile.selected{transform:translateY(-7px);background:#7fbfaf;border-color:#b4e1cf;box-shadow:0 5px 0 #447b71}.controls{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.controls .primary{min-width:180px}.history{text-align:center;font:12px Arial;color:#a4bbb9;margin-top:24px;min-height:20px}.rules{font:12px/1.6 Arial;text-align:center;color:#9fb5b8;margin-top:17px}.panel{max-width:660px;margin:45px auto;padding:30px;border:1px solid #58676e;border-radius:12px;background:#1b303c}.panel h1{font-size:38px;font-weight:400}.panel p,.panel li{font:16px/1.8 Arial;color:#bcd0ce}.panel li{margin:12px 0}.result{text-align:center;padding:55px 10px}.result h1{font-size:55px;font-weight:400;color:#e9c184}.result p{color:#bcd0ce;font-size:19px}.result .stats{font:14px Arial;margin:25px}footer{font-size:10px;letter-spacing:1px;text-align:center;margin:30px 0 0;line-height:1.7}button{transition:background .15s,transform .15s}@media(max-width:600px){#app{padding:20px 15px}.brand{font-size:16px;letter-spacing:2px}.tag{font-size:9px;letter-spacing:1px}.hero{padding-top:40px}.hero h1{letter-spacing:-1px}.arena{padding:20px 12px;grid-template-columns:1fr 35px 1fr;min-height:235px}.fighter h2{font-size:17px}.tile{width:calc((100vw - 74px)/7);max-width:55px;height:60px;font-size:25px}.tiles{gap:7px}.features{gap:15px}.feature{font-size:13px}.feature b{font-size:16px}.notice{font-size:12px;min-height:60px}.stage-line h1{font-size:24px}.ghost{padding:12px}.controls{gap:8px}.controls .primary{min-width:140px}.panel{padding:22px}.hero p{font-size:16px}.word{font-size:27px}.menu-actions{margin:24px 0}.top .ghost{padding:9px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}