:root{font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",sans-serif;-webkit-text-size-adjust:100%;text-size-adjust:100%;color:#27251f;background:#e9e2d2;line-height:1.6;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 20%,#f7efdf,transparent 75%)}main{max-width:1250px;margin:auto;padding:18px 28px 20px}h1,p{margin:0}h1{font-size:25px;font-weight:900;letter-spacing:-.06em}h1 span{color:#b74227}header{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:5}.menu{font-size:14px}.menu[open]{position:absolute;right:0;top:0;width:min(420px,100%);padding:18px;background:#fff9eb;border:2px solid #373a2d;box-shadow:6px 6px 0 #393c3020}.menu summary{cursor:pointer;min-height:44px;text-align:right;padding:8px}.menu p{margin:10px 0}.menu button{margin:4px}.menu small{display:block;margin-top:10px}button,input{font:inherit}button{min-height:42px;padding:8px 14px;border:1px solid #777d65;border-radius:4px;background:#fff9e9;color:#313827;cursor:pointer}button:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #bb482b;outline-offset:3px}button.primary{background:#b74125;border-color:#b74125;color:#fff9e9;font-weight:800}.quiet{background:transparent;border:0}.encounter{position:relative;height:330px;overflow:hidden;border-bottom:3px solid #5b5b43}.situation{position:absolute;left:20px;bottom:14px;z-index:2;max-width:28%;font-size:13px;line-height:1.9;color:#58604e}.scene-lines{position:absolute;inset:15px 6% 0;background:repeating-linear-gradient(90deg,transparent 0,transparent 175px,#78806a19 176px,#78806a19 178px);border-top:1px solid #78806a20;transform:perspective(500px) rotateX(-7deg);pointer-events:none}#opponent{position:absolute;height:370px;width:370px;object-fit:contain;left:43%;bottom:-47px;transform:translateX(-50%);filter:drop-shadow(5px 6px 0 #302c2018)}.enemy-bubble{position:absolute;right:4%;top:42px;width:34%;max-width:380px;background:#fffdf2;border:2px solid #37372b;border-radius:38% 42% 35% 12% / 22% 22% 25% 20%;padding:25px 30px;box-shadow:5px 5px 0 #393c3010}.enemy-bubble:after{content:"";position:absolute;left:-20px;bottom:28px;border-width:12px 22px 0 0;border-style:solid;border-color:transparent #37372b transparent transparent}.enemy-bubble span{font-size:12px;color:#716f60}.enemy-bubble p{font-size:clamp(17px,2.1vw,24px);font-weight:800;line-height:1.65}.player-area{position:relative;padding:0 22px 15px;background:linear-gradient(#d4c8ad22,#c7b39155);border-radius:0 0 40px 40px}.reply{position:relative;max-width:870px;margin:-4px auto 0;background:#fffdf1;border:2px solid #3b4132;border-radius:5px 5px 26px 26px;padding:12px 22px;box-shadow:4px 5px 0 #423b2012;z-index:3}.eyebrow{font-size:12px;color:#8b4229;font-weight:800}.sentence{font-size:clamp(21px,2.7vw,34px);font-weight:800;line-height:1.55;min-height:50px;white-space:pre-wrap;overflow-wrap:anywhere}.sentence.empty{font-size:18px;font-weight:400;color:#7b7d6b;padding:8px 0}.reply-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px}.reply-actions>span{margin-right:auto;font-size:12px;color:#6a6c5b}.composer{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;gap:10px;margin:18px auto;min-height:46px}.prefix{width:120px}.connector{width:85px;max-width:100%;background:#fffcdf66;border:0;border-bottom:1px solid #90947a;padding:8px 4px;color:#414b33;min-height:42px}.placed{display:flex;align-items:flex-start;gap:6px;max-width:100%}.wordbox{width:132px;background:#fffae9;border:1px solid #666e55;border-radius:4px;padding:5px 7px;box-shadow:2px 3px 0 #5d63422b}.wordbox input{width:100%;border:0;background:transparent;text-align:center;font-size:17px;font-weight:700;min-height:36px}.mini-actions{display:flex;gap:3px;justify-content:center}.mini-actions button{font-size:12px;min-height:32px;padding:3px 7px}.placed .connector,.placed .mini-actions{display:none}.placed:focus-within .connector,.placed:focus-within .mini-actions{display:flex}.placed:focus-within{padding:5px;background:#e5e6c7;border-radius:6px}.hand-label{display:flex;gap:12px;align-items:center;justify-content:center;font-size:13px;color:#525940;margin:10px 0 16px}.hand-label small{font-weight:700}.hand-label span:last-child{color:#797d67}.hand{display:flex;gap:10px;justify-content:center;align-items:flex-start;padding:7px 5px 17px;flex-wrap:wrap}.card{position:relative;width:calc((100% - 70px)/8);max-width:145px;min-height:155px;background:#fff9e6;border:2px solid #5a644b;border-radius:8px;box-shadow:3px 5px 0 #39432233;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:12px 8px;font-weight:800;font-size:clamp(16px,1.8vw,23px);overflow-wrap:anywhere;transform:rotate(var(--tilt,0deg));transition:transform .15s,background .15s}.card:before{content:"";position:absolute;inset:5px;border:1px solid #8f987759;border-radius:4px;pointer-events:none}.card small{font-size:11px;color:#81856d;font-weight:400}.card:disabled{transform:translateY(7px);background:#c3b799;box-shadow:none;opacity:.48}.spoken .reply{border:3px solid #b74125;box-shadow:7px 7px 0 #b7412520}.spoken .sentence{color:#9c2c16}.spoken .composer,.spoken .hand-label{display:none}.spoken .hand{margin-top:24px}.spoken .enemy-bubble{opacity:.65}#share-actions{margin-top:12px;text-align:right}#share-actions button{margin:3px}footer{font-size:12px;color:#72745e;display:flex;justify-content:space-between;gap:10px;margin-top:10px;flex-wrap:wrap}#status{color:#8b3d24}[hidden]{display:none!important}@media(max-width:700px){main{padding:12px}.encounter{height:300px}#opponent{width:300px;height:300px;left:30%;bottom:-25px}.enemy-bubble{right:0;top:30px;width:52%;padding:20px;border-radius:20px}.enemy-bubble p{font-size:17px}.situation{display:none}.player-area{padding:0 8px 12px}.reply{padding:10px 13px}.hand{gap:9px}.card{width:calc((100% - 27px)/4);min-height:115px;font-size:17px}.hand-label{flex-wrap:wrap;gap:8px}.hand-label span:last-child{display:none}.composer{justify-content:flex-start}.reply-actions{gap:3px}h1{font-size:21px}.menu summary{font-size:12px}.spoken .hand{margin-top:14px}}@media(prefers-reduced-motion:reduce){.card{transition:none}}
.spoken .card:disabled{opacity:1;background:#fff9e6;color:#313827;box-shadow:2px 3px 0 #39432222;transform:none}
@media(min-width:701px) and (max-height:850px){.encounter{height:225px}#opponent{height:285px;width:285px;bottom:-55px}.enemy-bubble{top:15px;padding:18px 25px}.enemy-bubble p{font-size:20px}.card{min-height:115px}.composer{margin:12px auto;min-height:42px}.hand-label{margin:6px 0 8px}.reply{padding:9px 18px}.sentence{min-height:44px}.hand{padding-bottom:10px}}



.connection{display:flex;align-items:center;min-height:46px;max-width:100%}.add-connection{padding:5px 8px;min-height:40px;border:1px dashed #93977c;background:transparent;font-size:12px;white-space:nowrap;color:#626b50}.link-input{width:100px;max-width:100%;min-height:42px;border:0;border-bottom:1px solid #90947a;background:#fffcdf88;padding:7px 4px;color:#414b33}.placed{align-items:flex-start}

.wordbox{position:relative}.placed:focus-within{padding:0}.mini-actions{position:absolute;top:100%;left:0;right:0;z-index:4;background:#fffae9;border:1px solid #90947a;border-radius:3px;padding:3px}.connection{min-width:100px}.add-connection{width:100px}

.wordbox{width:auto;min-width:132px;max-width:100%;padding:8px}.base-word{display:block;color:#656b57;font-size:11px;overflow-wrap:anywhere}.letters{display:flex;flex-wrap:wrap;gap:2px}.letter{padding:4px;min-width:30px;min-height:40px;background:transparent;border:0;font-size:21px;font-weight:800}.letter.covered{background:#fff0b9;box-shadow:1px 2px 0 #9e713c;border:1px solid #b88e50;transform:translateY(-3px)}.layer-chip{font-size:12px;min-height:32px;padding:3px 7px;margin:5px 3px 0 0;background:#fff0b9}.placed{flex-wrap:wrap}.mini-actions{position:static;border:0;background:none;display:flex!important;padding:3px}.composer{align-items:center}dialog{max-width:min(480px,calc(100vw - 32px));border:2px solid #454b38;border-radius:12px;background:#fff9e9;padding:24px;color:#313827}dialog::backdrop{background:#272c2480}dialog h2{font-size:20px;margin:0 0 12px}dialog p{font-size:14px;margin:12px 0}dialog input{display:block;width:100%;padding:10px;margin:8px 0;border:1px solid #6f765e;background:white}.overlay-actions{display:flex;justify-content:flex-end;gap:10px}#overlay-error{color:#a33120}

.board-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0 10px}.board-tools span{font-size:12px;color:#5f674f;flex:1;min-width:140px}.board-tools button{font-size:13px}#board-scroll{width:100%;overflow-x:auto;overflow-y:hidden;border:1px solid #979d80;border-radius:5px;background:#e2dfc7;overscroll-behavior-x:contain}#board{position:relative;height:300px;min-width:100%;background:repeating-linear-gradient(0deg,transparent 0,transparent 94px,#90957755 95px,#90957755 96px),repeating-linear-gradient(90deg,transparent 0,transparent 33px,#90957722 33px,#90957722 34px)}.board-tile,.drag-ghost{height:72px;min-height:72px;display:flex;align-items:center;justify-content:flex-start;padding:0;border:0;border-radius:0;background:#fff9e6;box-shadow:inset 0 0 0 1px #72795d,2px 3px 0 #434b3022;color:#293023;font-weight:800;font-size:23px;line-height:1;touch-action:none;user-select:none}.board-tile{position:absolute;cursor:grab}.board-tile span,.drag-ghost span{display:block;flex:0 0 34px;width:34px;text-align:center}.particle-tile{background:#ffe8a2}.board-tile[aria-pressed=true]{outline:2px solid #ad4c2c;outline-offset:0}.drag-ghost{position:fixed;z-index:9999;pointer-events:none;opacity:.94;box-shadow:0 7px 14px #252b2840}.hand .card{touch-action:none;user-select:none}.layer-list{font-size:13px;margin:10px 0}.layer-list summary{cursor:pointer;padding:6px}.layer-list button{font-size:13px;margin:4px;min-height:36px}.spoken #board-scroll,.spoken .board-tools,.spoken .layer-list{display:none}@media(max-width:700px){.board-tools span{order:3;flex-basis:100%}.board-tools button{padding:7px 10px}.player-area{min-width:0}#board-scroll{max-width:100%}}

.hand{margin-top:20px}.board-tools{min-height:42px}.board-tools #lift{margin-left:auto}footer:has(#status:empty){display:none}.menu .layer-list{margin-top:12px}

#particles{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 6px}.particle-source{min-height:38px;min-width:34px;padding:5px 10px;background:#ffe8a2;border:1px solid #97916b;border-radius:3px;font-size:15px;touch-action:none;user-select:none;cursor:grab;box-shadow:1px 2px 0 #68623a25}.board-tools:not(:has(button:not([hidden]))){display:none}.spoken #particles{display:none}

/* Compact play surface: keep the opponent, board and hand together. */
main{padding:8px 20px;max-width:1250px}header{min-height:36px}h1{font-size:22px}.menu summary{min-height:36px;padding:5px}.menu[open]{max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow:auto}.encounter{height:clamp(110px,20vh,170px);height:clamp(110px,20dvh,170px)}#opponent{height:210px;width:210px;bottom:-34px}.enemy-bubble{top:8px;padding:12px 20px}.enemy-bubble p{font-size:18px;line-height:1.5}.reply{padding:8px 14px;max-width:960px}.sentence{font-size:24px;min-height:30px;max-height:74px;overflow-y:auto;line-height:1.4}.sentence.empty{font-size:16px;padding:3px 0}.reply-actions button{min-height:32px;padding:4px 12px}.player-area{padding:0 14px 8px;border-radius:0 0 18px 18px}#particles{gap:4px;margin:8px 0 6px}.particle-source{min-height:28px;min-width:28px;padding:2px 7px;font-size:14px;box-shadow:1px 1px 0 #68623a25}.board-tools{margin:4px 0;min-height:30px}.board-tools button{min-height:30px;padding:3px 10px}#board{height:118px;background:repeating-linear-gradient(0deg,transparent 0,transparent 55px,#90957755 55px,#90957755 56px),repeating-linear-gradient(90deg,transparent 0,transparent 33px,#90957722 33px,#90957722 34px)}.board-tile,.drag-ghost{height:48px;min-height:48px;font-size:21px}.hand{margin-top:9px;padding:4px 5px 6px;gap:8px}.card{min-height:90px;width:calc((100% - 56px)/8);font-size:18px;gap:0;padding:7px 5px}footer{margin-top:2px;font-size:12px}.spoken .hand{margin-top:10px}
@media(max-width:700px){main{padding:8px}.encounter{height:130px}#opponent{width:175px;height:175px;left:25%;bottom:-25px}.enemy-bubble{top:3px;width:61%;padding:10px 13px;border-radius:17px}.enemy-bubble p{font-size:15px}.player-area{padding:0 5px 5px}.reply{padding:7px 10px}.sentence{font-size:20px;max-height:58px}.particle-source{min-height:28px;min-width:26px;padding:2px 5px;font-size:14px}.card{width:calc((100% - 24px)/4);min-height:69px;font-size:15px;padding:5px 4px}.hand{gap:6px;margin-top:7px}.board-tools button{padding:3px 8px}.menu summary{font-size:12px}h1{font-size:20px}}

#opponent{height:calc(100% + 15px);bottom:-20px}
@media(max-width:360px){#particles{gap:3px}.particle-source{font-size:13px;min-width:23px;min-height:25px;padding:1px 3px}.card{min-height:62px;font-size:14px}.encounter{height:100px}.enemy-bubble{padding:7px 11px}.enemy-bubble p{font-size:14px}.sentence{font-size:18px}.reply-actions button{padding:3px 8px}}

@media(max-width:360px){main{padding-top:4px;padding-bottom:4px}.encounter{height:80px}.card{min-height:58px;line-height:1.3}.hand{margin-top:5px}.enemy-bubble p{font-size:13px}.enemy-bubble{padding:5px 9px}}

#board-scroll{overflow:hidden}#board{min-width:0;background:repeating-linear-gradient(0deg,transparent 0,transparent 55px,#90957755 55px,#90957755 56px),repeating-linear-gradient(90deg,transparent 0,transparent calc(var(--board-cell,38px) - 1px),#90957722 calc(var(--board-cell,38px) - 1px),#90957722 var(--board-cell,38px))}.board-tile span,.drag-ghost span{flex-basis:var(--board-cell,38px);width:var(--board-cell,38px)}.board-tile,.drag-ghost{font-size:var(--board-font,25px)}

#card-actions{position:fixed;z-index:100;display:flex;gap:4px;padding:5px;background:#fff9e9;border:1px solid #747a61;border-radius:6px;box-shadow:0 4px 12px #30362530}#card-actions button{min-height:34px;padding:4px 10px;font-size:13px;white-space:nowrap}

#result-dialog{width:min(760px,calc(100vw - 24px));height:min(880px,calc(100vh - 24px));height:min(880px,calc(100dvh - 24px));max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);padding:36px 16px 12px;border:1px solid #777b62;background:#eee7d7;overflow:hidden}#result-dialog[open]{display:flex;flex-direction:column;gap:8px}#result-close{position:absolute;right:8px;top:3px;border:0;background:transparent;font-size:24px;min-height:32px;padding:0 10px}.result-content{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}#result-image{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;box-shadow:0 3px 12px #302a201a}#result-line{font-size:clamp(24px,4vw,42px);font-weight:800;margin:25px 0;color:#a13a25;overflow-wrap:anywhere;white-space:pre-wrap}#result-quote{font-size:18px}.result-buttons{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}#result-status{font-size:13px;margin:0;text-align:center}#result-dialog::backdrop{background:#22281bcc;backdrop-filter:blur(3px)}

#result-dialog{max-width:calc(100vw - 24px)}

#result-dialog{height:auto}.result-content{flex:0 1 auto}#result-image{max-height:calc(100vh - 145px);max-height:calc(100dvh - 145px);width:100%;height:auto}.result-buttons{flex-shrink:0;margin-top:8px}
#result-dialog{height:fit-content}

/* ===== ドパ仕様（2026-10-22）: 触って気持ちいい手触り。translate/rotate/scale 個別プロパティで既存transformと干渉させない ===== */
#fx-layer{position:fixed;inset:0;z-index:9998;pointer-events:none;overflow:hidden}
.fx-paper,.fx-spark{position:absolute;display:block;will-change:transform,opacity}
.fx-paper{width:6px;height:8px;border:1px solid #5a644b66;border-radius:1px}
.fx-spark{width:4px;height:13px;border-radius:2px}
.fx-fly{position:absolute;white-space:nowrap;max-width:calc(100vw - 24px);overflow:hidden;text-overflow:ellipsis;background:#fffdf1;border:2px solid #b74125;border-radius:6px;padding:2px 12px;font-weight:800;font-size:22px;line-height:1.4;color:#9c2c16;box-shadow:3px 4px 0 #b7412530;will-change:transform}
.sentence.fx-launched{opacity:.2}

/* 持ち上げ */
.card,.board-tile,.particle-source{transition-property:transform,background,translate,rotate,scale,box-shadow,opacity;transition-duration:.15s,.15s,.12s,.12s,.12s,.12s,.12s}
.card.lifting,.board-tile.lifting,.particle-source.lifting{translate:0 -6px;rotate:-3deg;scale:1.07;box-shadow:0 10px 16px #252b2838}
.board-tile.lifting{box-shadow:inset 0 0 0 1px #72795d,0 10px 16px #252b2838}
.card.away,.board-tile.away,.particle-source.away{opacity:.4}
.drag-ghost{scale:1.07;rotate:-3deg;box-shadow:inset 0 0 0 1px #72795d,0 10px 16px #252b2840;animation:ghost-in .14s ease-out}
@keyframes ghost-in{from{scale:1;rotate:0deg}}
.drag-ghost.sucked{animation:suck .34s cubic-bezier(.5,0,.9,.6) forwards}
@keyframes suck{0%{translate:0 0;scale:1.07;rotate:-3deg;opacity:.94}100%{translate:var(--dx,0) var(--dy,0);scale:.08;rotate:300deg;opacity:0}}

/* 吸着の弾みと、重ねられた札の揺れ */
.board-tile.fx-place{animation:tile-drop .36s cubic-bezier(.2,.8,.3,1)}
@keyframes tile-drop{0%{scale:1.14 1.3;translate:0 -12px}35%{scale:.94 .82;translate:0 3px}65%{scale:1.04 1.06;translate:0 -1px}100%{scale:1;translate:0 0}}
.board-tile.fx-hit{animation:tile-hit .42s ease-out}
@keyframes tile-hit{0%{translate:0;rotate:0deg}15%{translate:-6px 2px;rotate:-4deg}35%{translate:6px -1px;rotate:3.5deg}55%{translate:-4px 0;rotate:-2deg}75%{translate:2px 0;rotate:1deg}100%{translate:0;rotate:0deg}}

/* 配札: 裏→表のフリップ（animation-delay はJSがインラインで指定） */
.card.dealing{animation:card-flip .46s cubic-bezier(.2,.8,.3,1) backwards}
.card:after{content:"";position:absolute;inset:0;border-radius:6px;pointer-events:none;opacity:0;background:repeating-linear-gradient(45deg,#b74125 0 6px,#a23820 6px 12px);box-shadow:inset 0 0 0 4px #fff9e6,inset 0 0 0 5px #8f987780}
.card.dealing:after{animation:card-back .46s linear backwards;animation-delay:inherit}
@keyframes card-flip{
  0%{transform:translateY(-16px) rotate(var(--tilt,0deg)) scaleX(1)}
  50%{transform:translateY(-26px) rotate(var(--tilt,0deg)) scaleX(0)}
  78%{transform:translateY(2px) rotate(var(--tilt,0deg)) scaleX(1.06)}
  100%{transform:translateY(0) rotate(var(--tilt,0deg)) scaleX(1)}}
@keyframes card-back{0%,49%{opacity:1}51%,100%{opacity:0}}

/* 言い放つ: 画面揺れ・ひるみ・吹き出しひび割れ */
main.fx-shake{overflow:hidden;overflow:clip}
main.fx-shake>*{animation:main-shake .28s linear}
@keyframes main-shake{0%{translate:0 0}15%{translate:-6px 3px}35%{translate:5px -3px}55%{translate:-4px 2px}75%{translate:2px -1px}100%{translate:0 0}}
#opponent.fx-flinch{animation:flinch .52s cubic-bezier(.2,.8,.3,1)}
@keyframes flinch{
  0%{translate:0 0;rotate:0deg;scale:1;filter:drop-shadow(5px 6px 0 #302c2018) brightness(1)}
  10%{translate:-24px 6px;rotate:-7deg;scale:.9 1.05;filter:drop-shadow(5px 6px 0 #302c2018) brightness(4) saturate(0)}
  30%{translate:-18px 4px;rotate:-5deg;scale:.93;filter:drop-shadow(5px 6px 0 #302c2018) brightness(1.5) saturate(.5)}
  100%{translate:0 0;rotate:0deg;scale:1;filter:drop-shadow(5px 6px 0 #302c2018) brightness(1)}}
.enemy-bubble.fx-crack{animation:bubble-pop .5s ease-out}
.enemy-bubble.fx-crack:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60' preserveAspectRatio='none'%3E%3Cpath d='M48 0 L44 14 L54 24 L46 36 L56 46 L50 60 M44 14 L30 20 M54 24 L72 22 M46 36 L28 42 M56 46 L74 50' fill='none' stroke='%2337372b' stroke-width='2' stroke-linejoin='bevel' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");animation:crack-in .5s ease-out both}
@keyframes bubble-pop{0%{scale:1;rotate:0deg}15%{scale:1.12;rotate:-2.5deg}30%{scale:.95;rotate:2.5deg}48%{scale:1.05;rotate:-1deg}100%{scale:1;rotate:0deg}}
@keyframes crack-in{0%{opacity:0}15%{opacity:1}100%{opacity:1}}

/* 結果ダイアログはポンと出る */
#result-dialog[open]{animation:pop-in .34s cubic-bezier(.2,1.2,.4,1)}
#result-image:not([hidden]),#result-fallback:not([hidden]){animation:pop-in .38s cubic-bezier(.2,1.2,.4,1) both}
@keyframes pop-in{from{opacity:0;scale:.82}to{opacity:1;scale:1}}

@media(prefers-reduced-motion:reduce){
  .card.dealing,.card.dealing:after,.board-tile.fx-place,.board-tile.fx-hit,main.fx-shake>*,#opponent.fx-flinch,.enemy-bubble.fx-crack,.enemy-bubble.fx-crack:before,.drag-ghost,.drag-ghost.sucked,#result-dialog[open],#result-image:not([hidden]),#result-fallback:not([hidden]){animation:none!important}
  .card.lifting,.board-tile.lifting,.particle-source.lifting,.drag-ghost{translate:none;rotate:none;scale:none}
  .card,.board-tile,.particle-source{transition:none}
  .sentence.fx-launched{opacity:1}
}

/* ===== シェア結果「一撃の構図」（2026-10-22）: 1200x900基準の百分率配置。PNGと同じレイアウト値 ===== */
#result-dialog[open]{animation:none}
.share-stage{--u:.08333cqw;position:relative;container-type:inline-size;aspect-ratio:4/3;width:min(100%,calc((100vh - 170px)*var(--ar,1.333)));width:min(100%,calc((100dvh - 170px)*var(--ar,1.333)));overflow:hidden;background:#f6f3e8;border:1px solid #777b62;box-shadow:0 3px 12px #302a201a;user-select:none}
.share-stage>*{position:absolute}
.st-svg{left:0;top:0;width:100%;height:100%;pointer-events:none}
.st-opp{aspect-ratio:1;object-fit:contain;rotate:-9deg}
.st-title{left:3%;top:2%;font-weight:900;color:#27251f;line-height:1.2;white-space:nowrap}
.st-title span{color:#b74227}
.st-quote{display:flex;align-items:center;font-weight:800;line-height:1.4;color:#27251f}
.st-sfx{font-weight:900;line-height:1;color:#e8541a;white-space:nowrap;rotate:9deg;translate:-50% -50%;-webkit-text-stroke:calc(var(--u)*9.6) #fff;paint-order:stroke fill}
.st-line{left:0;width:100%;margin:0;text-align:center;font-weight:900;line-height:1.18;color:#b01f12;white-space:nowrap;rotate:-3deg;translate:0 -50%;-webkit-text-stroke:.1em #fff;paint-order:stroke fill}
.st-band{overflow:hidden}
.st-tile{position:absolute}
.st-tile-in{position:absolute;inset:0;display:flex;align-items:center;border:solid #2e3326;font-weight:900;color:#1f241a;line-height:1;box-sizing:border-box}
.st-tile.word .st-tile-in{background:#fffaf0}
.st-tile.particle .st-tile-in{background:#ffc83d}
.st-tile-in span{display:block;text-align:center;white-space:nowrap}
.st-burst,.st-bubble{transform-box:view-box;transform-origin:50% 54%}

.share-stage.play{animation:st-hit .28s .19s linear}
.share-stage.play .st-rays{animation:st-fade .3s .1s both}
.share-stage.play .st-burst{animation:st-burst .42s cubic-bezier(.2,1.3,.4,1) both}
.share-stage.play .st-sfx{animation:st-sfx .34s .16s cubic-bezier(.2,1.5,.4,1) both}
.share-stage.play .st-line{animation:st-slam .42s cubic-bezier(.2,1.2,.4,1) both}
.share-stage.play .st-opp{animation:st-flinch .7s .22s cubic-bezier(.2,.8,.3,1) both}
.share-stage.play .st-drop{animation:st-fade .25s calc(.3s + var(--i)*.07s) both}
.share-stage.play .st-crack{stroke-dasharray:1;animation:st-crack .3s .32s ease-out both}
.share-stage.play .st-tile{animation:tile-in .26s calc(.45s + var(--i)*var(--step,.07s)) cubic-bezier(.2,1.4,.4,1) both}
@keyframes st-fade{from{opacity:0}to{opacity:1}}
@keyframes st-burst{0%{scale:.2;opacity:0}60%{scale:1.1;opacity:1}100%{scale:1;opacity:1}}
@keyframes st-sfx{0%{scale:2.2;opacity:0}60%{scale:.9;opacity:1}100%{scale:1;opacity:1}}
@keyframes st-slam{0%{scale:2.8;opacity:0}55%{scale:.94;opacity:1}100%{scale:1;opacity:1}}
@keyframes st-hit{0%{translate:0 0}25%{translate:-.8% .5%}50%{translate:.7% -.4%}75%{translate:-.3% .2%}100%{translate:0 0}}
@keyframes st-flinch{0%{translate:0 0;rotate:3deg;scale:1;filter:brightness(1)}14%{translate:calc(var(--u)*-36.0) calc(var(--u)*7.2);rotate:-20deg;scale:.9;filter:brightness(4) saturate(0)}45%{translate:calc(var(--u)*-19.2) 0;rotate:-13deg;scale:.95;filter:brightness(1.3)}100%{translate:0 0;rotate:-9deg;scale:1;filter:brightness(1)}}
@keyframes st-crack{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes tile-in{0%{opacity:0;scale:1.5;translate:0 calc(var(--u)*-30.0)}100%{opacity:1;scale:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.share-stage.play,.share-stage.play *{animation:none!important}}

/* 固定札の5群タブ（代表文字）。同時に出すのは1群だけにして一画面化を保つ */
.ptabs{display:flex;gap:2px;align-items:center;margin-right:6px;padding-right:8px;border-right:2px solid #8f9477}
.ptab{min-height:28px;min-width:28px;padding:1px 6px;font-size:14px;font-weight:800;border:1px solid #6f765e;border-radius:14px;background:#d8d5bb;color:#373a2d;box-shadow:none}

.ptab[aria-pressed=true]{background:#373a2d;border-color:#373a2d;color:#fff9e9}
@media(max-width:360px){.ptab{min-height:25px;min-width:24px;padding:0 4px;font-size:13px}.ptabs{margin-right:3px;padding-right:4px}}
#particles{align-content:flex-start;align-items:center}

/* 不具合修正（2026-10-23）: 盤面の札の重ね順(z-index)がメニューを突き抜けないよう、盤面で重なりの文脈を閉じる */
#board-scroll,#board{isolation:isolate}
#board{z-index:0}
/* 言い放つ: 単語札が無い間は「まだ」の見た目だが、押せば手札が跳ねて知らせる（disabledにしない） */
#say[aria-disabled=true]{opacity:.4;cursor:default}

.card.nudge{animation:card-nudge .5s var(--nd,0ms) cubic-bezier(.3,1.6,.5,1) both}
@keyframes card-nudge{0%{translate:0 0}35%{translate:0 -12px}70%{translate:0 2px}100%{translate:0 0}}
@media(prefers-reduced-motion:reduce){.card.nudge{animation:none}}

/* hover装飾はマウス等のhover可能な端末だけ（iOSのタップ後の張り付き防止） */
@media (hover:hover) and (pointer:fine){
button:hover:not(:disabled){background:#e3e9d4}
.card:hover:not(:disabled){transform:translateY(-10px) rotate(0);background:#fffdf4}
button.primary:hover:not(:disabled){background:#913019;border-color:#913019;color:#fff9e9}
.board-tile:hover:not(:disabled){background:#fff9e6}
.particle-tile:hover:not(:disabled){background:#ffe8a2}
.particle-source:hover:not(:disabled){background:#fff0b9}
.card:hover:not(:disabled){transform:translateY(-4px)}
.ptab:hover:not(:disabled){background:#e6e3cb}
#say[aria-disabled=true]:hover{background:#b74125;border-color:#b74125}
}

/* iOS: ダブルタップ拡大を抑える（ドラッグ対象の touch-action:none は個別指定のまま維持） */
button,summary,#board-scroll,#particles,.ptab,#card-actions{touch-action:manipulation}
.board-tile,.hand .card,.particle-source{touch-action:none}

/* 固定札のタブ: 短い言葉の見出し5つを1行に（320pxでも収まる幅・高さ34px）。選択中=濃色+赤い下線、未選択=ボタンらしい凸面 */
.ptabs{flex:0 0 100%;display:flex;gap:0;margin:0;padding:0;border:1px solid #6f765e;border-right:1px solid #6f765e;border-radius:8px;overflow:hidden;background:#e8e3cd}
.ptab{flex:1 1 0;min-width:0;min-height:34px;padding:2px 2px;border:0;border-right:1px solid #aeb094;border-radius:0;background:#efe9d2;color:#373a2d;font-size:13px;font-weight:700;line-height:1.1;white-space:nowrap;box-shadow:inset 0 -3px 0 #cfc9ac;cursor:pointer}
.ptab:last-child{border-right:0}
.ptab[aria-pressed=true],.ptab[aria-pressed=true]:hover:not(:disabled){background:#373a2d;color:#fff9e9;box-shadow:inset 0 -4px 0 #d9532f}
@media(min-width:420px){.ptab{font-size:14px}}
@media(max-width:360px){.ptab{font-size:12.5px;min-width:0;padding:2px 1px}.ptabs{margin:0}}

/* 手札の長い札: CJKを勝手に切らせない。改行は <wbr> の位置だけ（js: board.breakWord）。収まる語は改行しない */
#hand .card>span{display:block;max-width:100%;text-align:center;word-break:keep-all;overflow-wrap:normal;line-break:strict;text-wrap:balance}

/* ドラッグ中の盤面の「引き」: 札の位置・幅・文字を短くなめらかに縮小（reduced-motionでは即時） */
#board.zooming .board-tile{transition:left .15s ease,width .15s ease,font-size .15s ease,box-shadow .12s}
#board.zooming .board-tile span{transition:flex-basis .15s ease,width .15s ease}
@media(prefers-reduced-motion:reduce){#board.zooming .board-tile,#board.zooming .board-tile span{transition:none}}

/* 遊び方・メニューの構成（見出し→番号付き5手順→ルール要点→操作のコツ(折りたたみ)→操作ボタン2行→補助） */
.menu-body{text-align:left}
.menu .menu-lead{margin:2px 0 10px;font-size:15px;font-weight:800;line-height:1.5}
.menu .menu-h{margin:0 0 6px;font-size:13px;font-weight:800;letter-spacing:.08em;color:#8b4229}
.menu .steps{list-style:none;counter-reset:step;margin:0 0 10px;padding:0}
.menu .steps li{counter-increment:step;display:flex;gap:10px;align-items:flex-start;margin:0 0 9px;font-size:15px;line-height:1.5}
.menu .steps li:before{content:counter(step);flex:0 0 22px;height:22px;margin-top:1px;border-radius:50%;background:#b74125;color:#fff9e9;font-size:13px;font-weight:800;line-height:22px;text-align:center}
.menu .rules{margin:0 0 6px;padding:8px 10px 8px 26px;background:#f2ecd6;border-radius:6px;font-size:13px;line-height:1.6;color:#4d513f}
.menu .rules li{margin:2px 0}
.menu .tips{margin:8px 0;font-size:13px}
.menu .tips summary{min-height:32px;padding:4px 2px;text-align:left;font-weight:700;color:#373a2d;cursor:pointer}
.menu .tips ul{margin:2px 0 6px;padding-left:24px;line-height:1.6;color:#4d513f}
.menu .menu-row{display:flex;gap:8px;margin:8px 0}
.menu .menu-row button{flex:1 1 0;min-width:0;margin:0;padding:6px 8px;font-size:14px}
.menu .menu-foot{margin-top:12px;padding-top:10px;border-top:1px solid #cbc6aa;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.menu .menu-foot button{margin:0;min-height:34px;padding:4px 10px;font-size:13px}
.menu .menu-foot small{display:block;margin:0;font-size:12px;color:#6a6c5b;flex:1 1 140px}
.menu .menu-foot .layer-list{flex:1 1 100%;margin:2px 0 0}

/* 初回の配札待ち: 裏向きの山（最初の操作でめくる）。軽く揺れて、押せることを示す */
.card.facedown{color:transparent}
.card.facedown:after{opacity:1}
.card.facedown{animation:card-wait 1.8s calc(var(--wi,0)*90ms) ease-in-out infinite}
@keyframes card-wait{0%,100%{translate:0 0}50%{translate:0 -4px}}
@media(prefers-reduced-motion:reduce){.card.facedown{animation:none}}

/* 改名「悪口重ねてぶつけんぞ」: 見出しは長くなるので折り返さず、狭い幅では少し小さく */
header h1{white-space:nowrap;flex:0 1 auto;min-width:0}
header h1 span{color:#b74227}
@media(max-width:420px){header h1{font-size:19px}.menu summary{font-size:12px;white-space:nowrap}}
@media(max-width:360px){header h1{font-size:17px}.menu summary{padding:5px 2px}}

/* 結果ダイアログのボタン: シェア／画像を保存／Xで投稿／次の相手へ を2列に並べる */
.result-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.result-buttons button{min-width:0;padding:8px 6px;white-space:nowrap}
.result-buttons button[hidden]{display:none}

/* 全員合計カウンター（結果ダイアログ下部の小さな1行・メニュー内） */
.result-count{margin:6px 0 0;text-align:center;font-size:clamp(10px,3.4vw,12px);color:#6a6c5b;line-height:1.4;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.result-count:empty{display:none}
.menu .menu-foot #menu-count{flex:1 1 100%;margin:0;font-size:12px;color:#4d513f}

/* ===== 上部レイアウトの整理（2026-10-23）: 相手の領域(.encounter)と自分の吹き出し(.reply)を余白＋仕切り線で分け、
   吹き出しはシルエットの口元から出る位置関係を、どの幅でも保つ（flex配置・しっぽはシルエットの頭へ向ける） ===== */
.encounter{--opp:clamp(96px,16dvh,150px);--tail:calc(var(--opp)*.2);display:flex;align-items:flex-start;justify-content:center;gap:0;height:auto;min-height:0;overflow:hidden;border-bottom:0;padding:6px 8px 0}
.encounter>*:not(.scene-lines){position:relative;z-index:1}
#opponent{position:relative;left:auto;bottom:auto;transform:none;flex:0 0 auto;width:var(--opp);height:auto;aspect-ratio:1176/1338;object-fit:contain;margin:0}
.enemy-bubble{position:relative;right:auto;top:auto;flex:0 1 560px;width:auto;min-width:0;max-width:none;margin:calc(var(--opp)*1.138*.463 - var(--tt,10px) - 11px) 0 8px 0;padding:10px 16px;border-radius:18px}
.enemy-bubble:after{left:calc(-1*var(--tail));top:var(--tt,10px);bottom:auto;border-width:9px var(--tail) 9px 0;border-style:solid;border-color:transparent #37372b transparent transparent}
.divider{height:0;margin:10px 4px 10px;border:0;border-top:3px double #7a7b5e;opacity:.85}
.reply{margin:0 auto}
@media(max-width:700px){.encounter{--opp:92px;padding:4px 6px 0}.divider{margin:8px 2px}.enemy-bubble{padding:8px 12px;border-radius:14px}}
@media(max-width:360px){.encounter{--opp:72px}.enemy-bubble{padding:6px 10px}.divider{margin:6px 2px}}

/* 背の低い画面（375×640 など）でも一画面に収める追加の圧縮: 手札・返答欄・盤面・相手の高さと余白を詰める */
@media(max-width:700px) and (max-height:680px){
  main{padding-top:4px;padding-bottom:2px}
  header{min-height:30px}
  .menu summary{min-height:30px;padding:3px 5px}
  .encounter{--opp:74px;--tt:22px;padding-top:2px}
  .enemy-bubble{padding:6px 11px}.enemy-bubble p{font-size:14px;line-height:1.4}
  .divider{margin:5px 2px}
  .reply{padding:5px 10px}
  .sentence{min-height:24px;line-height:1.3}
  .reply-actions button{min-height:28px;padding:2px 10px}
  .ptab{min-height:28px}
  #particles{margin:4px 0 4px}
  .particle-source{min-height:26px}
  #board{height:112px}
  .hand{margin-top:4px;padding:2px 4px 3px;gap:4px}
  .card{min-height:46px;padding:3px 3px}
  .player-area{padding-bottom:3px}
  .hand-foot{margin:0}
}

/* ===== スクロールモード（2026-10-23）: 文字を大きくして一画面に収まらないとき。縮めて押し込まず、縦スクロールを許し、
   「言い放つ」＋一言の1行プレビューを画面下端の固定バーに出す。並びは同じ（相手→自分の吹き出し→固定札→盤面→手札）。 ===== */
html.scroll-mode main{padding-bottom:calc(var(--bar-h,64px) + 14px)}
html.scroll-mode .reply{position:fixed;left:0;right:0;bottom:0;width:auto;max-width:none;margin:0;z-index:60;display:flex;align-items:center;gap:10px;padding:6px 12px calc(6px + env(safe-area-inset-bottom,0px));border-width:2px 0 0;border-radius:14px 14px 0 0;box-shadow:0 -3px 12px #302a2024}
html.scroll-mode .sentence{flex:1 1 auto;min-width:0;min-height:0;max-height:none;margin:0;padding:0;font-size:16px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.scroll-mode .sentence.empty{font-size:14px}
html.scroll-mode .reply-actions{flex:0 0 auto;display:block}
html.scroll-mode .reply-actions button{min-height:40px;padding:6px 14px;white-space:nowrap}
@keyframes hint-glow{0%,100%{box-shadow:0 0 0 0 #ffd54a00}40%{box-shadow:0 0 0 6px #ffd54acc,0 0 22px 8px #ffd54a99}}
.hand.hint-glow{border-radius:16px;animation:hint-glow 1.1s ease-in-out 2}
@media(prefers-reduced-motion:reduce){.hand.hint-glow{animation:none;box-shadow:0 0 0 4px #ffd54acc}}

/* 超狭幅（ブラウザ拡大200%のスマホなど）: 重ならないように折り返す */
@media(max-width:300px){
  header{flex-wrap:wrap}
  header h1{font-size:15px}
  .encounter{--opp:56px}
  .ptabs{flex-wrap:wrap}
  .ptab{flex:1 1 30%}
  .hand .card,.card{width:calc((100% - 5px)/2)}
  .result-buttons{grid-template-columns:1fr}
}

/* 初回の案内（付箋風・黄色系）。操作の邪魔をしない: pointer-events:none（×だけ押せる）・ドラッグ中は薄く */
.ob-tip{position:fixed;z-index:4;display:flex;flex-direction:column;align-items:center;gap:1px;max-width:min(240px,calc(100vw - 16px));padding:5px 22px 5px 10px;background:#fff1a8;border:1.5px solid #d4a72c;border-radius:4px;box-shadow:2px 3px 0 #8a6a1a33;color:#4a3b0a;font-size:13px;font-weight:700;line-height:1.4;text-align:center;rotate:-1.2deg;pointer-events:none;transition:opacity .2s}
.ob-tip[hidden]{display:none}
.ob-tip.dim{opacity:.22}
.ob-tip .ob-arrow{font-size:15px;line-height:1;color:#a87c0a;animation:ob-bob 1.1s ease-in-out infinite}
.ob-tip .ob-arrow:empty{display:none}
.ob-tip[data-stage="3"] .ob-arrow-bottom{animation-name:ob-bob-down}
.ob-tip .ob-close{position:absolute;top:0;right:0;width:26px;height:26px;min-height:26px;padding:0;border:0;background:transparent;color:#7a5a0a;font-size:17px;line-height:1;pointer-events:auto;cursor:pointer;touch-action:manipulation}
@keyframes ob-bob{0%,100%{translate:0 0}50%{translate:0 -4px}}
@keyframes ob-bob-down{0%,100%{translate:0 0}50%{translate:0 4px}}
@media(prefers-reduced-motion:reduce){.ob-tip .ob-arrow{animation:none}.ob-tip{transition:none}}
.menu .menu-foot #ob-again{flex:1 1 100%;margin:0;min-height:34px;font-size:13px}
.ob-tip .ob-text{word-break:keep-all;overflow-wrap:normal}
.ob-tip[data-stage="2"]{max-width:min(300px,calc(100vw - 16px))}
.ob-tip.narrow{max-width:196px}

/* 相手と手札をまとめて引き直すボタン（アイコンのみ）。手札の右下の角（手札と重ならない行）。スクロールモードでは固定バーの右端 */
.hand-foot{display:flex;justify-content:flex-end;margin:2px 0 0}
#redraw{width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;display:grid;place-items:center;background:#fff9e9;border:1px solid #777d65;color:#5a644b;touch-action:manipulation}
#redraw svg{display:block;transform-origin:50% 50%}
#redraw.spin svg{animation:redraw-spin .55s cubic-bezier(.3,.7,.3,1)}
@keyframes redraw-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){#redraw.spin svg{animation:none}}
.spoken .hand-foot{opacity:.5}
html.scroll-mode .hand-foot{height:0;margin:0}
html.scroll-mode #redraw{position:fixed;right:10px;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:61}
html.scroll-mode .reply{padding-right:72px}
@media(hover:hover) and (pointer:fine){#redraw:hover:not(:disabled){background:#e3e9d4}}