:root{--ink:#293e36;--muted:#819087;--green:#3c6753;--paper:#f6f5ef;--line:#dce2d9}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif}button,a,canvas{-webkit-tap-highlight-color:transparent}button{touch-action:manipulation;font:inherit;cursor:pointer;transition:transform .15s,background .15s}button:hover{filter:brightness(.96)}button:active{transform:translateY(2px)}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #c2934c;outline-offset:4px}header{height:98px;margin:0 5%;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.brand{color:var(--ink);text-decoration:none;font-size:16px;font-weight:800;letter-spacing:2px;display:flex;align-items:center;gap:12px}.brand-icon{font-size:32px}.brand small{font-size:9px;border:1px solid #b8c6ba;padding:5px 7px;letter-spacing:1px}.header-note{font-size:11px;color:var(--muted);letter-spacing:2px}main{display:grid;grid-template-columns:minmax(235px,1fr) minmax(340px,490px) 170px;gap:45px;max-width:1250px;padding:50px 35px 30px;margin:auto;align-items:center}.eyebrow{font-size:9px;font-weight:700;letter-spacing:2px;color:#7a8d7d}h1{font-size:40px;line-height:1.5;letter-spacing:2px;margin:24px 0}h1 span{display:block;font-size:11px;letter-spacing:1px;margin-top:16px;font-weight:500}.lead{font-size:13px;line-height:2.3;color:#6d7b72}.mode{display:flex;background:#e8ece4;padding:5px;border-radius:10px;margin:28px 0;max-width:285px}.mode button{border:0;background:transparent;padding:12px 10px;flex:1;font-size:11px;color:#6d7b72;border-radius:7px;white-space:nowrap}.mode .selected{background:#fff;color:var(--green);box-shadow:0 2px 5px #304c3510;font-weight:bold}.rules p{display:flex;gap:14px;align-items:center;font-size:11px;margin:20px 0}.rules b{color:#91a38c;font-size:10px}.keyboard{font-size:10px;line-height:2.5;color:#8a938a;margin-top:28px}kbd{border:1px solid #cfd7ce;border-bottom-width:2px;padding:2px 5px;border-radius:4px;font-family:inherit;background:#fff}.text-button{font-size:11px;color:#708270;background:none;border:0;padding:10px 0}.game-panel{background:#fff;border:1px solid #dce4da;border-radius:20px;padding:18px;box-shadow:0 14px 55px #29493109;min-width:0}.scorebar{display:flex;align-items:center;justify-content:space-between;padding:0 8px 13px}.scorebar>div>span{display:block;font-size:8px;letter-spacing:2px;color:#829181}.scorebar strong{display:block;font-size:27px;line-height:1.35;font-weight:600}.scorebar small{font-size:10px;font-weight:400}.scorebar .turn{display:flex;gap:7px;align-items:center;border:1px solid #e1e8dd;padding:8px 10px;border-radius:20px}.turn i{width:6px;height:6px;background:#7b9b69;border-radius:50%}.scorebar .turn span{letter-spacing:0;font-size:10px}.best{text-align:right}.stage{position:relative;border-radius:12px;overflow:hidden;background:#eaf1e5}canvas{width:100%;height:auto;display:block;touch-action:pan-y;cursor:default}.stage-caption{position:absolute;top:19px;left:0;right:0;text-align:center;font-size:8px;letter-spacing:3px;color:#9ba992;pointer-events:none}.controls{display:flex;gap:12px;margin-top:15px}.controls button{border:1px solid #d3dfd0;border-radius:10px;padding:13px;font-size:13px;font-weight:bold}.controls #rotate{background:#f6f8f2;color:var(--green);flex:1}.controls #rotate span{font-size:20px;margin-right:12px}.controls #drop{background:var(--green);color:white;flex:1.8}.controls #drop span{margin-left:30px}#status{text-align:center;font-size:10px;min-height:15px;color:#85917f;margin:11px 0 0}.next-card{height:177px;border:1px solid var(--line);border-radius:14px;margin-top:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#efefe7}.next-card img{width:110px;height:110px;object-fit:contain}.next-card span{font-size:10px;color:#8b9588}.tip{margin:45px 0;color:#8b977f}.tip>span{font-size:26px}.tip p{font-size:11px;line-height:2.2}.collection-count{font-size:9px;letter-spacing:2px;color:#83917b;line-height:2.3}.collection-count span{font-size:9px;letter-spacing:0}footer{max-width:1180px;margin:10px auto 0;padding:22px 0;border-top:1px solid var(--line);font-size:8px;letter-spacing:2px;color:#9aa494;display:flex;justify-content:space-between}footer p{margin:0}.overlay{position:absolute;inset:0;display:grid;place-items:center;background:#eff3e9dc;backdrop-filter:blur(6px);padding:20px;text-align:center}.overlay[hidden]{display:none}.result h2{font-size:22px}.result>p:not(.eyebrow){font-size:13px;line-height:1.9}.result button{background:var(--green);border:0;border-radius:9px;color:white;padding:14px 24px;margin-top:14px}@media(min-width:1400px){main{padding-top:65px}}@media(max-width:1050px){main{grid-template-columns:240px minmax(300px,460px);gap:30px;justify-content:center}.collection{display:none}h1{font-size:33px}footer{margin:10px 35px}}@media(max-width:660px){header{height:65px}.brand{font-size:12px;letter-spacing:1px}.brand small{font-size:7px}.header-note{display:none}main{display:flex;flex-direction:column;padding:20px 14px;gap:16px}.intro{width:100%;text-align:center}.intro>.eyebrow,.lead,.rules,.keyboard,.intro h1 span{display:none}h1{font-size:23px;margin:0;letter-spacing:1px}h1 br{display:none}.mode{margin:14px auto 0;max-width:300px}.mode button{padding:9px}.text-button{position:relative;padding:10px 0 0}.game-panel{width:100%;max-width:460px;padding:12px}.collection{display:none}footer{margin:0 18px;padding:18px 0;font-size:7px}.controls button{padding:12px}}

/* Solo leaderboard */
main{grid-template-columns:minmax(225px,1fr) minmax(330px,470px) 230px;gap:30px}.ranking{margin-top:30px}.ranking h2{font-size:16px;margin:8px 0 12px}.ranking-note,#rankingEmpty{font-size:10px;line-height:1.9;color:#819087}.ranking ol{list-style:none;padding:0;margin:14px 0}.ranking li{display:grid;grid-template-columns:27px minmax(0,1fr) auto;gap:7px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);font-size:12px}.rank-number{color:#819087;font-size:11px}.rank-name{overflow-wrap:anywhere}.rank-score{font-weight:bold;white-space:nowrap}.ranking li:first-child .rank-number{color:#b18a39;font-weight:bold}.ranking li.current-record{background:#e4eddf;border-radius:6px;padding-left:5px;padding-right:5px}#recordForm{margin:18px 0 8px}#recordForm[hidden]{display:none}#recordForm label{display:block;font-size:11px;margin-bottom:8px}#playerName{font:inherit;font-size:13px;width:100%;max-width:260px;padding:11px;border:1px solid #b8c6ba;border-radius:7px;background:#fff;color:var(--ink)}#recordForm button{display:block;margin:10px auto 0;padding:11px 18px;font-size:12px}#recordStatus{font-size:11px;line-height:1.7;max-width:270px;margin:10px auto 0}.result{width:100%}.result>button{font-size:12px}.overlay{overflow:auto}.collection .tip,.collection-count{display:none}
@media(max-width:1050px){main{grid-template-columns:220px minmax(300px,460px)}.collection{display:block;grid-column:1 / -1;width:100%;max-width:710px}.collection>.eyebrow,.next-card{display:none}.ranking{margin-top:0}.ranking ol{display:grid;grid-template-columns:1fr 1fr;column-gap:30px}}
@media(max-width:660px){.collection{display:block;max-width:460px;padding:10px 12px}.ranking ol{display:block}.ranking h2{font-size:18px}.ranking-note,#rankingEmpty{font-size:11px}.ranking li{font-size:13px}.result h2{font-size:20px}.result>p:not(.eyebrow){font-size:11px}.result button{margin-top:10px;padding:11px 18px}#recordForm{margin-top:10px}}

#startForm{text-align:left;margin:20px auto 0;max-width:280px}#startForm[hidden],#nameField[hidden]{display:none}.ranking-choice{display:flex;gap:8px;align-items:center;font-size:14px;cursor:pointer}#joinRanking{width:19px;height:19px;accent-color:var(--green)}#nameField{margin-top:16px}#nameField>label{display:block;font-size:13px;margin-bottom:8px}#startGame{display:block;width:100%;font-size:14px}#startStatus{font-size:12px;line-height:1.7}.ranking-note{font-size:12px}.result h2{line-height:1.6}#retryRecord{font-size:12px}.result button[hidden]{display:none}

.move-controls{display:flex;align-items:center;gap:12px;margin-top:15px}.move-controls button{flex:1;min-height:44px;border:1px solid #d3dfd0;border-radius:10px;background:#f6f8f2;color:var(--green);font-size:24px;touch-action:manipulation}.move-controls span{font-size:12px;color:#708270}

#resultText:empty{display:none}

#resultTitle:empty{display:none}

.portfolio-return{margin:0 5%;padding:16px 0 0}.portfolio-return a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border:1px solid #b8c6ba;border-radius:10px;background:#fff;color:var(--green);font-size:14px;font-weight:700;text-decoration:none;touch-action:manipulation}.portfolio-return a:hover{background:#e8ece4;text-decoration:none}