*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{display:grid;place-items:center;background:#192825;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",Meiryo,sans-serif}
button{border:0;font:inherit;cursor:pointer;color:inherit;touch-action:manipulation}
button:focus-visible,.notification:focus-visible{outline:3px solid #83bbab;outline-offset:3px}
button:disabled{opacity:.4}
svg{display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;width:24px;height:24px}
#game{position:relative;isolation:isolate;width:min(100vw,440px);height:100vh;height:100dvh;max-height:940px;overflow:hidden;color:#e7efe9;background:linear-gradient(160deg,#3f5d53 0%,#27453e 50%,#203c36 100%);touch-action:none;user-select:none}
.topbar{position:absolute;z-index:30;left:16px;right:16px;top:max(12px,env(safe-area-inset-top));height:56px;display:flex;align-items:center;justify-content:space-between}
.icon-button,.lang-button{height:48px;width:48px;background:transparent;border-radius:50%;display:grid;place-items:center}
.lang-button{font-size:18px;font-weight:700;letter-spacing:.5px}
.icon-button:hover,.lang-button:hover{background:#e7efe918}
.icon-button:active,.lang-button:active{background:#e7efe92a}
.scoreboard{text-align:center;min-width:110px}
.scoreboard>div:first-child{height:37px;display:flex;align-items:baseline;gap:5px;justify-content:center}
#score{font-size:32px;line-height:1;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-1px}
#score-unit{font-size:16px}
#mistakes{display:flex;gap:7px;justify-content:center}
#mistakes i{width:7px;height:7px;border:1.5px solid #d4e6db66;border-radius:50%}
#mistakes i.bad{background:#eda18e;border-color:#eda18e}
.list-heading{position:absolute;top:103px;left:20px;right:20px;display:flex;align-items:center;justify-content:space-between;height:30px}
.list-heading>div{display:flex;align-items:baseline;gap:9px}
h1{font-size:23px;margin:0;font-weight:650;letter-spacing:.5px}
#pending{font-size:16px;color:#b4c8bd;font-variant-numeric:tabular-nums}
.best-line{font-size:16px;display:flex;gap:7px;align-items:center;color:#b8cec1}
#best{font-weight:600;color:#e3eee6;font-variant-numeric:tabular-nums}
#arrival,#pressure{position:absolute;left:20px;right:20px;height:2px;overflow:hidden;pointer-events:none}
#arrival{top:142px;background:#d5e6db16}
#arrival i,#pressure i{display:block;height:100%;transform-origin:left;transform:scaleX(var(--value,0))}
#arrival i{background:#bad1c4}
#pressure{bottom:68px;height:3px;background:transparent}
#pressure i{background:#e5a58e}
#playfield,#stack{position:absolute;inset:0;pointer-events:none}
.notification{position:absolute;left:16px;top:0;width:calc(100% - 32px);border:1px solid #ffffff55;background:linear-gradient(155deg,#f1f4ee,#e8eee7);color:#233b31;border-radius:18px;padding:10px 13px;overflow:hidden;box-shadow:0 2px 3px #0a241c2e;will-change:transform;outline:none;cursor:grab;touch-action:none;pointer-events:auto}
.notification.dragging{cursor:grabbing;box-shadow:0 4px 12px #0b271c35;border-color:#fff}
.notice-head{height:22px;display:flex;align-items:center;gap:8px;margin-bottom:6px}
.app-icon{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;color:#f8faf6;flex:none}
.app-icon svg{width:16px;height:16px}
.sender{font-size:16px;line-height:1.3;font-weight:700;min-width:0;flex:1;white-space:nowrap}
.notice-time{font-size:16px;color:#677c70;white-space:nowrap}
.body{font-size:20px;line-height:1.35;letter-spacing:-.2px;pointer-events:none}
.notification.wrong{border-color:#cd7664;box-shadow:0 0 0 2px #cd7664}
.notification[aria-disabled="true"]{pointer-events:none}
.notification.exiting{pointer-events:none;z-index:21}
#docks{position:absolute;bottom:max(14px,env(safe-area-inset-bottom));left:18px;right:18px;height:40px;display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:none;z-index:22}
.dock{display:flex;gap:8px;align-items:center;padding:7px 4px;color:#c7d8cb;border-radius:8px}
.dock-label{font-size:18px;font-weight:600;white-space:nowrap}
.dock svg{width:22px;height:22px}
.dock.target{color:#fff;background:#dbead419}
#game.pressure #pending{color:#ffc0aa}
#overlay{position:absolute;inset:0;z-index:40;display:grid;place-items:center;background:#213a36eb;padding:20px}
#overlay[hidden]{display:none}
.result-sheet{width:100%;max-width:360px;padding:27px 22px 19px;background:#eef3eb;color:#263f33;border-radius:25px;text-align:center;box-shadow:0 16px 45px #0c2c2638}
#result-art{display:grid;place-items:center;color:#5b7d69;margin:auto;width:58px;height:58px}
#result-art svg{width:52px;height:52px;stroke-width:1.5}
h2{font-size:25px;line-height:1.4;margin:13px 0 8px}
#result-detail{font-size:18px;line-height:1.5;margin:0 0 14px}
#result-detail:empty{display:none}
#result-record{font-size:18px;display:flex;align-items:baseline;justify-content:center;gap:5px;margin:20px 0 5px}
#result-record:empty{display:none}
#result-record strong{font-size:54px;line-height:1.1;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-1px}
#result-best{font-size:16px;color:#687b6d;margin-bottom:20px}
#result-best:empty{display:none}
#primary,#secondary{display:block;width:100%;height:52px;border-radius:13px;font-size:20px;font-weight:650}
#primary{background:#2b6851;color:#f0f5ed}
#primary:hover{background:#245b46}
#secondary{margin-top:8px;background:transparent;font-size:18px;color:#60786a}
#secondary:hover{background:#dfe8dc}
#secondary[hidden]{display:none}
#rotate{position:absolute;inset:0;z-index:60;background:#243f37;display:grid;place-items:center}
#rotate[hidden]{display:none}
#rotate svg{width:88px;height:88px}
@media(min-width:600px) and (min-height:750px){#game{height:calc(100dvh - 32px);border-radius:30px;box-shadow:0 12px 48px #06110d55}}
@media(max-height:699px){.topbar{top:6px;height:48px}.scoreboard>div:first-child{height:30px}#score{font-size:28px}.list-heading{top:61px;height:25px}h1{font-size:21px}#arrival{top:91px}.notification{padding:8px 11px}.notice-head{margin-bottom:5px}.body{font-size:18px;line-height:1.3}.result-sheet{padding-top:20px}#result-art{height:40px}#result-art svg{width:36px;height:36px}h2{font-size:23px}#result-record strong{font-size:44px}}
@media(max-width:350px){.body{font-size:18px;line-height:1.3}.notification{padding-left:11px;padding-right:11px}.dock{gap:4px}.dock svg{width:19px}.result-sheet{padding-left:17px;padding-right:17px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

.notification.dragging{outline:none}

/* 数字の実字面が行枠の内側に収まる余裕を確保します。 */
#score{line-height:1.35}.scoreboard>div:first-child{height:44px}
#result-record strong{line-height:1.35}
@media(max-height:699px){.scoreboard>div:first-child{height:38px}}
.body{text-wrap:balance}