:root{color-scheme:dark;--ink:#ebf7f2;--sub:#a6bbc6;--panel:#1a3040;--border:#355061;--mint:#60efc4;--yellow:#ffe19c;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif}*{box-sizing:border-box}html{scroll-behavior:auto}body{margin:0;color:var(--ink);background:radial-gradient(ellipse at 12% -10%,#244d4e 0,transparent 36%),radial-gradient(ellipse at 90% 10%,#342c56 0,transparent 42%),#0d1c2b;min-width:300px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #fff1ad;outline-offset:3px}button:disabled{opacity:.5;cursor:default}[hidden]{display:none!important}.top{height:56px;padding:0 max(16px,calc((100vw - 1110px)/2));display:grid;grid-template-columns:1fr minmax(0,1.2fr) 1fr;gap:8px;align-items:center;background:#122638ed;border-bottom:1px solid #2d4a5b;position:relative;z-index:10}.game-control-back{justify-self:start;text-decoration:none;color:#e0fcf3;background:#22394a;border:1px solid #3e5c6a;border-radius:12px;font-weight:800;font-size:13px;padding:9px 12px;white-space:nowrap}.game-control-title{text-align:center;font-size:14px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.game-control-sound{justify-self:end;background:#24394c;border:1px solid #3e5c6a;border-radius:12px;color:#ecfcf7;font-size:12px;font-weight:850;white-space:nowrap;padding:9px 11px}.back-short{display:none}.wrap{max-width:1090px;margin:0 auto;padding:24px 18px 38px}.mast{margin:0 0 18px}.eyebrow{margin:0 0 6px;color:#9fedd3;letter-spacing:.18em;font-weight:850;font-size:11px}.mast h1{margin:0;font-size:clamp(30px,5vw,48px);letter-spacing:.015em;line-height:1.18}.mast h1 span:not(.flower-icon){color:#79f1c5}.flower-icon{font-size:.75em}.lead{font-size:14px;color:#bed0d6;margin:7px 0 0}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:18px;align-items:start}.machine{background:linear-gradient(150deg,#1c3850 0,#14293b 68%,#172c3f);border:1px solid #42606c;border-radius:24px;padding:17px;box-shadow:0 24px 55px #0005;min-width:0;overflow:hidden}.machine-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:25px}.pill{padding:5px 11px;background:#254f53;border:1px solid #3d7c77;border-radius:999px;color:#aef7d7;font-size:11px;font-weight:900}.round{color:#a6bdc8;font-weight:800;font-size:12px}.hud{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:13px 0 9px}.hud>div{background:#102537aa;border:1px solid #365263;border-radius:12px;padding:10px 9px;min-width:0}.hud small,.price small{font-size:10px;color:#92b5c5;display:block;font-weight:800;letter-spacing:.06em}.hud strong{font-size:clamp(20px,3vw,29px);line-height:1.2;letter-spacing:-.03em;font-variant-numeric:tabular-nums}.hud strong span{font-size:11px;color:#b5c7d2}.time-rail{height:7px;background:#0d2738;border-radius:99px;overflow:hidden;margin:0 0 11px}.time-fill{height:100%;width:100%;background:linear-gradient(90deg,#68dbe2,#6af2be,#f9e792);transition:width .08s linear}.stage{height:clamp(275px,36vw,388px);position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 30%,#2d4e62 0,#1d3449 45%,#10283a 82%);border-radius:18px;border:1px solid #49707a;isolation:isolate}.stage:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#d5fff507 0,transparent 36%,#081a2711 100%)}#flowerCanvas{width:100%;height:100%;display:block}.top-floating{position:absolute;left:50%;top:9px;transform:translateX(-50%);font-size:12px;font-weight:900;text-align:center;padding:6px 11px;background:#11283699;border:1px solid #63898a66;border-radius:99px;white-space:nowrap;pointer-events:none;z-index:2;color:#e1fff2}.words{position:absolute;inset:0;pointer-events:none;z-index:6}.word-pop{position:absolute;left:var(--x,50%);top:70%;transform:translate(-50%,0);font-size:16px;letter-spacing:.03em;font-weight:1000;color:var(--col,#f2e2aa);text-shadow:0 2px 8px #000,0 0 14px currentColor;white-space:nowrap;animation:wordrise .7s ease-out forwards}@keyframes wordrise{0%{opacity:0;transform:translate(-50%,16px) scale(.65)}25%{opacity:1;transform:translate(-50%,-6px) scale(1.17)}100%{opacity:0;transform:translate(-50%,-75px) scale(1)}}.stage-shine{position:absolute;inset:0;pointer-events:none;background:#e8fff5;z-index:5;opacity:0}.stage-shine.flash{animation:stageflash .36s linear}@keyframes stageflash{0%{opacity:.28}100%{opacity:0}}.stage-overlay{position:absolute;z-index:8;inset:0;background:linear-gradient(#071c27c9,#091925dd);display:flex;align-items:center;justify-content:center;text-align:center;padding:15px}.overlay-panel{max-width:410px;width:100%;padding:20px 16px;background:#132b3ef0;border:1px solid #668c8d;border-radius:20px;box-shadow:0 20px 50px #0006}.huge{font-size:38px;display:block}.overlay-panel h2{font-size:clamp(22px,4vw,30px);margin:5px 0 7px}.overlay-panel p{margin:0 0 14px;color:#d2dce2;font-size:12px;line-height:1.75}.overlay-panel small{display:block;margin-top:9px;color:#a8c5cb;font-size:10px}.primary,.secondary{border-radius:13px;padding:12px 13px;font-weight:1000;font-size:14px;border:1px solid transparent;min-height:43px}.primary{color:#12252b;background:linear-gradient(130deg,#fff0aa,#6eebbc);box-shadow:0 5px 15px #78f2c329}.secondary{color:#ebfaf5;background:#2b4858;border-color:#54737b}.end-overlay{background:linear-gradient(180deg,transparent 5%,#061c27a3 45%,#071922ed 100%);align-items:flex-end;padding:9px}.end-overlay .overlay-panel{max-width:450px;padding:10px 15px 13px;background:#132c3bf2;border-radius:18px}.end-overlay h2{font-size:19px;margin:3px 0}.end-tag{font-size:11px;font-weight:1000;color:#ffdc96}.rank{color:#fce7a3!important;font-weight:900;margin:0 0 5px!important}.price{background:#0c2333;border:1px solid #b6aa66;border-radius:12px;padding:6px}.price strong{display:block;font-size:clamp(27px,5vw,39px);font-weight:1000;color:#ffe49c;line-height:1.22;font-variant-numeric:tabular-nums}.result-sub{margin:5px 0!important;font-size:10px!important}.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:7px}.result-actions .primary,.result-actions .secondary{font-size:11px;padding:9px 5px;min-height:39px}.tap-area{margin-top:10px}.tap-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;gap:8px}.tap-heading b{font-size:14px}.tap-heading small{font-size:10px;color:#aac3ca}.tapbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.chant-btn{touch-action:none;min-height:97px;padding:12px 4px 10px;border-radius:16px;border:1px solid var(--edge,#829da3);background:linear-gradient(165deg,var(--bg,#2f5863),#14283ac7 80%);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;position:relative;overflow:hidden;box-shadow:inset 0 2px 0 #ffffff1a,0 5px 0 #0e202e;transform:translateY(0);-webkit-tap-highlight-color:transparent}.chant-btn:active,.chant-btn.pressed{transform:translateY(3px) scale(.975);box-shadow:inset 0 2px 0 #ffffff2a,0 2px 0 #0e202e}.chant-btn .flower-dot{width:22px;height:22px;border-radius:50%;background:var(--edge,#a9b);border:3px solid #ffffff44;box-shadow:0 0 20px var(--edge,#a9b)}.chant-btn strong{font-size:clamp(11px,2vw,14px);letter-spacing:.015em;white-space:nowrap}.chant-btn small{font-size:12px;color:#e3faf4;font-weight:900;font-variant-numeric:tabular-nums}.footline{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:13px;color:#bfd5d6;font-size:12px;min-height:20px}.footline>span:last-child{font-size:10px;letter-spacing:.1em;color:#9ae3cb;font-weight:1000}.sidebar{display:grid;gap:13px}.sidebox{border:1px solid #345264;border-radius:18px;background:#142b3cda;padding:16px 17px}.sidebox h3{font-size:16px;margin:0 0 13px}.sidebox ol{margin:0;padding-left:20px;color:#c8d8da;line-height:1.8;font-size:12px}.sidebox li+li{margin-top:8px}.subnote{color:#92adb8;font-size:11px;line-height:1.65;margin:10px 0 0}.best-line,.meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:9px 0;font-size:12px}.best-line span,.meta span{color:#a7c1c8}.best-line strong{color:#fbe3a0;font-variant-numeric:tabular-nums}.meta b{font-size:11px}.recent{margin-top:13px;border-top:1px solid #395566;padding-top:8px}.recent-item{font-size:11px;display:flex;justify-content:space-between;gap:7px;color:#d8e9df;padding:4px 0}.recent-item span:last-child{color:#fce19f;font-variant-numeric:tabular-nums}footer{text-align:center;color:#7999a3;font-size:11px;margin:24px 0 0}body.playing .sidebar,body.finished .sidebar{display:none}body.playing .game-layout,body.finished .game-layout{grid-template-columns:minmax(0,1fr);max-width:730px;margin:auto}body.playing .mast,body.finished .mast{display:none}body.playing .wrap,body.finished .wrap{padding-top:9px}body.playing .machine,body.finished .machine{padding:12px}body.playing .stage,body.finished .stage{height:clamp(220px,45vh,430px)}body.playing footer,body.finished footer{display:none}
@media(max-width:790px){.wrap{padding:16px 11px 24px}.game-layout{grid-template-columns:1fr}.sidebar{grid-template-columns:repeat(2,minmax(0,1fr))}.sidebar .sidebox:first-child{grid-column:1/-1}.mast h1{font-size:35px}.stage{height:335px}.machine{padding:12px}.sidebox{padding:13px}body.playing .stage,body.finished .stage{height:clamp(200px,42dvh,400px)}}
@media(max-width:480px){.top{grid-template-columns:1fr 1.2fr 1fr;padding:0 8px;height:52px}.back-full{display:none}.back-short{display:inline}.game-control-back,.game-control-sound{font-size:11px;padding:9px 7px}.game-control-title{font-size:12px}.mast h1{font-size:32px}.lead{font-size:12px}.game-layout{gap:12px}.sidebar{grid-template-columns:1fr}.sidebar .sidebox:first-child{grid-column:auto}.stage{height:310px}.hud>div{padding:7px 6px}.hud strong{font-size:24px}.chant-btn{min-height:90px}.chant-btn strong{font-size:11px}.tapbar{gap:6px}.footline{font-size:11px}body.playing .stage,body.finished .stage{height:clamp(195px,43dvh,370px)}body.playing .machine,body.finished .machine{padding:9px}body.playing .wrap,body.finished .wrap{padding:7px 7px 14px}}
@media(max-height:670px){body.playing .hud,body.finished .hud{padding:7px 0 6px}body.playing .hud>div,body.finished .hud>div{padding:5px}body.playing .stage,body.finished .stage{height:clamp(160px,35dvh,290px)}body.playing .chant-btn{min-height:72px}body.playing .footline{margin-top:6px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* End screen leaves the completed flower visible above the appraisal. */
body.finished .tap-area{display:none}body.finished .stage{height:clamp(215px,34dvh,290px)}body.finished .end-overlay{position:relative;inset:auto;display:block;background:none;padding:0;margin:9px 0 0}body.finished .end-overlay .overlay-panel{background:#132c3bf2;max-width:none;width:100%;padding:10px 14px}body.finished .end-overlay h2{font-size:clamp(18px,3vw,24px)}body.finished .footline{margin-top:8px}body.finished .end-overlay .result-actions{max-width:390px;margin:8px auto 0}
@media(max-width:480px){body.finished .stage{height:clamp(190px,31dvh,255px)}body.finished .end-overlay .overlay-panel{padding:9px}body.finished .end-overlay .price strong{font-size:28px}}

/* v0.2 result layout: show the completed flower ABOVE the full appraisal card.
   Keep the stage's border wrapping both, rather than clipping the card. */
body.finished .stage{height:auto}
body.finished #flowerCanvas{height:clamp(215px,34dvh,290px)}
@media(max-width:480px){body.finished #flowerCanvas{height:clamp(190px,31dvh,255px)}}

/* v0.3.1: one-time, non-interactive full-screen "BAAAN!" bloom reveal.
   The finished flower and the approved result card underneath are unchanged. */
.bloom-burst[hidden]{display:none!important}
.bloom-burst{position:fixed;inset:0;z-index:90;pointer-events:none;display:grid;place-items:center;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 50% 46%,#49224cdd 0%,#3c1e51ed 30%,#172338e9 78%,#101727e9 100%);animation:bloom-burst-screen 1.32s ease-out both}
.bloom-burst:before{content:"";position:absolute;inset:0;background:#fff9e9;animation:bloom-single-flash .22s ease-out both}
.bloom-burst-inner{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0;text-align:center;z-index:3;transform:rotate(-2deg);animation:bloom-title-entrance 1.12s cubic-bezier(.14,.8,.25,1) both;filter:drop-shadow(0 5px 4px #170e24)}
.bloom-burst-word{font-size:clamp(43px,10.5vw,108px);font-weight:1000;line-height:1.14;letter-spacing:-.065em;white-space:nowrap;color:#fff3b3;-webkit-text-stroke:1px #8d3f6f;text-shadow:0 0 9px #fff6c0,0 0 24px #ffb45c,0 5px 0 #7e305f}
.bloom-burst-sub{margin-top:6px;padding:6px 22px;font-size:clamp(17px,4.8vw,35px);font-weight:1000;letter-spacing:.18em;color:#ffffff;text-shadow:0 2px 0 #563a84,0 0 18px #e680f8}
.bloom-burst-ring{position:absolute;left:50%;top:50%;width:27vmin;height:27vmin;border:clamp(5px,1.7vmin,14px) solid #fff6a3;border-radius:50%;box-shadow:0 0 24px #fffaba,0 0 45px #ffd1a0,inset 0 0 18px #fff6a4;transform:translate(-50%,-50%) scale(.18);animation:bloom-ring-out 1.14s cubic-bezier(.15,.7,.25,1) both}
.bloom-burst-ring.second{border-color:#ff91be;animation-delay:.10s}
.bloom-burst-ring.third{border-color:#a8f5ff;animation-delay:.22s}
.bloom-spark{position:absolute;top:50%;left:50%;width:clamp(8px,2vmin,18px);height:clamp(18px,5.2vmin,42px);border-radius:100% 100% 40% 40%;background:var(--spark-color,#ffe482);box-shadow:0 0 20px var(--spark-color,#ffe482),0 0 44px var(--spark-color,#ffe482);opacity:0;transform:rotate(var(--rot)) translateY(0);animation:bloom-sparks 1.1s ease-out both;animation-delay:var(--delay,0ms)}
@keyframes bloom-burst-screen{0%{opacity:0}8%,64%{opacity:1}100%{opacity:0}}
@keyframes bloom-single-flash{0%{opacity:.88}100%{opacity:0}}
@keyframes bloom-title-entrance{0%{opacity:0;transform:rotate(-5deg) scale(.18)}19%{opacity:1;transform:rotate(-2deg) scale(1.22)}34%{transform:rotate(-2deg) scale(1)}72%{opacity:1}100%{opacity:0;transform:rotate(-2deg) scale(1.02)}}
@keyframes bloom-ring-out{0%{opacity:0;transform:translate(-50%,-50%) scale(.06)}15%{opacity:1}75%{opacity:.7}100%{opacity:0;transform:translate(-50%,-50%) scale(6.7)}}
@keyframes bloom-sparks{0%{opacity:0;transform:rotate(var(--rot)) translateY(0) scale(.4)}15%{opacity:1}60%{opacity:.95}100%{opacity:0;transform:rotate(var(--rot)) translateY(calc(-1 * var(--travel))) scale(.65)}}
@media(prefers-reduced-motion:reduce){.bloom-burst{background:#4b344ac0;animation:none!important}.bloom-burst:before,.bloom-burst-ring,.bloom-spark{display:none!important}.bloom-burst-inner{animation:none!important;transform:none!important;filter:none!important}.bloom-burst-word{font-size:clamp(38px,10vw,80px)}}

/* Optional flower catalog: collapsed by default, outside approved play/result screens. */
.catalog-box summary{cursor:pointer;font-weight:850;font-size:16px;list-style-position:inside}
.catalog-box summary span{font-size:11px;font-weight:650;color:#a6c4c8;float:right;padding-top:4px}
.catalog-entries{max-height:320px;overflow:auto;margin-top:12px}
.catalog-item{border-top:1px solid #395566;padding:9px 0;display:flex;flex-direction:column;gap:3px;overflow-wrap:anywhere}
.catalog-item strong{font-size:12px;color:#e1f6ed}.catalog-item span{font-size:11px;color:#fce19f}

/* Catalog-only optional sorting; does not change game or result views. */
.catalog-sort-label{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:#c7e7e2;margin-top:10px}
.catalog-sort-label select{min-width:0;max-width:75%;padding:7px;border-radius:8px;border:1px solid #537c85;background:#183344;color:#f1fff9;font:inherit}
.catalog-sort-label select:focus-visible{outline:2px solid #ffe19e;outline-offset:2px}

/* Draft is isolated to ready overlay; approved in-game/result UI remains unchanged. */
.draft-panel{margin-top:9px}.draft-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:9px 0}.draft-option{border:1px solid var(--edge,#577);background:#203b50;border-radius:11px;padding:11px 3px;color:#f6fff7;font-weight:900;font-size:clamp(12px,2.4vw,15px)}.draft-title{font-weight:900!important;margin:0!important}.draft-count{margin:5px 0 8px!important;color:#ffe4a7!important;font-weight:800}.draft-actions{display:grid;grid-template-columns:1fr 1.35fr;gap:7px}.draft-actions button{padding:9px 4px;font-size:12px}.draft-actions button:disabled{opacity:.45}.stage-overlay:has(.draft-panel:not([hidden])) .overlay-panel{padding:12px}.stage-overlay:has(.draft-panel:not([hidden])) .huge{font-size:25px}.stage-overlay:has(.draft-panel:not([hidden])) h2{font-size:19px}.stage-overlay:has(.draft-panel:not([hidden])) .overlay-panel>p{margin-bottom:5px}

body:not(.playing):not(.finished) .stage:has(.draft-panel:not([hidden])){height:max(410px, min(63dvh, 480px))}
@media(max-width:480px){body:not(.playing):not(.finished) .stage:has(.draft-panel:not([hidden])){height:410px}.stage-overlay:has(.draft-panel:not([hidden])){padding:7px}.stage-overlay:has(.draft-panel:not([hidden])) .overlay-panel{padding:10px 8px}}

/* Rare phrase: larger and luminous, without changing the standard pop. */
.word-pop-rare{font-size:clamp(22px,4.5vw,28px);font-weight:1000;text-shadow:0 3px 10px #000,0 0 18px #fff4b3,0 0 24px currentColor;}


/* GAME-004 PR: shared information-card treatment aligned with GAME-001/002.
   Scope: informational sidebar only; no changes to machine/gameplay styles. */
.game-layout > .sidebar {
  min-width:0;
  align-self:start;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0;
}
.game-layout > .sidebar > .sidebox {
  box-sizing:border-box;
  color:#20273a;
  background:#fffdf8;
  border:2px solid #20273a;
  border-radius:19px;
  box-shadow:4px 5px 0 #20273a;
  padding:20px;
  margin:0 0 17px;
  min-width:0;
}
.game-layout > .sidebar > .sidebox h3 {color:#20273a;font-size:17px;font-weight:900;letter-spacing:0}
.game-layout > .sidebar > .sidebox ol,
.game-layout > .sidebar > .sidebox li,
.game-layout > .sidebar > .sidebox p,
.game-layout > .sidebar > .sidebox .subnote {color:#38445a}
.game-layout > .sidebar > .sidebox .best-line,
.game-layout > .sidebar > .sidebox .meta {color:#20273a;border-color:#d5d9dc}
.game-layout > .sidebar > .sidebox .best-line span,
.game-layout > .sidebar > .sidebox .meta span {color:#536075}
.game-layout > .sidebar > .sidebox .best-line strong,
.game-layout > .sidebar > .sidebox .best-line b,
.game-layout > .sidebar > .sidebox .meta b {color:#20273a}
@media(max-width:790px){
  .game-layout > .sidebar {width:100%;max-width:730px;margin:0 auto;grid-template-columns:minmax(0,1fr)}
  .game-layout > .sidebar > .sidebox {grid-column:auto;padding:18px}
}
/* Preserve the distraction-free flower gameplay and result views. */
body.playing .game-layout > .sidebar,
body.finished .game-layout > .sidebar {display:none!important}

/* GAME-004 shared external information layout.
   GAME-001/002-style presentation: gameplay first, information cards below.
   No gameplay, controls, input, timer, or animation rules are changed. */
body:not(.playing):not(.finished):not(.game-in-progress) .game-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) !important;
  max-width:840px;
  margin-inline:auto;
}
body:not(.playing):not(.finished):not(.game-in-progress) .game-layout > .sidebar {
  grid-column:1 / -1;
  width:100%;
  max-width:none;
  display:grid;
  grid-template-columns:minmax(0,1fr) !important;
  gap:13px;
}
body:not(.playing):not(.finished):not(.game-in-progress) .game-layout > .sidebar > .sidebox {
  width:100%;
  min-width:0;
}
