:root{font-family:-apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;color:#183045;background:#f6f5ee;font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #e59543;outline-offset:3px}a{color:inherit;text-decoration:none}.wrap{max-width:1160px;margin:auto;padding-left:24px;padding-right:24px}.site-header{display:flex;justify-content:space-between;align-items:center;min-height:76px;gap:20px}.brand{font-weight:800;letter-spacing:.02em;font-size:18px}.brand span{color:#ec945b;font-size:22px}.site-header nav{display:flex;gap:24px;font-size:13px;font-weight:700}.site-header nav a:hover,.footer a:hover{text-decoration:underline}.hero{min-height:420px;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding-top:45px;padding-bottom:65px}.eyebrow{font-size:11px;letter-spacing:.2em;font-weight:800;color:#d46e49}.hero h1{font-size:clamp(60px,7vw,98px);line-height:1.04;letter-spacing:-.075em;margin:16px 0 20px;color:#183045}.hero h1 em{font-style:normal;color:#d6684e}.lead{font-size:16px;line-height:1.9;max-width:470px;color:#526777}.jump{display:inline-flex;align-items:center;justify-content:space-between;gap:50px;background:#193346;color:white;border-radius:999px;padding:15px 20px 15px 24px;font-weight:800;margin-top:17px;box-shadow:0 8px 0 #bfcfca}.jump:hover{transform:translateY(2px);box-shadow:0 6px 0 #bfcfca}.hero-art{height:330px;border-radius:48% 48% 12px 12px;overflow:hidden;position:relative;background:linear-gradient(#193d58,#48809a 70%,#7aa7ad)}.halo{position:absolute;width:260px;height:260px;background:#f0d898;border-radius:50%;filter:blur(3px);opacity:.3;right:30px;top:36px}.signal-beam{position:absolute;left:44%;top:62px;width:260px;height:140px;clip-path:polygon(0 44%,100% 0,100% 100%);background:linear-gradient(90deg,#fff4c598,transparent);transform:rotate(-8deg)}.tower{position:absolute;left:34%;bottom:38px;width:66px;height:220px;background:linear-gradient(90deg,#e7e1ce,#f6efe0 50%,#d0d2cf);clip-path:polygon(27% 0,73% 0,100% 100%,0 100%);z-index:2;box-shadow:0 12px 30px #152936}.tower span:first-child{position:absolute;left:11px;top:2px;width:44px;height:29px;background:#ecb264;border:5px solid #173f50}.tower span:nth-child(2){position:absolute;left:26px;top:93px;width:15px;height:25px;background:#42708a;border-radius:8px 8px 0 0}.tower span:last-child{position:absolute;left:25px;bottom:0;width:18px;height:38px;background:#2a5c70;border-radius:12px 12px 0 0}.sea{position:absolute;bottom:-50px;left:-15%;width:130%;height:130px;border-radius:50% 50% 0 0;background:repeating-linear-gradient(8deg,#336778 0 13px,#3d7382 14px 27px)}.star{position:absolute;color:#fce8ad}.s1{top:35px;left:80px;font-size:24px}.s2{top:90px;right:60px;font-size:30px}.s3{top:55px;right:150px;font-size:13px}.play-zone{background:#e9f0ed;padding:70px 0 84px}.play-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;align-items:start;gap:26px}.game-card,.side-card{background:#fff;border-radius:24px;box-shadow:0 18px 50px #173a3830}.game-card{padding:30px;position:relative;overflow:hidden;min-height:590px}.game-top{display:flex;align-items:center;justify-content:space-between;gap:16px}.game-top .eyebrow{margin:0 0 7px}.game-top h2{font-size:28px;margin:0}.level-pill{white-space:nowrap;background:#e8f0ec;color:#336258;padding:10px 14px;border-radius:20px;font-size:11px;font-weight:800;letter-spacing:.07em}.level-pill strong{font-size:17px}.progress{height:7px;background:#e9eeea;border-radius:99px;margin:25px 0 26px;overflow:hidden}.progress span{display:block;height:100%;width:0;background:#d77b53;border-radius:99px;transition:width .35s}.stage-intro{line-height:1.7;color:#566a71;margin:0 0 20px}.game-meta{display:flex;justify-content:space-between;gap:12px;color:#6e8082;font-size:13px;padding:12px 0;border-top:1px solid #ecf0ef;border-bottom:1px solid #ecf0ef}.game-meta strong{color:#1c3b48}.status{min-height:24px;color:#275963;font-weight:700;font-size:14px;margin:18px 0}.code-panel{background:#f2f6f3;padding:22px;border:1px solid #dce9e3;border-radius:18px}.panel-label{display:flex;justify-content:space-between;gap:12px;color:#3d6670;font-size:13px;font-weight:800}.panel-label span:last-child{font-size:11px;color:#7f9692;font-weight:600}.slots,.palette{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.slots{margin:22px 0 26px}.slot{width:64px;height:64px;border-radius:15px;border:2px dashed #b7ccc4;background:white;display:grid;place-items:center;color:#7b9891;font-size:22px;transition:transform .15s,border-color .15s}.slot:hover{transform:translateY(-2px)}.slot.selected{border:3px solid #d7734d;box-shadow:0 0 0 4px #f4dbc9}.slot.filled{border-style:solid}.peg{width:32px;height:32px;border-radius:50%;display:block;box-shadow:inset -6px -7px 10px #102b3430,inset 3px 3px 6px #ffffffb7,0 4px 7px #20323d25}.slot .peg{width:39px;height:39px}.palette{border-top:1px solid #dce9e3;padding-top:22px}.color-option{display:flex;flex-direction:column;align-items:center;gap:5px;background:transparent;border:0;min-width:54px;color:#456976;font-size:11px;font-weight:700;padding:3px;border-radius:10px}.color-option:hover{background:white;transform:translateY(-2px)}.color-option.used{opacity:.43}.color-option .peg{width:36px;height:36px}.actions{display:flex;justify-content:center;gap:10px;margin-top:23px;flex-wrap:wrap}.actions button,.result button{border:1px solid #d5e2de;background:white;border-radius:12px;padding:12px 17px;font-weight:800;color:#315f66}.actions button.primary,.result button{background:#183f4d;color:white;border-color:#183f4d}.actions button:hover,.result button:hover{filter:brightness(1.08)}.actions button:disabled{opacity:.5;cursor:not-allowed}.history-head{display:flex;justify-content:space-between;align-items:center;margin:30px 0 12px}.history-head h3{font-size:16px;margin:0}.history-head span{color:#7a9292;font-size:12px;font-weight:700}.history{display:flex;flex-direction:column-reverse;gap:8px}.empty-history{color:#879b9a;font-size:13px;text-align:center;padding:22px;border:1px dashed #d4dfdb;border-radius:12px;margin:0}.guess-row{border:1px solid #e3eae6;border-radius:12px;padding:9px 12px;display:flex;align-items:center;gap:12px}.guess-number{width:25px;color:#859695;font-size:12px;font-weight:800}.guess-pegs{display:flex;gap:7px}.guess-pegs .peg{width:24px;height:24px}.clues{margin-left:auto;display:flex;gap:9px;color:#45666c;font-size:12px;font-weight:700}.clues b{display:inline-block;color:#be6a47;font-size:15px}.side-card{padding:30px}.side-icon{width:46px;height:46px;background:#fae4cc;color:#d6784c;display:grid;place-items:center;border-radius:15px;font-size:27px}.side-card h2{font-size:29px;line-height:1.35;margin:24px 0 14px}.side-card p{font-size:13px;color:#627677;line-height:1.85}.side-card p strong{color:#1d4352}.stage-heading{margin-top:34px;display:flex;flex-direction:column;gap:3px;font-weight:800;font-size:13px}.stage-heading small{font-size:11px;font-weight:500;color:#829594}.stage-picker{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin:14px 0}.stage-picker button{aspect-ratio:1;border-radius:10px;border:1px solid #d5e3dd;background:#f5f7f3;color:#4b6c70;font-weight:800}.stage-picker button.active{background:#d57350;color:white;border-color:#d57350}.stage-picker button.solved{background:#d4e8d9;border-color:#b1d4bd}.stage-picker button:disabled{opacity:.45;cursor:default}.side-card .save-note{border-top:1px solid #e8eeeb;padding-top:16px;margin-top:20px;font-size:11px}.result{position:absolute;inset:0;background:#122e3ad9;z-index:5;display:grid;place-items:center;padding:20px}.result[hidden]{display:none}.result-inner{background:#fff;width:min(100%,380px);border-radius:22px;padding:34px;text-align:center;box-shadow:0 25px 60px #09202770}.result-star{font-size:44px;color:#d99456}.result h3{font-size:27px;margin:8px 0}.result p{line-height:1.8;color:#597173}.result button{margin-top:10px}.how{padding-top:80px;padding-bottom:90px}.how h2{font-size:36px;margin:12px 0 30px}.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.rules article{border-top:2px solid #cfdbd4;padding-top:18px}.rules article span{color:#d57850;font-size:11px;font-weight:800}.rules h3{margin:12px 0 8px;font-size:19px}.rules p,.how-note{color:#647779;font-size:14px;line-height:1.9}.how-note{margin-top:30px}.footer{min-height:100px;border-top:1px solid #e1e7df;display:flex;align-items:center;gap:20px;font-size:12px;color:#647779}.footer small{margin-left:auto}@media(max-width:820px){.hero{grid-template-columns:1fr .8fr;gap:20px}.play-grid{grid-template-columns:1fr}.side-card{display:block}.stage-picker{max-width:400px}}@media(max-width:620px){.wrap{padding-left:16px;padding-right:16px}.site-header{min-height:66px}.brand{font-size:15px}.site-header nav{gap:12px;font-size:11px}.site-header nav a:last-child{display:none}.hero{grid-template-columns:1fr;padding-top:35px;padding-bottom:50px;gap:36px}.hero h1{font-size:64px}.hero-art{height:220px;border-radius:44% 44% 10px 10px}.tower{transform:scale(.75);transform-origin:bottom}.signal-beam{left:42%;top:35px}.play-zone{padding:40px 0 55px}.game-card,.side-card{padding:19px;border-radius:18px}.game-top h2{font-size:22px}.level-pill{padding:8px;font-size:10px}.level-pill strong{font-size:14px}.code-panel{padding:16px 8px}.panel-label{padding:0 9px}.panel-label span:last-child{display:none}.slot{width:54px;height:54px}.slot .peg{width:34px;height:34px}.slots{gap:7px}.palette{gap:1px}.color-option{min-width:45px}.color-option .peg{width:30px;height:30px}.guess-row{padding:8px;gap:5px}.guess-pegs{gap:4px}.guess-pegs .peg{width:19px;height:19px}.clues{gap:5px;font-size:10px}.clues b{font-size:12px}.rules{grid-template-columns:1fr;gap:10px}.footer{flex-wrap:wrap;gap:12px;padding-top:20px;padding-bottom:20px}.footer small{margin-left:0;width:100%}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
:root .peg{display:grid;place-items:center;color:#12303d;font-size:11px;line-height:1;font-weight:800;text-shadow:0 1px #ffffff99}
.slot .peg{font-size:14px}
.guess-pegs .peg{font-size:9px}