:root{--bg:#f7f7f7;--card:#fff;--ink:#202124;--muted:#747a76;--green:#6ac27f;--green-dark:#38884e;--line:#e4e8e5;--danger:#e46767;--shadow:0 16px 42px rgba(29,42,33,.14)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#e9ece9;color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI","Hiragino Sans","Yu Gothic UI","Yu Gothic",sans-serif}button,a{font:inherit}button{color:inherit}.app-shell{position:relative;width:100%;min-height:100dvh;margin:auto;overflow:hidden;background:var(--bg)}.screen{display:none;min-height:100dvh}.screen.is-active{display:block}.start-screen,.ad-screen,.result-screen{overflow-y:auto}.start-inner,.result-inner{width:min(100%,480px);margin:auto;padding:28px 22px max(34px,env(safe-area-inset-bottom))}.brand{color:var(--ink);font-size:14px;font-weight:850;letter-spacing:.14em;text-decoration:none}.brand span,.kicker{color:var(--green-dark)}.kicker{margin:50px 0 9px;font-size:12px;font-weight:800;letter-spacing:.24em}.start-inner h1{margin:0;font-size:clamp(54px,17vw,76px);font-weight:900;line-height:.86;letter-spacing:-.07em}.start-inner h1 em{color:var(--green);font-style:normal}.lead{max-width:390px;margin:28px 0;color:#626863;font-size:14px;line-height:1.85}.rules{margin:28px 0 26px;padding:20px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 7px 25px rgba(30,45,34,.04)}.rules h2{margin:0 0 11px;color:var(--green-dark);font-size:11px;letter-spacing:.18em}.rules ul{margin:0;padding:0;list-style:none}.rules li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid #edf0ee;font-size:12px}.rules li span{color:#606661}.rules li b{font-size:11px;text-align:right}.primary-button,.secondary-button{min-height:54px;border-radius:15px;font-weight:800;cursor:pointer}.primary-button{width:100%;display:flex;align-items:center;justify-content:space-between;padding:0 20px;color:#fff;background:var(--green);border:0;box-shadow:0 9px 24px rgba(106,194,127,.28)}.primary-button span{font-size:20px}.secondary-button{width:100%;margin-top:10px;background:#fff;border:1px solid var(--line)}
.game-screen.is-active{display:flex;height:100dvh;flex-direction:column;overflow:hidden;touch-action:none}.status-bar{position:relative;z-index:1000;flex:0 0 auto;display:grid;grid-template-columns:112px 1fr;gap:18px;padding:calc(13px + env(safe-area-inset-top)) 18px 13px;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);box-shadow:0 4px 14px rgba(29,42,33,.05)}.status-bar span{display:block;color:#818782;font-size:9px;font-weight:800;letter-spacing:.17em}.status-bar strong{font-size:20px;line-height:1.2}.status-bar small{font-size:9px;font-weight:700}.status-occupancy>div:first-child{display:flex;align-items:center;justify-content:space-between}.status-occupancy strong{font-size:14px}.occupancy-track{height:6px;margin-top:7px;overflow:hidden;background:#e8ece9;border-radius:9px}.occupancy-track i{display:block;width:0;height:100%;background:var(--green);border-radius:inherit;transition:width .25s,background .25s}.game-area{position:relative;flex:1;min-height:0;overflow:hidden;background-color:#f5f7f5;background-image:linear-gradient(rgba(76,105,84,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(76,105,84,.035) 1px,transparent 1px);background-size:32px 32px;isolation:isolate}.playfield-mark{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#d8ddd9;pointer-events:none}.playfield-mark span{font-size:12px;font-weight:800;letter-spacing:.22em}.playfield-mark b{margin-top:6px;color:#c8d0ca;font-size:10px;letter-spacing:.16em}.countdown{position:absolute;z-index:900;inset:0;display:none;place-items:center;background:rgba(247,249,247,.9);color:var(--ink);font-size:clamp(78px,28vw,130px);font-weight:900;letter-spacing:-.07em}.countdown.is-visible{display:grid}.countdown.is-start{color:var(--green);font-size:clamp(54px,19vw,88px);letter-spacing:-.04em}
.popup{position:absolute;z-index:10;overflow:hidden;background:#fff;border:1px solid #dfe4e0;border-radius:17px;box-shadow:var(--shadow);animation:pop-in .24s cubic-bezier(.2,.8,.2,1);user-select:none;-webkit-user-select:none}.popup-body{height:100%;cursor:pointer}.popup-close{position:absolute;z-index:3;top:7px;right:7px;width:44px;height:44px;display:grid;place-items:center;padding:0;background:rgba(255,255,255,.92);border:1px solid #e2e6e3;border-radius:50%;font-size:21px;line-height:1;cursor:pointer}.ad-art{position:relative;display:grid;place-items:center;min-height:92px;color:#768078;background:linear-gradient(145deg,#edf3ee,#e4e9e5);font-size:10px;font-weight:800;letter-spacing:.18em}.ad-art::before{content:"";width:54px;height:54px;border:9px solid rgba(106,194,127,.18);border-radius:50%}.ad-art span{position:absolute}.popup-copy{padding:15px}.popup-copy small{color:var(--green-dark);font-size:9px;font-weight:800;letter-spacing:.14em}.popup-copy h3{margin:5px 0 7px;font-size:15px;line-height:1.35}.popup-copy p{margin:0;color:var(--muted);font-size:11px;line-height:1.55}.normal-popup{width:min(260px,72vw)}.normal-popup .popup-actions{display:flex;gap:7px;padding:0 14px 14px}.popup-actions button{min-height:42px;flex:1;border-radius:10px;font-size:11px;font-weight:750;cursor:pointer}.later-button{color:var(--green-dark);background:#f1f8f3;border:1px solid #d8ebdd}.confirm-button{color:#fff;background:#343a36;border:0}.large-ad{width:min(330px,87vw)}.large-ad .ad-art{min-height:180px}.large-ad .popup-copy{padding:18px 18px 20px}.large-ad .popup-copy h3{font-size:19px}.notification-popup{width:calc(100% - 24px);max-width:430px;display:flex;align-items:center;gap:12px;padding:13px 54px 13px 13px;border-radius:15px;touch-action:none}.notice-icon{flex:0 0 38px;height:38px;display:grid;place-items:center;color:#fff;background:var(--green);border-radius:11px;font-weight:900}.notification-popup h3{margin:0;font-size:13px}.notification-popup p{margin:2px 0 0;color:var(--muted);font-size:10px}.notification-popup::after{content:"上にスワイプ";position:absolute;right:11px;bottom:5px;color:#9ba19c;font-size:7px}.video-ad{width:min(320px,84vw)}.video-ad .ad-art{min-height:190px;background:#2d322e;color:#dfe5e0}.video-ad .ad-art::before{border-color:rgba(106,194,127,.5)}.video-timer{position:absolute;top:10px;left:10px;padding:6px 9px;color:#fff;background:rgba(0,0,0,.55);border-radius:99px;font-size:9px}.video-skip{position:absolute;z-index:3;right:9px;bottom:9px;min-width:74px;min-height:42px;color:#fff;background:rgba(20,24,21,.9);border:1px solid rgba(255,255,255,.35);border-radius:9px;font-size:10px;font-weight:800;cursor:pointer}.moving-ad{width:min(270px,74vw);animation:slide-in .55s cubic-bezier(.22,.8,.28,1)}.moving-ad .ad-art{min-height:125px}.bottom-sheet{left:0!important;top:auto!important;bottom:0;width:100%;border-radius:24px 24px 0 0;touch-action:none;animation:sheet-in .35s ease-out}.bottom-sheet::before{content:"";display:block;width:42px;height:4px;margin:9px auto 2px;background:#d5dbd6;border-radius:9px}.bottom-sheet .popup-body{padding:3px 20px max(20px,env(safe-area-inset-bottom))}.bottom-sheet .popup-copy{padding:12px 0}.sheet-art{height:68px;border-radius:13px;background:linear-gradient(120deg,#edf4ef,#dfe8e1)}.bottom-sheet::after{content:"下にスワイプ";position:absolute;right:18px;top:10px;color:#9ba19c;font-size:8px}.score-float{position:absolute;z-index:1100;color:var(--green-dark);font-size:16px;font-weight:900;pointer-events:none;animation:score-up .8s ease-out forwards}
.ad-screen.is-active{display:grid;place-items:center;padding:24px}.center-panel{width:min(100%,390px);text-align:center}.alert-icon{width:74px;height:74px;margin:auto;display:grid;place-items:center;color:#fff;background:var(--danger);border-radius:50%;font-size:38px;font-weight:900;box-shadow:0 12px 30px rgba(228,103,103,.25)}.center-panel .kicker{margin:25px 0 9px;color:var(--danger)}.center-panel h2{margin:0;font-size:38px;line-height:1.15;letter-spacing:-.04em}.center-panel>p:last-of-type{margin:12px 0 36px;color:var(--muted);font-size:13px;font-weight:800;letter-spacing:.18em}
.result-inner>.kicker{margin-top:15px}.result-inner>h2{margin:0;font-size:44px;line-height:1;letter-spacing:-.045em}.result-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:25px}.result-summary>div{padding:17px 15px;background:#fff;border:1px solid var(--line);border-radius:16px}.result-summary span,.ranking-heading span{display:block;color:#858b86;font-size:9px;font-weight:800;letter-spacing:.14em}.result-summary strong{display:block;margin-top:4px;font-size:24px}.result-summary small{font-size:9px}.reason{margin:12px 0 28px;padding:12px 14px;color:#915050;background:#fff1f1;border-radius:11px;font-size:12px}.ranking{padding:20px;background:#fff;border:1px solid var(--line);border-radius:20px}.ranking-heading{display:flex;align-items:end;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid #edf0ee}.ranking-heading h3{margin:0;font-size:16px;letter-spacing:.08em}.ranking ol{margin:0;padding:0;list-style:none}.ranking li{display:grid;grid-template-columns:35px 1fr auto;align-items:center;padding:11px 3px;border-bottom:1px solid #f0f2f0;font-size:12px}.ranking li:last-child{border-bottom:0}.ranking li.is-you{margin-inline:-8px;padding-inline:11px;color:var(--green-dark);background:#f0f8f2;border-radius:10px;font-weight:800}.rank{font-weight:850}.rank-score{font-weight:800}.result-actions{margin-top:20px}
@keyframes pop-in{from{opacity:0;transform:scale(.88) translateY(9px)}}@keyframes slide-in{from{opacity:0;transform:translateX(var(--slide-from,110%))}}@keyframes sheet-in{from{transform:translateY(100%)}}@keyframes score-up{to{opacity:0;transform:translateY(-42px)}}
@media(min-width:560px){.app-shell{width:480px;min-height:100dvh;box-shadow:0 0 50px rgba(26,39,29,.12)}body{background:#e9ece9}.game-screen.is-active{height:100dvh}.start-inner,.result-inner{padding-inline:30px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

.secondary-button {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  text-decoration: none;
}
.start-back-button { margin-top: 10px; }

/* Device-relative popup sizing */
.normal-popup{width:var(--popup-normal-width,70%);min-width:230px;max-width:310px}.large-ad{width:var(--popup-large-width,90%);min-width:300px;max-width:430px}.notification-popup{width:var(--popup-notification-width,94%);max-width:none}.video-ad{width:var(--popup-video-width,86%);min-width:285px;max-width:410px}.moving-ad{width:var(--popup-moving-width,70%);min-width:230px;max-width:330px}.bottom-sheet{min-height:var(--popup-sheet-height,27%);max-height:36%}
.video-skip{left:10px;right:auto;bottom:auto;top:10px;min-width:112px;min-height:46px;padding:0 14px;background:#fff;color:#202124;border:2px solid var(--green);font-size:12px;box-shadow:0 6px 18px rgba(0,0,0,.22)}

/* Single-result ranking */
.ranking{text-align:center}.ranking-heading{text-align:left}.ranking-position{display:flex;align-items:baseline;justify-content:center;margin:23px 0 10px;color:var(--green-dark)}.ranking-position strong{font-size:clamp(64px,20vw,92px);font-weight:900;line-height:.85;letter-spacing:-.08em}.ranking-position span{margin-left:8px;font-size:20px;font-weight:850}.ranking-comment{min-height:3.5em;margin:19px auto 6px;white-space:pre-line;color:#545b56;font-size:13px;font-weight:650;line-height:1.7}

/* Live visual viewport and touch-safe game presentation */
.app-shell,.screen{min-height:var(--visible-height,100dvh)}.game-screen.is-active{height:var(--visible-height,100dvh);min-height:0}.notification-popup{transition:top .2s ease,box-shadow .2s ease}.notification-popup[aria-hidden="true"]{box-shadow:0 9px 24px rgba(29,42,33,.1)}
.countdown{contain:strict;isolation:isolate;backface-visibility:hidden;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}.countdown-text{display:block;backface-visibility:hidden}.countdown-text.is-pulsing{animation:countdown-clean-in .34s ease-out both}
@keyframes countdown-clean-in{from{opacity:0;transform:translateZ(0) scale(.86)}to{opacity:1;transform:translateZ(0) scale(1)}}

/* Popup contrast over website-style backgrounds */
.popup{background:#fff;border:1px solid #d8dde3;box-shadow:0 6px 18px rgba(0,0,0,.14)}.notification-popup{border-color:#dfe3e6;box-shadow:0 5px 14px rgba(0,0,0,.11)}

/* Free-position popups use the coordinates calculated in game.js. */
.normal-popup,.large-ad,.video-ad,.moving-ad{right:auto;bottom:auto;margin:0}

/* Normal popup variants */
.normal-popup{display:flex;flex-direction:column;max-width:none}.normal-popup .popup-body{height:auto;flex:1}.normal-size-small{width:var(--popup-normal-small-width,63%);min-width:215px;min-height:170px}.normal-size-medium{width:var(--popup-normal-medium-width,74%);min-width:245px;min-height:210px}.normal-size-large{width:var(--popup-normal-large-width,84%);min-width:280px;min-height:250px}.normal-size-medium .popup-copy{padding:20px}.normal-size-large .popup-copy{padding:26px 23px}.normal-size-medium .popup-copy h3{font-size:17px}.normal-size-large .popup-copy h3{font-size:20px}.normal-close-x .popup-copy{padding-right:58px}.popup-cta{display:inline-flex;align-items:center;margin-top:17px;color:var(--green-dark);font-size:11px;font-weight:800;letter-spacing:.04em}

/* Misclick destination placeholder and bottom result action */
.ad-screen.is-active{display:flex;height:var(--visible-height,100dvh);min-height:0;overflow:hidden;padding:0;flex-direction:column;background:#eef1ee}.ad-page-placeholder{min-height:0;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;color:#9aa19b;text-align:center}.ad-page-placeholder>span{font-size:9px;font-weight:800;letter-spacing:.2em}.ad-page-placeholder p{margin:14px 0 0;font-size:11px}.placeholder-art{position:relative;width:min(68%,280px);aspect-ratio:16/10;margin-top:16px;overflow:hidden;background:linear-gradient(145deg,#e0e6e1,#f7f9f7);border:1px solid #dce2dd;border-radius:18px}.placeholder-art::before{content:"";position:absolute;width:42%;aspect-ratio:1;left:29%;top:16%;border:14px solid rgba(106,194,127,.18);border-radius:50%}.ad-gameover-panel{flex:0 0 auto;padding:22px 22px max(24px,calc(env(safe-area-inset-bottom) + 16px));background:#fff;border-top:1px solid var(--line);border-radius:24px 24px 0 0;box-shadow:0 -12px 35px rgba(29,42,33,.09)}.ad-gameover-panel h2{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 18px;font-size:17px;letter-spacing:-.02em}.ad-gameover-panel .alert-icon{width:34px;height:34px;margin:0;flex:0 0 34px;font-size:18px;box-shadow:none}.ad-gameover-panel .primary-button{max-width:390px;margin:auto}

/* Public UI refinements */
.start-inner .kicker{margin-top:34px}.start-thumbnail{display:block;width:calc(100% - 8px);height:auto;margin:24px auto 0;border-radius:16px;box-shadow:0 8px 24px rgba(29,42,33,.11)}.start-inner .lead{max-width:none;margin:22px 2px 23px;color:#3f4541;font-size:clamp(15px,4.15vw,17px);font-weight:650;line-height:1.85;letter-spacing:-.015em}
.countdown{background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.status-bar{grid-template-columns:112px 1fr;background:#f4f7f5;border-bottom-color:#ccd7cf;box-shadow:0 3px 10px rgba(29,42,33,.09)}.status-bar span{color:#667169;font-size:10px}.status-bar strong{font-size:22px}.status-occupancy strong{font-size:16px}.occupancy-track{height:7px;background:#dce4de}
.result-screen{background:linear-gradient(180deg,#f4f8f5 0,#f7f7f7 38%)}.result-inner{padding-top:34px}.result-inner>.kicker{margin:0 0 8px}.result-inner>h2{font-size:46px}.reason{margin:18px 0 29px;padding:2px 0 2px 12px;color:#a05252;background:transparent;border-left:3px solid var(--danger);border-radius:0;font-size:13px;font-weight:650}.ranking{padding:0;background:transparent;border:0;border-radius:0;text-align:center}.ranking-heading{display:block;padding:0;border:0;text-align:center}.ranking-heading h3{color:#707873;font-size:11px;letter-spacing:.2em}.ranking-position{margin:20px 0 13px}.ranking-position strong{font-size:clamp(82px,25vw,116px)}.ranking-position span{font-size:22px}.ranking-comment{min-height:3.6em;max-width:330px;margin:18px auto 12px;color:#424944;font-size:15px;font-weight:650;line-height:1.7}.ranking-total{min-height:1.5em;margin:0;color:#7d8580;font-size:10px;font-weight:800;letter-spacing:.1em}.result-summary{position:relative;grid-template-columns:1fr 1fr;gap:0;margin:27px 0 0;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.result-summary::after{content:"";position:absolute;top:18px;bottom:18px;left:50%;width:1px;background:var(--line)}.result-summary>div{padding:0 15px;background:transparent;border:0;border-radius:0;text-align:center}.result-summary span{font-size:10px}.result-summary strong{margin-top:5px;font-size:27px}.result-actions{margin-top:24px;padding-bottom:max(0px,env(safe-area-inset-bottom))}.result-actions .secondary-button{background:transparent;border-color:#cfd6d1}
@media(max-width:370px){.start-inner{padding-inline:18px}.start-inner .kicker{margin-top:28px}.start-thumbnail{margin-top:20px}.start-inner .lead{margin-block:18px 20px;font-size:15px}.result-inner{padding-inline:19px}.ranking-position strong{font-size:80px}}
.start-inner .kicker{margin-bottom:0}.start-thumbnail{margin-top:16px}
