@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700;750;800&family=Noto+Sans+JP:wght@400;500;600;700;800&family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');

:root{color-scheme:light;--page:#f8f9f5;--paper:#fff;--ink:#263d33;--green:#285e49;--green-dark:#1d4937;--muted:#879087;--line:#e5e9e1;--soft:#f2f5ed;--orange:#e5a66e;--font:'DM Sans','Noto Sans KR','Noto Sans JP',system-ui,sans-serif;font-family:var(--font);font-synthesis:none;color:var(--ink);background:var(--page);font-size:14px;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}body{margin:0}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer}button,a,input{touch-action:manipulation}button{color:inherit}button:disabled{cursor:default;opacity:.4}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #d4a376;outline-offset:4px}button:focus:not(:focus-visible){outline:none}button{border:0;background:none}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.icon{flex-shrink:0;vertical-align:middle}input{min-width:0;color:var(--ink)}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.site-header{height:96px;max-width:1160px;margin:auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;gap:9px;align-items:center;font-family:'DM Sans',sans-serif;font-size:31px;letter-spacing:-1.8px;font-weight:800}.brand-symbol{color:var(--green);display:flex}.brand-dot{color:var(--orange)}.header-right{display:flex;align-items:center;gap:28px}.header-note{color:#8b938b;font-size:11px;letter-spacing:.1px}.languages{display:flex;align-items:center;gap:3px;padding:4px;background:#eff1ea;border:1px solid #e6e9df;border-radius:9px}.languages a{padding:7px 13px;color:#899184;border-radius:6px;font-size:11px;font-weight:500;transition:background .2s,color .2s}.languages a:hover{color:var(--green)}.languages a[aria-current]{background:white;color:var(--green);box-shadow:0 1px 4px #213b2310}
main{max-width:1100px;margin:0 auto}.intro{display:flex;justify-content:space-between;align-items:center;padding:53px 2px 38px}.eyebrow{font-size:10px;font-weight:600;color:#7a897b;letter-spacing:1px;display:flex;gap:9px;align-items:center}.tiny-star{color:var(--green);font-size:19px;line-height:1}.eyebrow-line{width:17px;height:1px;background:#c3cdbf;display:inline-block}h1{font-size:41px;line-height:1.4;letter-spacing:-2px;font-weight:700;margin:16px 0 13px}h1>span{color:var(--green)}.intro p{color:#81897f;font-size:12px;letter-spacing:-.2px;margin:0}.hero-drawing{width:204px;margin-right:26px;transform:rotate(-7deg);position:relative}.hero-drawing svg{width:100%;display:block}.hero-drawing>span{font-family:Georgia,serif;font-size:14px;font-style:italic;letter-spacing:.6px;color:#8c9b88;position:absolute;bottom:-6px;left:63px;white-space:nowrap}
.game-shell{background:var(--paper);border:1px solid #e0e5da;border-radius:18px;display:grid;grid-template-columns:279px minmax(0,1fr);box-shadow:0 8px 30px #35482b04;overflow:hidden}.settings{background:#f1f4eb;padding:26px 25px 20px;display:flex;flex-direction:column;border-right:1px solid var(--line)}.settings-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}h2{font-size:15px;font-weight:650;margin:0;letter-spacing:-.4px}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;color:#8b9585;transition:background .2s,color .2s}.icon-button:hover{background:#e5ebde;color:var(--green)}.icon-button .icon{width:17px;height:17px}.field-label{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:600;margin-bottom:13px}.step-no{font-family:'DM Sans',sans-serif;font-size:10px;font-weight:500;color:#92a08a}.stepper{display:flex;align-items:center;justify-content:space-between;height:54px;background:#fff;border:1px solid #dce3d5;border-radius:10px;padding:6px}.stepper-button{background:#f1f4ec;width:37px;height:39px;display:flex;align-items:center;justify-content:center;border-radius:6px}.stepper-button:hover{background:#e3eadd}.stepper-button .icon{width:16px}.count-wrap{display:flex;align-items:center;gap:2px}.count-wrap span{font-size:11px;color:#97a18f}#player-count{border:0;background:none;width:35px;text-align:center;font-size:21px;line-height:1;font-weight:650;appearance:textfield;-moz-appearance:textfield}#player-count::-webkit-inner-spin-button,#player-count::-webkit-outer-spin-button{-webkit-appearance:none}.field-hint{font-size:10px;color:#98a08f;margin:9px 0 0;letter-spacing:-.15px}.settings-divider{height:1px;background:#dee5d6;margin:24px 0}.presets{display:grid;gap:7px}.preset{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid transparent;border-radius:8px;color:#7d8876;font-size:11px;min-height:42px;text-align:left;transition:all .15s}.preset>.icon{width:17px;height:17px;stroke-width:1.6}.preset:hover{background:#e8eedf}.preset.selected{background:#fff;border-color:#b8c9ac;color:var(--green);box-shadow:0 2px 4px #36552803}.preset-check{margin-left:auto;display:none}.preset.selected .preset-check{display:inline-flex}.preset-check .icon{width:14px;height:14px}.preset-hint{font-size:10px;line-height:1.6;color:#8f9b85;margin:12px 0 20px;min-height:16px;letter-spacing:-.25px}.settings-bottom{margin-top:auto}.primary-button{display:flex;width:100%;gap:10px;align-items:center;justify-content:space-between;background:var(--green);color:#fff;padding:15px 16px;min-height:51px;border-radius:9px;font-size:12px;font-weight:600;box-shadow:0 3px 6px #295c4912;transition:background .2s,transform .2s}.primary-button:hover{background:var(--green-dark);transform:translateY(-1px)}.primary-button .icon{width:17px;height:17px}.fair-note{display:flex;gap:5px;align-items:center;justify-content:center;font-size:9px;color:#9aa38f;margin:12px auto 0;padding:2px}.fair-note .icon{width:12px;height:12px}.fair-note:hover{color:var(--green)}
.board-panel{padding:30px 32px 24px;min-width:0;display:flex;flex-direction:column}.board-heading{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:23px}.board-heading h2{font-size:15px}.board-heading p{font-size:11px;color:#99a092;margin:7px 0 0}.board-heading .icon-button{margin-top:-4px}.board-meta{display:flex;align-items:center;justify-content:space-between;min-height:22px;margin-bottom:10px}.board-label{font-size:9px;font-weight:600;color:#929d8a;letter-spacing:.6px}.phase{font-size:9px;display:flex;align-items:center;gap:5px;color:#8d9983;background:#f4f6ef;padding:5px 8px;border-radius:20px;line-height:1.2}.phase>span{width:4px;height:4px;border-radius:50%;background:#a1ae95}.phase.active{background:#eef4ea;color:var(--green)}.phase.active>span{background:var(--green)}.phase.drawing>span{animation:pulse 1s infinite}.board-scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#cdd7c5 transparent;margin:0 -5px;padding:5px 5px 10px;overscroll-behavior-x:contain}.ladder-board{position:relative;--count:4;min-width:calc(var(--count) * 96px);width:100%}.name-fields,.outcome-fields{display:grid;grid-template-columns:repeat(var(--count),minmax(0,1fr));gap:14px}.name-field{position:relative;text-align:center;min-width:0}.field-input{border:1px solid #e2e7db;background:#fcfdf9;width:100%;height:38px;text-align:center;border-radius:7px;font-size:11px;outline-offset:2px!important;transition:border-color .2s,box-shadow .2s;padding:0 8px}.field-input::placeholder{color:#a5ad9c}.field-input:hover{border-color:#b9c7ad}.field-input:focus{border-color:var(--green);background:#fff}.name-marker{width:23px;height:23px;background:var(--color);border:4px solid white;border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:8px;position:absolute;bottom:-23px;left:50%;transform:translateX(-50%);z-index:2;box-shadow:0 0 0 1px color-mix(in srgb,var(--color),white 65%)}.ladder-canvas{position:relative;margin:10px 0;height:240px;background-image:radial-gradient(#dce4d4 1px,transparent 1px);background-size:16px 16px;background-position:center;border-radius:3px}.ladder-canvas svg{width:100%;height:100%;display:block;overflow:visible}.ladder-line{stroke:#dce5d4;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;fill:none}.ladder-end{fill:#fff;stroke:#dce5d4;stroke-width:2}.ladder-path{fill:none;stroke:var(--color);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.path-dot{fill:var(--color);stroke:white;stroke-width:3;filter:drop-shadow(0 1px 3px #3332)}.outcome-input{background:#f4f6ef;border-color:#e7ebdf;font-size:11px}.outcome-input.special{color:#996332;background:#fcf3e7;border-color:#ecd9bb}.outcome-field{min-width:0;position:relative}.board-bottom{display:flex;align-items:center;justify-content:space-between;min-height:32px;margin-top:2px;gap:8px}.text-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:10px;color:#86947d;padding:7px 3px;white-space:nowrap}.text-button:hover{color:var(--green)}.text-button .icon{width:13px;height:13px}.scroll-hint{font-size:9px;color:#8f9c84}.game-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid #edf0e7;margin-top:8px;padding-top:9px;font-size:10px;color:#9aa38f}.game-actions>div{display:flex;gap:15px}.name-button{border:1px solid color-mix(in srgb,var(--color),white 55%);color:var(--color);background:color-mix(in srgb,var(--color),white 95%);font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:4px;overflow:hidden}.name-button>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.name-button .icon{width:12px;height:12px;flex-shrink:0}.name-button:hover:not(:disabled){background:color-mix(in srgb,var(--color),white 88%);border-color:var(--color);transform:translateY(-1px)}.name-button.revealed{border-color:var(--color);background:var(--color);color:#fff}.name-button:disabled{opacity:1}.outcome-hidden{display:flex;align-items:center;justify-content:center;color:#a5b197;background:repeating-linear-gradient(-45deg,#f2f5ed,#f2f5ed 5px,#f6f8f2 5px,#f6f8f2 10px);font-size:15px;letter-spacing:2px;user-select:none}.outcome-revealed{display:flex;align-items:center;justify-content:center;overflow:hidden;text-overflow:ellipsis;padding:0 5px;color:var(--color);border-color:color-mix(in srgb,var(--color),white 60%);background:color-mix(in srgb,var(--color),white 94%);animation:pop .25s ease-out}.outcome-revealed>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.board-panel.is-playing{--playing:1}.is-playing .ladder-line{stroke:#d4dfca}.is-playing .ladder-canvas{background-image:radial-gradient(#e0e7d9 .8px,transparent .8px)}
.results{margin-top:20px;padding:25px 30px;background:white;border:1px solid var(--line);border-radius:14px;animation:slide-in .3s ease-out}.results-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:17px}.results-heading h2{margin-top:6px;font-size:18px}.results-heading .eyebrow{font-size:9px}.secondary-button{display:inline-flex;gap:6px;align-items:center;font-size:11px;border:1px solid var(--line);padding:9px 12px;border-radius:7px;background:#fff}.secondary-button:hover{background:var(--soft)}.secondary-button .icon{width:14px;height:14px}.result-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.result-item{display:flex;align-items:center;gap:8px;font-size:12px;padding:13px 14px;background:#f8f9f5;border-radius:8px;min-width:0}.result-item .result-dot{width:7px;height:7px;border-radius:50%;background:var(--color);flex-shrink:0}.result-item .result-name{overflow-wrap:anywhere;flex:1}.result-item .icon{width:13px;height:13px;color:#a3ac98}.result-item strong{font-weight:600;color:var(--color);max-width:50%;overflow-wrap:anywhere}.how-strip{display:flex;justify-content:center;align-items:center;gap:38px;margin:29px auto 41px;font-size:10px;color:#9aa390}.how-strip>div{display:flex;align-items:center;gap:9px}.instruction-no{font-family:'DM Sans',sans-serif;font-size:9px;color:#809373;background:#edf1e6;border:1px solid #e3e9da;border-radius:50%;width:23px;height:23px;display:flex;align-items:center;justify-content:center}.instruction-arrow{width:12px;height:12px;color:#c0c9b5;margin-left:25px}.site-footer{max-width:1160px;margin:0 auto;border-top:1px solid var(--line);padding:22px 0 28px;display:flex;justify-content:space-between;align-items:center;color:#9da593;font-size:10px}.site-footer>span{display:flex;align-items:center;gap:15px}.site-footer strong{font-family:'DM Sans',sans-serif;font-size:18px;letter-spacing:-1px;color:#7c8c74;font-weight:700}.site-footer>div{display:flex;gap:20px;align-items:center}.site-footer button{padding:0;font-size:10px;color:#929f87}.site-footer button:hover{color:var(--green)}.copyright{font-size:9px;color:#a7af9d}.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);padding:13px 21px;border-radius:11px;background:#263f32;color:#fff;font-size:12px;box-shadow:0 8px 30px #1c302b20;z-index:20;max-width:calc(100% - 32px);text-align:center;animation:toast-in .2s ease-out}dialog{border:1px solid #e2e7da;border-radius:17px;padding:34px;width:min(450px,calc(100% - 36px));color:var(--ink);background:#fff;box-shadow:0 20px 80px #1e35272b}dialog::backdrop{background:#1c302b50;backdrop-filter:blur(4px)}.dialog-close{position:absolute;right:13px;top:13px}dialog h2{font-size:21px;margin:10px 0 17px;padding-right:12px}dialog p,dialog li{font-size:13px;line-height:1.9;color:#75836c}dialog ol{padding-left:21px}dialog li+li{margin-top:13px}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:24px}.dialog-actions .primary-button{width:auto;min-height:40px;padding:10px 18px}.dialog-textarea{width:100%;min-height:120px;resize:vertical;border:1px solid var(--line);border-radius:8px;padding:10px;font:inherit;font-size:12px}.noscript{position:fixed;bottom:0;background:#fff2df;padding:16px;margin:0;width:100%;text-align:center}
@keyframes pulse{50%{opacity:.3}}@keyframes pop{from{transform:scale(.92);opacity:.3}to{transform:scale(1);opacity:1}}@keyframes slide-in{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes toast-in{from{transform:translate(-50%,8px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
@media(min-width:1500px){.site-header{height:108px}.intro{padding-top:66px;padding-bottom:46px}.ladder-canvas{height:275px}.settings-heading{margin-bottom:33px}.settings-divider{margin:28px 0}.how-strip{margin-bottom:55px}}
@media(max-width:1230px){.site-header,.site-footer{margin-left:36px;margin-right:36px}main{margin-left:54px;margin-right:54px}.intro{padding-top:42px}h1{font-size:36px}.game-shell{grid-template-columns:250px minmax(0,1fr)}.settings{padding:23px 20px 18px}.board-panel{padding:26px 24px 20px}.hero-drawing{width:180px;margin-right:18px}}
@media(max-width:900px){main{margin:0 28px}.site-header,.site-footer{margin-left:28px;margin-right:28px}.game-shell{grid-template-columns:225px minmax(0,1fr)}.settings{padding:22px 17px 18px}.board-panel{padding:25px 21px 18px}.ladder-board{min-width:calc(var(--count) * 80px)}.name-fields,.outcome-fields{gap:9px}.header-note{display:none}.how-strip{gap:20px}.instruction-arrow{margin-left:5px}.hero-drawing{width:160px;margin-right:4px}h1{font-size:33px}.board-heading p{font-size:10px;line-height:1.6}.phase{font-size:8px}}
@media(max-width:680px){.site-header{height:74px;margin:0 20px}.brand{font-size:27px}.brand-symbol svg{width:24px;height:24px}.languages{padding:3px;gap:0}.languages a{font-size:10px;padding:7px 9px}.header-right{gap:0}main{margin:0 16px}.intro{padding:29px 8px 27px}.eyebrow{font-size:8px;gap:6px;letter-spacing:.5px}.tiny-star{font-size:16px}.eyebrow-line{width:12px}h1{font-size:29px;letter-spacing:-1.6px;line-height:1.4;margin:12px 0 11px}.intro p{font-size:10px;line-height:1.7;letter-spacing:-.25px}.hero-drawing{width:95px;flex-shrink:0;margin:14px 0 0 2px;opacity:.85}.hero-drawing>span{font-size:8px;bottom:-10px;left:16px}.game-shell{display:flex;flex-direction:column;border-radius:14px}.settings{display:grid;grid-template-columns:minmax(0,1fr) 132px;gap:0 16px;padding:17px 18px 16px;border-right:0;border-bottom:1px solid var(--line)}.settings-heading{grid-column:1/-1;margin-bottom:13px}.settings-heading h2{font-size:13px}.settings-heading .icon-button{height:25px;width:25px}.settings>.field-label:first-of-type{grid-column:1;grid-row:2;margin:0;align-self:center;font-size:12px}.stepper{grid-column:2;grid-row:2;height:42px;padding:4px}.stepper-button{height:32px;width:31px}.count-wrap #player-count{font-size:19px;width:30px}.field-hint{grid-column:1;grid-row:3;font-size:9px;margin-top:2px}.settings-divider{grid-column:1/-1;margin:14px 0}.settings>.field-label:nth-of-type(5){grid-column:1/-1}.settings>.field-label{grid-column:1/-1;font-size:11px;margin-bottom:10px}.presets{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.preset{flex-direction:column;justify-content:center;gap:6px;font-size:9px;padding:9px 2px;min-height:58px;border-color:#e1e7d8;border-radius:7px}.preset>.icon{width:16px;height:16px}.preset-check{display:none!important}.preset.selected{border-color:#a3bc94}.preset-hint{display:none}.settings-bottom{grid-column:1/-1;margin-top:14px}.primary-button{min-height:44px;padding:12px 15px;font-size:12px;justify-content:center;position:relative}.primary-button>.icon{position:absolute;right:15px}.fair-note{margin-top:8px;font-size:8px}.fair-note .icon{width:11px;height:11px}.board-panel{padding:21px 16px 18px}.board-heading{margin-bottom:14px}.board-heading h2{font-size:13px}.board-heading p{font-size:9px;margin-top:5px}.board-heading .icon-button{width:26px;height:26px}.board-meta{margin-bottom:7px}.board-label{font-size:8px}.phase{font-size:8px}.ladder-board{min-width:calc(var(--count) * 68px)}.name-fields,.outcome-fields{gap:7px}.field-input{font-size:10px;height:34px;padding:0 4px;border-radius:6px}.ladder-canvas{height:205px;margin:10px 0}.name-marker{width:21px;height:21px;bottom:-22px;font-size:7px}.text-button{font-size:9px}.board-bottom{margin-top:0}.how-strip{gap:0;justify-content:space-between;margin:21px 4px 27px;font-size:8px}.how-strip>div{gap:5px}.instruction-no{width:18px;height:18px;font-size:7px}.instruction-arrow{display:none}.site-footer{margin:0 20px;padding:18px 0 25px;gap:16px;font-size:9px;align-items:flex-start}.site-footer>span{gap:8px}.site-footer strong{font-size:17px}.footer-tag{display:none}.site-footer>div{gap:13px;flex-wrap:wrap;justify-content:flex-end}.site-footer button{font-size:9px}.copyright{font-size:8px}.results{padding:20px 17px;margin-top:15px}.results-heading h2{font-size:17px}.result-list{grid-template-columns:1fr}.result-item{font-size:11px}.game-actions>div{gap:9px}.game-actions{font-size:9px}.secondary-button{font-size:10px;padding:8px 10px}html[lang=en] .how-strip{font-size:7px}html[lang=en] .intro h1{font-size:29px;letter-spacing:-1.2px}html[lang=ja] .intro h1{font-size:26px}html[lang=ja] .intro p{font-size:9px}html[lang=ja] .how-strip{font-size:7px}}
@media(max-width:370px){.hero-drawing{display:none}.languages a{padding:7px}.intro{padding-left:3px}.settings{padding-left:14px;padding-right:14px}.board-panel{padding-left:12px;padding-right:12px}.how-strip{font-size:7px}.instruction-no{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Keep the game, rather than the introduction, at the center of the first screen. */
@media(min-width:681px){
  .site-header{height:82px}
  .intro{padding-top:28px;padding-bottom:28px}
  h1{font-size:38px;line-height:1.25;margin:10px 0 12px;letter-spacing:-1.8px}
  .hero-drawing{width:154px;margin-right:32px}
  .hero-drawing>span{font-size:12px;left:38px;bottom:-9px}
  .settings-heading{margin-bottom:19px}
  .settings-divider{margin:18px 0}
  .presets{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .preset{position:relative;flex-direction:column;justify-content:center;gap:7px;padding:12px 3px;min-height:66px;border-color:#e0e7d7;font-size:10px}
  .preset-check{position:absolute;top:5px;right:5px}
  .preset-check .icon{width:10px;height:10px}
  .preset-hint{font-size:9px;margin:10px 0 18px}
  .ladder-canvas{height:228px}
  .board-panel{padding-top:26px}
  .how-strip{margin:24px auto 30px}
}
@media(max-width:680px){
  .intro{padding-top:23px;padding-bottom:23px}
  h1,html[lang=en] .intro h1,html[lang=ja] .intro h1{font-size:30px;line-height:1.25;margin:10px 0 10px}
  .hero-drawing{width:85px;margin-top:0}
  .settings-heading{margin-bottom:10px}
}
@media(max-width:680px){
  .settings>.field-label:nth-child(2){grid-column:1;grid-row:2;margin:0;align-self:center}
  .field-hint{grid-column:1/-1;grid-row:3;margin-top:7px}
  .languages a{white-space:nowrap}
}
/* Keep essential controls readable without adding visual clutter. */
.field-input{font-size:12px}
.field-input::placeholder{color:#89957f}
.field-hint,.preset-hint{color:#78866c}
.board-heading p{color:#7e8b74}
.text-button{color:#718367}
@media(max-width:680px){
  .field-input{font-size:16px}
  .field-input::placeholder{font-size:11px}
  .name-button,.outcome-hidden,.outcome-revealed{font-size:12px}
  .preset{font-size:10px}
  .board-heading p{font-size:10px}
  .languages a{font-size:11px}
  .intro p{font-size:11px}
  html[lang=en] .hero-drawing{display:none}
}

/* Shared play and the reveal moment. */
.board-panel { position:relative; }
.board-tools { display:flex; align-items:center; gap:9px; }
.board-tools .icon-button { margin-top:0; }
.share-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:10px 15px; border-radius:8px; border:1px solid #aec4a5; background:#eaf2e4; color:#285e49; font-size:12px; font-weight:650; white-space:nowrap; transition:background .2s,transform .2s; }
.share-button:hover:not(:disabled) { background:#ddebd4; transform:translateY(-1px); }
.share-button .icon { width:16px; height:16px; }
.share-hint { align-self:flex-end; margin:-14px 41px 13px 0; font-size:9px; color:#7e8b74; }
.game-actions .share-button { padding:8px 12px; font-size:11px; }
.game-actions .share-button .icon { width:14px; height:14px; }
.is-suspense #board-hint { color:#ac7542; font-weight:600; }
.is-suspense .path-dot { filter:drop-shadow(0 0 7px #d7a665); }
.is-suspense .phase { background:#fff3df; color:#a16b32; }
.confetti { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:6; border-radius:0 16px 16px 0; }
.confetti i { position:absolute; left:var(--left); top:29%; width:7px; height:11px; border-radius:2px; background:var(--piece-color); opacity:0; animation:confetti-fall var(--duration) var(--delay) ease-out both; }
.confetti i:nth-child(3n) { border-radius:50%; width:7px; height:7px; }
.celebration { position:absolute; z-index:7; left:50%; top:52%; transform:translate(-50%,-50%); width:min(320px,calc(100% - 40px)); padding:23px 25px 21px; border-radius:17px; text-align:center; background:#fffdf6f5; backdrop-filter:blur(10px); border:1px solid #decfa9; box-shadow:0 12px 50px #37452b22; animation:celebration-pop .4s cubic-bezier(.2,1.4,.5,1) both; }
.celebration[data-kind=penalty] { background:#fff7eef5; border-color:#dfb895; box-shadow:0 12px 50px #95654422; }
.effect-symbol { width:48px; height:48px; background:#f7eac2; color:#9c742d; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 9px; }
.effect-symbol .icon { width:25px; height:25px; }
[data-kind=penalty] .effect-symbol { background:#f8dfc7; color:#ac6636; }
.effect-title { font-size:12px; color:#8c7951; font-weight:600; margin:0 0 7px; }
.celebration strong { display:block; font-size:24px; line-height:1.45; font-weight:750; color:var(--green); overflow-wrap:anywhere; max-height:105px; overflow:auto; }
[data-kind=penalty] strong { color:#a15e36; }
.effect-outcome { font-size:13px; color:#8c7951; margin:8px 0 0; overflow-wrap:anywhere; }
.effect-close { position:absolute; right:6px; top:6px; }
.outcome-field.is-special .outcome-revealed { border-color:#dcb578; background:#fff3d8; color:#986925; box-shadow:0 0 0 3px #e9cb8840; animation:result-bounce .65s ease-out; }
.outcome-field.is-special[data-kind=penalty] .outcome-revealed { color:#a56338; background:#fff0df; border-color:#ddab7a; animation:penalty-wiggle .6s ease-out; }
.game-guide { display:grid; grid-template-columns:1fr 1fr; gap:42px; margin:0 0 34px; padding:24px 3px 0; border-top:1px solid var(--line); }
.game-guide h2 { font-size:13px; font-weight:650; color:#607655; margin:0 0 9px; }
.game-guide p { font-size:12px; line-height:1.85; color:#7d8974; margin:0; }
.use-tags { display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:13px 0 0; padding:0; }
.use-tags li { font-size:10px; padding:5px 8px; border-radius:5px; background:#eef2e7; color:#7b8b6e; }
@keyframes confetti-fall { 0% { transform:translate(0,-40px) rotate(0); opacity:0; } 10% { opacity:1; } 80% { opacity:1; } 100% { transform:translate(var(--drift),350px) rotate(var(--spin)); opacity:0; } }
@keyframes celebration-pop { from { opacity:0; transform:translate(-50%,-50%) scale(.8); } to { opacity:1; transform:translate(-50%,-50%) scale(1); } }
@keyframes result-bounce { 0%,100% { transform:scale(1); } 35% { transform:scale(1.1); } 65% { transform:scale(.97); } }
@keyframes penalty-wiggle { 0%,100% { transform:rotate(0); } 20%,60% { transform:rotate(-4deg); } 40%,80% { transform:rotate(4deg); } }
@media(max-width:680px) {
  .board-heading { gap:8px; }
  .board-tools { gap:4px; }
  .share-button { font-size:11px; padding:8px 10px; gap:5px; }
  .share-button .icon { width:14px; height:14px; }
  .board-heading p { max-width:190px; }
  .share-hint { margin:0 0 9px; font-size:9px; }
  .board-tools .icon-button { width:24px; height:29px; }
  .game-guide { grid-template-columns:1fr; gap:20px; margin:0 6px 26px; padding-top:20px; }
  .game-guide h2 { font-size:12px; }
  .game-guide p { font-size:11px; }
  .celebration { padding:20px; top:55%; }
  .celebration strong { font-size:22px; }
  .confetti { border-radius:0 0 14px 14px; }
}
@media(prefers-reduced-motion:reduce) { .confetti { display:none; } }

/* White canvas, black typography, and playful color accents. */
:root { --page:#ffffff; --paper:#fff; --ink:#18181b; --green:#18181b; --green-dark:#303036; --muted:#3f3f46; --line:#e8e8ec; --soft:#fafafa; --orange:#ff826d; }
.site-header { border-color:#e8e8ec; }
.brand-dot { color:#ff826d; }
.languages { background:#f5f5f7; border-color:#e8e8ec; }
.languages a { color:#27272a; font-size:13px; padding:8px 13px; }
.languages a[aria-current] { color:#18181b; }
.header-note { font-size:13px; color:#3f3f46; }
h1 { font-size:43px; color:#18181b; }
.eyebrow { font-size:12px; color:#27272a; }
.intro p { font-size:15px; color:#27272a; }
.game-shell { border-color:#e5e5e9; box-shadow:0 8px 28px #18181b08; }
.settings { background:#fafafa; border-color:#e8e8ec; }
h2,.board-heading h2 { font-size:18px; }
.settings-heading h2 { font-size:18px; }
.field-label { font-size:15px; }
.step-no { font-size:12px; color:#3f3f46; }
.stepper { border-color:#e4e4e8; height:59px; }
.stepper-button { background:#f3f1fc; }
.stepper-button:hover { background:#e9e3ff; }
.count-wrap span { font-size:14px; color:#27272a; }
#player-count { font-size:25px; width:45px; }
.field-hint,.preset-hint { font-size:12px; line-height:1.7; color:#3f3f46; }
.settings-divider { background:#e8e8ec; }
.preset { font-size:13px; color:#27272a; border-color:#e4e4e8; min-height:73px; }
.preset>.icon { width:20px; height:20px; }
.preset:hover { background:#f7f5ff; }
.preset.selected { border-color:#a58aee; color:#18181b; background:#fff; }
.primary-button { font-size:15px; min-height:53px; box-shadow:0 4px 10px #18181b20; }
.fair-note { font-size:11px; color:#3f3f46; }
.fair-note .icon { width:14px; height:14px; }
.board-heading p { font-size:13px; line-height:1.7; color:#27272a; }
.icon-button { color:#27272a; }
.icon-button:hover { background:#f5f3fb; }
.board-label { font-size:12px; color:#27272a; }
.phase { font-size:11px; background:#f5f5f7; color:#27272a; padding:6px 10px; }
.phase.active { background:#fff3ca; color:#18181b; }
.phase>span { background:#a58aee; }
.phase.active>span { background:#a58aee; }
.field-input { font-size:16px; height:44px; border-color:#e4e4e8; background:#ffffff; border-radius:8px; }
.field-input::placeholder { font-size:14px; color:#71717a; }
.field-input:hover { border-color:#a58aee; }
.name-fields,.outcome-fields { gap:12px; }
.name-marker { width:27px; height:27px; bottom:-26px; font-size:10px; }
.ladder-canvas { margin:13px 0; background-image:radial-gradient(#e5e5ea 1px,transparent 1px); background-size:18px 18px; }
.ladder-line,.is-playing .ladder-line { stroke:#d1d1da; stroke-width:3; }
.ladder-end { stroke:#d1d1da; }
.is-playing .ladder-canvas { background-image:radial-gradient(#e5e5ea .8px,transparent .8px); }
.ladder-path { stroke-width:4.5; }
.outcome-input { background:#f5f5f7; }
.outcome-input.special,.outcome-waiting.special { color:#18181b; background:#fff2ce; border-color:#f3d880; }
.outcome-waiting { display:flex; align-items:center; justify-content:center; background:#f5f5f7; color:#18181b; }
.outcome-waiting>span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.outcome-revealed { font-size:16px; }
.name-button { font-size:15px; }
.text-button { color:#27272a; font-size:13px; }
.text-button .icon { width:16px; height:16px; }
.scroll-hint { color:#3f3f46; font-size:11px; }
.game-actions { border-color:#e8e8ec; font-size:12px; color:#27272a; }
.share-button { background:#efe9ff; color:#18181b; border-color:#c1acf3; font-size:14px; padding:11px 16px; }
.share-button:hover:not(:disabled) { background:#e3d8ff; }
.share-hint { color:#3f3f46; font-size:11px; margin-top:-13px; }
.game-actions .share-button { font-size:13px; }
.secondary-button { font-size:13px; border-color:#e4e4e8; }
.result-item { font-size:15px; padding:15px; background:#fafafa; }
.results-heading h2 { font-size:22px; }
.how-strip { color:#27272a; font-size:12px; gap:25px; }
.instruction-no { width:26px; height:26px; font-size:11px; background:#fff0dc; border-color:#f6dcae; color:#18181b; }
.instruction-arrow { color:#71717a; }
.game-guide h2 { font-size:16px; color:#18181b; }
.game-guide p { font-size:14px; color:#27272a; }
.use-tags li { font-size:12px; color:#18181b; background:#f5f2fb; padding:6px 10px; }
.site-footer,.site-footer button { font-size:12px; color:#3f3f46; }
.site-footer strong { color:#18181b; }
.copyright { font-size:11px; color:#3f3f46; }

h1>span,.hero-drawing>span { color:var(--ink); }
.tiny-star { color:#a58aee; }
.eyebrow-line { background:#d4d4dc; }
.primary-button { background:#ffd866; color:var(--ink); box-shadow:0 4px 12px #ffd86635; }
.primary-button:hover { background:#ffcd3d; }
.preset:nth-child(1) { --preset-color:#a58aee; --preset-soft:#f2edff; }
.preset:nth-child(2) { --preset-color:#ff826d; --preset-soft:#fff0eb; }
.preset:nth-child(3) { --preset-color:#6c9df0; --preset-soft:#edf3ff; }
.preset:nth-child(4) { --preset-color:#e7b943; --preset-soft:#fff7dd; }
.preset>.icon { color:var(--preset-color); }
.preset.selected { background:var(--preset-soft); border-color:var(--preset-color); color:var(--ink); }
.preset:hover { background:var(--preset-soft); }
.languages a:hover { color:var(--ink); background:#eee9fc; }
.name-marker { color:var(--ink); background:color-mix(in srgb,var(--color),white 45%); }
.name-button,.name-button.revealed,.outcome-revealed,.result-item strong { color:var(--ink); }
.name-button.revealed { background:color-mix(in srgb,var(--color),white 80%); }
.outcome-field.is-special .outcome-revealed { color:var(--ink); background:#fff2c6; border-color:#edca60; box-shadow:0 0 0 3px #ffd86630; }
.outcome-field.is-special[data-kind=penalty] .outcome-revealed { color:var(--ink); background:#ffede7; border-color:#ffab98; }
.how-strip>div:nth-child(3) .instruction-no { background:#efe9ff; border-color:#d5c6f5; }
.how-strip>div:nth-child(5) .instruction-no { background:#ffede7; border-color:#ffd0c3; }
.use-tags li:nth-child(3n+2) { background:#fff3d4; }
.use-tags li:nth-child(3n) { background:#ffede7; }
.celebration { background:#fffffff5; border-color:#eed581; box-shadow:0 12px 50px #18181b18; }
.celebration[data-kind=penalty] { background:#fffffff5; border-color:#ffad9b; box-shadow:0 12px 50px #18181b18; }
.effect-title,.celebration strong,[data-kind=penalty] strong,.effect-outcome,.is-suspense #board-hint { color:var(--ink); }
.effect-symbol { color:var(--ink); background:#ffebaa; }
[data-kind=penalty] .effect-symbol { color:var(--ink); background:#ffded4; }
.is-suspense .phase { color:var(--ink); background:#fff3ca; }
.result-item .icon,dialog p,dialog li { color:#27272a; }
.board-scroll { scrollbar-color:#d4d4dc transparent; }
.toast { color:var(--ink); background:#fff; border:1px solid #dedee5; box-shadow:0 8px 30px #18181b18; }
dialog { border-color:#e4e4e8; box-shadow:0 20px 80px #18181b20; }
dialog::backdrop { background:#18181b50; }
button:focus-visible,a:focus-visible,input:focus-visible { outline-color:#a58aee; }

@media(min-width:1000px) { .game-shell { grid-template-columns:285px minmax(0,1fr); } }
@media(max-width:900px) and (min-width:681px) {
  .board-panel { padding-left:18px; padding-right:18px; }
  .board-heading { gap:10px; flex-wrap:wrap; }
  .board-tools { margin-left:auto; }
  .share-hint { margin-top:-5px; }
  .how-strip { font-size:11px; gap:12px; }
  .instruction-arrow { display:none; }
}
@media(max-width:680px) {
  .languages a { font-size:12px; padding:7px 8px; }
  h1,html[lang=en] .intro h1,html[lang=ja] .intro h1 { font-size:34px; }
  .intro .eyebrow { font-size:10px; }
  .intro p,html[lang=ja] .intro p { font-size:13px; }
  .hero-drawing { width:75px; }
  .settings-heading h2,.board-heading h2 { font-size:17px; }
  .settings>.field-label { font-size:14px; }
  .field-hint { font-size:11px; }
  .stepper { height:45px; }
  #player-count { font-size:23px; width:36px; }
  .count-wrap span { font-size:12px; }
  .preset { font-size:11px; min-height:64px; }
  .preset>.icon { width:19px; height:19px; }
  .primary-button { font-size:15px; min-height:48px; }
  .fair-note { font-size:10px; }
  .board-heading { gap:10px; flex-wrap:wrap; }
  .board-heading p { font-size:12px; max-width:190px; }
  .board-tools { margin-left:auto; }
  .share-button { font-size:12px; padding:9px 11px; }
  .share-hint { font-size:10px; margin-top:0; }
  .phase { font-size:10px; }
  .board-label { font-size:11px; }
  .ladder-board { min-width:calc(var(--count) * 74px); }
  .name-fields,.outcome-fields { gap:7px; }
  .field-input { font-size:16px; height:42px; }
  .field-input::placeholder { font-size:12px; }
  .name-button,.outcome-revealed,.outcome-waiting { font-size:14px; }
  .name-marker { width:25px; height:25px; bottom:-25px; font-size:9px; }
  .text-button { font-size:12px; }
  .game-actions { font-size:11px; }
  .game-actions .share-button { font-size:12px; }
  .how-strip,html[lang=en] .how-strip,html[lang=ja] .how-strip { font-size:10px; gap:8px; align-items:flex-start; }
  .how-strip>div { flex:1; align-items:flex-start; }
  .instruction-no { width:20px; height:20px; font-size:9px; flex-shrink:0; }
  .game-guide h2 { font-size:15px; }
  .game-guide p { font-size:13px; }
  .use-tags li { font-size:11px; }
  .site-footer,.site-footer button { font-size:11px; }
  .copyright { font-size:10px; }
}

/* Sharing methods are explicit; opening the menu never copies a link. */
.share-options { display:grid; gap:10px; margin-top:22px; }
.share-option { display:flex; align-items:center; gap:13px; width:100%; padding:17px 16px; border:1px solid #dfd5f5; border-radius:10px; background:#f3efff; color:var(--ink); text-align:left; font-size:15px; font-weight:600; }
.share-option>span { flex:1; }
.share-option>.icon:last-child { width:17px; height:17px; }
.share-option:hover:not(:disabled) { background:#eae1ff; border-color:#b99de8; }
.share-option:nth-child(2) { background:#fff6da; border-color:#eedb9c; }
.share-option:nth-child(2):hover:not(:disabled) { background:#ffedb4; border-color:#e5c966; }
.share-error { margin-bottom:0; }