/* Compact play surface. Library and standalone recall keep their reading layout. */
.is-playing .site-header{height:56px;max-width:1100px;padding:0 24px;gap:16px}
.is-playing .brand{font-size:19px}.is-playing .brand small{display:none}
.is-playing .brand-mark{transform:scale(.85)}
.is-playing nav{margin-right:0}.is-playing .nav-button{padding:12px 18px}
.is-playing main{max-width:1052px;margin:0 auto;padding:12px 20px 0}
.is-playing .answer-mode-bar{margin:0 0 12px;padding:5px 12px;gap:10px;border-radius:10px;min-height:46px}
.is-playing .answer-mode-bar select{min-height:34px;padding:5px 24px 5px 9px;font-size:12px}
.play-tools{display:none;align-items:center;gap:14px;margin-left:auto;white-space:nowrap}
.is-playing .play-tools{display:flex}.play-tools .calm-chip{font-size:10px;padding:4px 0;background:none}
.play-tools .text-button{font-size:11px;min-height:34px;padding:4px 0}
.is-playing .game-layout{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:16px;align-items:stretch}
.is-playing .board-card{padding:16px 18px 12px;border-radius:18px;align-self:start;min-width:0}
.is-playing .board-heading h2{font-size:16px}.is-playing .board-heading .eyebrow{font-size:8px;margin-bottom:4px}
.is-playing .score>strong{font-size:25px;margin-top:0}.is-playing .score>span{font-size:8px}
.is-playing .board-meta{margin:10px 0 8px;font-size:9px}
.is-playing .board-wrap{padding:9px;border-radius:12px}
.is-playing .board{gap:8px}
.is-playing .word-cell{height:clamp(72px,calc((100svh - 470px)/3),130px);min-height:0;aspect-ratio:auto;font-size:21px;padding:22px 5px 16px;transition:background .15s,border-color .15s;box-shadow:0 3px 0 #dfe5d7;animation:none}
.is-playing .word-cell.long-word{font-size:16px}
.is-playing .word-cell.available{background:#f1f8e9;border-color:#82a373}
.is-playing .word-cell.selected{background:#294a37;border-color:#294a37;box-shadow:0 3px 0 #152d20;color:white}
.is-playing .word-cell.solved{background:#fff0ba;color:#674718;border-color:#d8b058;box-shadow:0 3px 0 #d4aa50}
.is-playing .path-lines polyline{stroke:#d7a53d;stroke-width:6}
.is-playing .board-card[data-charge="1"] .solved{background:#ffe6a1}
.is-playing .board-card[data-charge="2"] .solved,.is-playing .board-card[data-charge="3"] .solved{background:#ffdc7c;border-color:#c78f24;box-shadow:0 3px 0 #bd8c2c,0 0 13px #e5b75248}
.is-playing .board-card[data-charge="2"] .path-lines,.is-playing .board-card[data-charge="3"] .path-lines{filter:drop-shadow(0 0 4px #e8b344)}
.is-playing .board-legend{margin-top:9px;font-size:9px;gap:14px}
.is-playing .gem-progress{margin-top:10px;padding-top:10px;min-height:52px}
.is-playing .gem-slots{margin-top:3px;gap:9px}.is-playing .gem-slot{display:block;width:26px;height:26px}
.is-playing .gem-slot.filled{color:#47805c;filter:drop-shadow(0 2px 3px #58865b40)}
.is-playing .gem-slot.pending{color:#d6a332;opacity:.7}.is-playing .gem-progress p span{font-size:10px}
.is-playing .game-sidebar{gap:12px;min-width:0;justify-content:flex-start}
.is-playing .answer-card{padding:17px 20px 14px;min-height:228px;border-radius:18px}
.is-playing .answer-word{font-size:34px;line-height:1.1;margin:7px 0 13px}
.is-playing .answer-prompt{font-size:12px;margin-bottom:6px}
.is-playing .answer-input{height:44px}
.is-playing .answer-submit{margin-top:8px;padding:8px 14px;min-height:44px}
.is-playing .answer-bottom{margin-top:8px}.is-playing .hint-button{min-height:32px}
.is-playing .choice-title{font-size:20px;margin:8px 0}.is-playing .choice-copy{margin:6px 0;font-size:12px;line-height:1.65}
.is-playing .next-choices{margin:8px 0 0;gap:8px}.is-playing .small-button{min-height:44px}
.is-playing .answer-card.choosing{min-height:178px}
.is-playing .answer-card.choosing .weak-text{display:none}
.is-playing .mini-tip,.is-playing .path-chips,.is-playing .chain-card>.preview-note{display:none}
.is-playing .chain-card{padding:13px 18px 12px;border-radius:18px;display:grid;grid-template-columns:1fr;gap:9px}
.is-playing .chain-top>div>strong{font-size:27px;font-weight:650}
.is-playing .chain-points strong{font-size:20px!important;margin-top:2px}.is-playing .chain-top>div>span{font-size:9px}
.is-playing .chain-top{order:0}.is-playing .break-button{order:1;min-height:61px;padding:9px 14px;box-shadow:0 3px 0 #82b98e}
.is-playing .break-button:active:not(:disabled){box-shadow:0 0 0 #82b98e;transform:translateY(3px)}
.is-playing #break-title{font-size:20px}.is-playing #break-detail{font-size:10px}
.is-playing .chain-card .break-preview{order:2;margin:3px 0 0;padding-top:8px;border-top-color:#53654f}
.is-playing .chain-card>p{order:3;margin:0;font-size:9px}
.is-playing .preview-heading{margin-bottom:6px}.is-playing .preview-heading h3{font-size:10px}
.is-playing .chain-card .preview-layout{grid-template-columns:128px minmax(0,1fr);gap:12px}
.is-playing .preview-grid{padding:4px;gap:3px;border-radius:7px}
.is-playing .chain-card .preview-cell{height:26px;padding:5px 2px 1px;border-radius:4px;font-size:9px;line-height:1.05}
.is-playing .preview-cell>span:not(.preview-diamond){max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.is-playing .preview-explanation b{margin-left:4px}
.is-playing .preview-cell small{font-size:6px;top:1px;left:2px}.is-playing .preview-diamond,.is-playing .preview-diamond svg{width:11px;height:11px;top:0;right:0}
.is-playing .chain-card .preview-explanation>strong{font-size:16px;margin:3px 0}
.is-playing .preview-explanation .mini-label{font-size:7px;letter-spacing:1px}
.is-playing .chain-card .preview-explanation p{font-size:10px;line-height:1.4;margin:3px 0 0}
.is-playing .preview-explanation p br:first-child{display:none}
.is-playing .preview-note{display:none}.is-playing .preview-complete{padding:2px 0}.is-playing .preview-complete p{margin:2px 0 0}
.is-playing .turn-result{padding:7px 12px;min-height:32px;font-size:11px;margin-top:10px;line-height:1.6}
.is-playing .play-bottom{margin-top:3px;min-height:29px;align-items:center}
.save-info{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.learning-note{font-size:9px;color:#7d897b;line-height:1.5}
.is-playing .play-bottom p{font-size:9px}.is-playing .site-footer{display:none}
.is-playing .queue-notice{font-size:10px;margin:7px 0 0;padding:5px 8px;line-height:1.5}
.is-playing .answer-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.is-playing .option-button{min-height:62px;padding:7px;gap:6px}.is-playing .option-button>b{font-size:12px;line-height:1.5}
.is-playing .option-button>span{width:18px;height:18px;font-size:9px}
.is-playing .choice-mode-caption{font-size:11px;margin:0 0 8px}
.is-playing .answer-card .weak-text{font-size:10px;line-height:1.6;margin:6px 0 0}
.is-playing .rating-buttons{gap:7px}.is-playing .rating-button{min-height:60px;padding:7px 4px;gap:3px}
.is-playing .rating-button strong{font-size:14px}.is-playing .rating-button small{display:none}
.is-playing .self-rate-prompt{margin:8px 0;font-size:11px}
.is-playing .feedback-answer{padding:7px 10px;line-height:1.6;font-size:13px}
.is-playing .feedback-copy{margin:7px 0;line-height:1.6}.is-playing .feedback-title{margin:7px 0;font-size:13px}
.is-playing .button-stack{margin-top:8px;gap:6px}.is-playing .feedback-answer+.feedback-copy+.button-stack{flex-direction:row}
.is-playing .button-stack button{flex:1}
.is-playing .clear-ready-icon{margin:10px 0;font-size:27px}.is-playing #finish-stage{display:none}
.is-playing .won-card{padding:0}.is-playing .won-icon{width:48px;height:48px;margin:0 auto 8px}
.is-playing .won-card h2{font-size:21px}.is-playing .won-card p{margin:6px 0;font-size:11px;line-height:1.7}
.stage-celebration{animation:stage-arrive .45s cubic-bezier(.2,.8,.3,1)}
@media(min-width:851px){
  .is-playing .chain-card{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:auto auto auto;gap:8px 12px;align-items:center}
  .is-playing .chain-top{grid-column:1;grid-row:1}
  .is-playing .break-button{grid-column:1;grid-row:2;min-height:64px;padding:10px 12px}
  .is-playing .chain-card>p{grid-column:1;grid-row:3;font-size:8px}
  .is-playing .chain-card .break-preview{grid-column:2;grid-row:1/4;align-self:stretch;border-top:0;border-left:1px solid #53654f;padding:2px 0 2px 10px;margin:0}
  .is-playing .chain-card .preview-layout{grid-template-columns:86px minmax(0,1fr);gap:7px}
  .is-playing .preview-heading>span{display:none}
  .is-playing .chain-card .preview-explanation>strong{font-size:14px}
  .is-playing .chain-card .preview-explanation p{font-size:9px}
  .is-playing .preview-explanation>.weak-text{display:none}
  .is-playing .preview-explanation .mini-label{font-size:6px}
  .is-playing .preview-grid{gap:2px;padding:3px}
  .is-playing .chain-card:has(.break-preview[hidden]){grid-template-columns:1fr}
  .is-playing .preview-complete{display:block}.is-playing .preview-complete>span{display:none}
  .is-playing .preview-complete p{font-size:9px}
}

/* Short lived, high contrast feedback, all positioned in viewport coordinates. */
#effects-layer{position:fixed;inset:0;z-index:20;pointer-events:none;overflow:hidden}
.fx{position:absolute;pointer-events:none;will-change:transform,opacity}
.path-spark{width:18px;height:18px;border-radius:50%;background:#fff4c4;border:3px solid #ae7825;box-shadow:0 0 14px #f6c743}
.connect-label{font-size:22px;font-weight:850;color:#73501b;background:#fff4ca;padding:3px 10px;border-radius:7px;border:1px solid #d7a840;box-shadow:0 3px 0 #bf9348;white-space:nowrap}
.connect-label small{font-size:9px;letter-spacing:1px}
.shard{width:13px;height:10px;background:#eab84d;border:1px solid #8b6424;border-radius:2px}
.shard-1{background:#fff4bd;width:9px;height:13px}.shard-2{background:#586c42;width:7px;height:7px}
.impact-ring{width:36px;height:36px;border:3px solid #9c702a;border-radius:50%;box-shadow:0 0 0 3px #ffe59a}
.break-burst{font-size:25px;font-weight:850;letter-spacing:1.5px;color:#fff2bc;background:#293e2fed;border:2px solid #f5cf69;border-radius:12px;padding:10px 22px;white-space:nowrap;box-shadow:0 5px 0 #182d23}
.break-burst small{display:block;text-align:center;font-size:13px;color:white;margin-top:3px;letter-spacing:4px}
.flying-gem{width:34px;height:34px;color:#4d9667;filter:drop-shadow(0 0 5px #fff6bf) drop-shadow(0 3px 2px #244c2f55)}
.flying-gem svg{width:100%;height:100%}
@keyframes stage-arrive{from{transform:scale(.93);opacity:.4}to{transform:scale(1);opacity:1}}
@media(min-width:671px) and (max-width:850px) and (orientation:portrait){
  .is-playing .game-layout{grid-template-columns:1fr;gap:12px}
  .is-playing .board-card{width:100%;padding:12px 18px}
  .is-playing .board-wrap{max-width:440px;margin:0 auto}
  .is-playing .word-cell{height:clamp(68px,8.2svh,100px);font-size:20px}
  .is-playing .word-cell.long-word{font-size:16px}
  .is-playing .board-heading,.is-playing .board-meta,.is-playing .gem-progress{max-width:440px;margin-left:auto;margin-right:auto}
  .is-playing .board-legend{display:none}.is-playing .gem-progress{margin-top:8px;padding-top:8px}
  .is-playing .game-sidebar{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
  .is-playing .answer-card{min-height:0;padding:14px 16px}
  .is-playing .chain-card{padding:14px}
  .is-playing .answer-mode-bar>span{display:none}
  .is-playing .chain-card .preview-layout{grid-template-columns:112px 1fr;gap:8px}
}
@media(min-width:851px) and (max-height:700px){
  .is-playing .answer-card{padding:13px 17px;min-height:0}
  .is-playing .answer-word{font-size:30px;margin:5px 0 10px}
  .is-playing .chain-card{padding:10px 15px;gap:7px}
  .is-playing .answer-options .option-button{min-height:54px}
  .is-playing .rating-buttons{grid-template-columns:repeat(4,1fr)}
  .is-playing .rating-button>span{font-size:9px}
}
@media(min-width:671px) and (max-width:850px) and (max-height:900px) and (orientation:portrait){
  .is-playing .word-cell{height:clamp(62px,8svh,80px)}
  .is-playing .board-heading .eyebrow{display:none}
  .is-playing .rating-buttons{grid-template-columns:repeat(4,minmax(0,1fr))}
  .is-playing .rating-button>span{font-size:8px}
  .is-playing .answer-word{font-size:30px}
}
@media(max-width:670px){
  .is-playing .site-header{height:auto;min-height:56px;flex-wrap:nowrap;padding:0 12px;gap:5px}
  .is-playing .brand{font-size:15px;gap:4px}.is-playing .brand-mark{display:none}
  .is-playing nav{order:initial;width:auto;margin-left:auto}.is-playing .nav-button{padding:12px 8px;font-size:11px;flex:none}
  .is-playing .icon-button{width:29px;min-height:29px;margin-left:0}
  .is-playing main{padding:8px 12px 0;margin:0}
  .is-playing .answer-mode-bar{flex-wrap:nowrap;gap:7px;padding:4px 8px;margin-bottom:8px}
  .is-playing .answer-mode-bar label{font-size:10px}.is-playing .answer-mode-bar select{flex:none;max-width:145px;font-size:11px;padding-left:5px}
  .is-playing .answer-mode-bar>span,.play-tools .calm-chip{display:none}
  .play-tools{gap:10px}.play-tools .text-button{font-size:10px}
  .is-playing #new-game{font-size:0}.is-playing #new-game:after{content:'新しい面';font-size:10px}
  .is-playing .game-layout{grid-template-columns:1fr;gap:10px}
  .is-playing .board-card{padding:12px 16px}.is-playing .word-cell{height:76px;font-size:19px}
  .is-playing .word-cell.long-word{font-size:14px}.is-playing .board-legend{display:none}
  .is-playing .gem-progress{min-height:42px;margin-top:8px;padding-top:6px}
  .is-playing .board-meta{margin-top:6px}
  .is-playing .game-sidebar{gap:10px}
  .is-playing .answer-card{min-height:0;padding:14px 16px}.is-playing .answer-word{font-size:30px}
  .is-playing .chain-card{padding:12px 16px}.is-playing .play-bottom{align-items:flex-start}
  .save-info{gap:3px;flex-direction:column;align-items:flex-start}.is-playing .play-bottom p{max-width:none;font-size:8px}
  .learning-note{font-size:8px}.is-playing .play-bottom .text-button{white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){.stage-celebration{animation:none}}
.reduced-animations .stage-celebration{animation:none}

/* One complete loop: choose a route, bank a chain, keep the medal. */
.is-playing .board-legend{display:none}
.run-progress{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 0 10px}
.medal-step{display:flex;gap:7px;align-items:center;padding:5px 8px;border:1px solid #e2e6db;border-radius:9px;background:#f5f6f0;min-width:0;opacity:.68}
.medal-step svg{width:24px;height:30px;flex:none}.medal-step>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.medal-step b{font-size:11px;font-weight:750;color:#3d5040}.medal-step small{font-size:9px;white-space:nowrap;color:#768173}
.medal-bronze{color:#ba855c}.medal-silver{color:#879ca8}.medal-gold{color:#d4a137}
.medal-step.earned{opacity:1;background:#eef4e7;border-color:#a5b996}
.medal-step.ready{opacity:1;background:#fff3cc;border-color:#d3ac59;box-shadow:0 2px 0 #d7b76b}
.medal-step.ready small{color:#94691d;font-weight:650}
.chain-goal{order:1;color:#f8dda0;font-size:11px;line-height:1.55;font-weight:600;min-height:17px}
.is-playing .chain-card .break-button{order:2}.is-playing .chain-card .break-preview{order:3}.is-playing .chain-card>p{order:4}
.is-playing .chain-card .preview-complete strong{font-size:12px}.is-playing .chain-card .preview-complete p{font-size:10px;line-height:1.7}
.is-playing .gem-progress{margin-top:10px}
.is-playing .result-medal{width:68px;height:77px;margin:0 auto 7px;filter:drop-shadow(0 4px 5px #9a80452b)}
.result-medal svg{width:100%;height:100%}.result-bronze .result-medal{color:#ba855c}.result-silver .result-medal{color:#879ca8}.result-gold .result-medal{color:#d4a137}
.is-playing .won-card .eyebrow{font-size:9px;color:#9e8149;margin-bottom:6px}
.is-playing .won-card .result-message{font-size:12px;color:#607054;margin:8px 0 12px}
.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:10px 0}
.result-stats>div{padding:10px 4px;background:#f2f5eb;border-radius:9px}.result-stats strong{display:block;font-size:25px;font-weight:650;line-height:1.2}
.result-stats span{font-size:9px;color:#75816e}.is-playing .won-card .result-record{font-size:10px;color:#8d7136}
.result-links{display:flex;justify-content:center;gap:8px}
.history-intro{color:#768173}.history-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:8px 0}
.history-summary>div{background:#f5f6ee;border-radius:12px;display:flex;align-items:center;flex-direction:column;padding:12px}
.history-summary svg{width:36px;height:43px}.history-summary strong{font-size:23px;color:#374f3b;line-height:1.4}.history-summary span{font-size:10px;color:#74816e}
.history-runs{padding:0;margin:0;list-style:none}.history-runs li{display:flex;align-items:center;gap:10px;padding:12px 0;border-top:1px solid #e4e8dd}
.history-medal{flex:none;width:28px;height:34px}.history-medal svg{width:100%;height:100%}.history-runs li>div{flex:1;min-width:0}
.history-runs strong{font-size:12px;display:block}.history-runs small{font-size:10px;color:#788371;display:block;margin-top:3px}.history-runs time{font-size:10px;color:#819077;white-space:nowrap}
@media(min-width:851px){
 .is-playing .chain-card{grid-template-rows:auto auto auto auto;row-gap:7px}
 .is-playing .chain-goal{grid-column:1;grid-row:2}
 .is-playing .chain-card .break-button{grid-row:3}
 .is-playing .chain-card>p{grid-row:4}
 .is-playing .chain-card .break-preview{grid-row:1/5}
 .is-playing .rating-buttons{grid-template-columns:repeat(4,minmax(0,1fr))}
 .is-playing .rating-button>span{font-size:9px}
}
@media(min-width:671px) and (max-width:850px) and (orientation:portrait){
 .is-playing .word-cell{height:clamp(62px,6.7svh,90px)}
 .is-playing .run-progress{max-width:440px;margin-left:auto;margin-right:auto}
 .is-playing .board-wrap{margin-top:0}
}
@media(max-width:1100px){.is-playing .answer-mode-bar>span{display:none}}
@media(max-width:670px){
 .run-progress{gap:5px;margin-bottom:8px}.medal-step{padding:4px 5px;gap:4px}.medal-step svg{width:21px;height:26px}
 .medal-step small{font-size:8px}.play-tools{gap:10px}.is-playing .game-sidebar{gap:10px}
 .is-playing .chain-card{gap:7px}.history-runs time{font-size:8px}.history-runs strong{font-size:11px}
}

.is-playing #break-title{white-space:nowrap}

.placement-burst{z-index:2;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 14px;border-radius:12px;border:2px solid #e2b754;background:#fff8df;color:#76551d;box-shadow:0 4px 0 #caa65f,0 6px 18px #4b3b1833;white-space:nowrap}.placement-burst strong{font-size:15px}.placement-burst small{font-size:11px;font-weight:650}