body.choosing .slot.acting .card-wrap { filter: none; }
body.choosing .slot.acting .card { box-shadow: 0 0 0 1px var(--metal-edge), 0 0 0 3px var(--gold-glow), 0 0 18px var(--gold-glow); }
body.choosing .player-row.targetable { cursor: pointer; }

.d-ab .auto { font-size: 12px; font-weight: 700; padding: 0 7px; border-radius: 999px; border: 1px solid var(--ink-soft); color: var(--ink-soft); white-space: nowrap; margin-left: -4px; }
.d-ab .mark.atk { background: #6b5a3a; color: #fff; }

.pk-count { font-weight: 700; font-size: 13px; margin-left: 4px; color: var(--ink-soft); }
.pk-hands { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.pk-hands button { min-height: 40px; padding: 0 12px; border-radius: 999px; border: 2px solid #ff4d6a; background: #fff; font-weight: 800; }
.picker.bar .pk-go { min-height: 40px; padding: 0 18px; border-radius: 999px; font-weight: 800; flex: none; }
.picker.bar.choice { border: 2px solid #ffd257; }

.waiting { position: fixed; z-index: 27; left: 50%; top: 52px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  max-width: calc(100vw - 16px); padding: 8px 14px; border-radius: 14px; background: rgba(20, 32, 30, .94); color: #fff; font-size: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.waiting[hidden] { display: none; }
.waiting b { color: #ffd257; }
.waiting button { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(255,255,255,.15); color: #fff; font-weight: 700; }
@media (max-width: 1023px) { .waiting { top: auto; bottom: 80px; left: 8px; right: 8px; transform: none; } }

.overlay[hidden] { display: none; }
.start-choices { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.start-choices button { margin-top: 0 !important; }

.card-wrap.hidden-card .inner { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.card-wrap.hidden-card .hidden-note { font-size: 12px; color: var(--ink-soft); }

.field.extra { grid-template-columns: repeat(var(--slots, 6), minmax(0, 1fr)); }

.card-wrap.fx-heal .card { box-shadow: 0 0 0 1px var(--metal-edge), 0 0 0 4px #4ade80, 0 0 26px #4ade80; transition: box-shadow .2s; }
.player-row.fx-heal .hpbox { box-shadow: 0 0 0 3px #4ade80, 0 0 20px #4ade80; }
.card-wrap.fx-status .card { box-shadow: 0 0 0 1px var(--metal-edge), 0 0 0 4px #a78bfa, 0 0 22px #a78bfa; }
.fx-float.heal { background: linear-gradient(180deg, #6ee7a0, #16a34a 60%, #0b5d2a); box-shadow: 0 0 0 3px #fff, 0 0 0 5px #0b5d2a, 0 6px 18px rgba(0, 80, 30, .5); }
.fx-float.label { font-size: 20px; background: linear-gradient(180deg, #8b7cf6, #5b45d6 60%, #35248f); box-shadow: 0 0 0 2px #fff, 0 0 0 4px #35248f; }
.fx-float.small { font-size: 15px; padding: 3px 9px 4px; }
.fx-beam.heal { background: linear-gradient(90deg, rgba(200, 255, 220, .2), #d1fae5 40%, #34d399 85%, #059669); box-shadow: 0 0 10px 3px rgba(52, 211, 153, .8); }
.fx-orb.heal { background: radial-gradient(circle at 40% 35%, #fff 0 18%, #a7f3d0 34%, #10b981 62%, rgba(16, 185, 129, 0) 72%); box-shadow: 0 0 18px 8px rgba(16, 185, 129, .7); }
.fx-beam.mod, .fx-beam.soft { background: linear-gradient(90deg, rgba(220, 210, 255, .2), #ddd6fe 40%, #8b5cf6 85%, #6d28d9); box-shadow: 0 0 10px 3px rgba(139, 92, 246, .75); }
.fx-orb.mod, .fx-orb.soft { background: radial-gradient(circle at 40% 35%, #fff 0 18%, #ddd6fe 34%, #8b5cf6 62%, rgba(139, 92, 246, 0) 72%); box-shadow: 0 0 18px 8px rgba(139, 92, 246, .6); }

.fx-ctl { position: fixed; z-index: 36; right: 12px; bottom: 12px; display: flex; gap: 6px; }
.fx-ctl[hidden] { display: none; }
.fx-ctl button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 2px solid #fff; background: rgba(20, 32, 30, .9); color: #fff; font-weight: 800; font-size: 14px; box-shadow: 0 4px 12px rgba(0,0,0,.35); }
.fx-ctl button.on { background: #ffd257; color: #3b2600; border-color: #8a5a00; }
@media (max-width: 1023px) { .fx-ctl { bottom: calc(14px + env(safe-area-inset-bottom)); right: 8px; left: 8px; justify-content: center; } .fx-ctl button { flex: 1; min-height: 44px; padding: 0 6px; } .fx-float.label { font-size: 13px; } .fx-float.small { font-size: 11px; } }

#cancel-top:disabled, #cancel-mobile:disabled, #clear-focus:disabled, #hint-cancel:disabled { opacity: .45; cursor: default; }

.fx-announce { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); z-index: 2; pointer-events: none; text-align: center; white-space: nowrap;
  padding: 10px 26px 9px; border-radius: 14px; color: #fff; --an: #2f6fd6; --an2: #163f8a;
  background: linear-gradient(180deg, color-mix(in srgb, var(--an) 92%, #fff), var(--an2)); box-shadow: 0 0 0 2px rgba(255,255,255,.85), 0 0 0 4px var(--an2), 0 10px 28px rgba(0,0,0,.45);
  animation-name: fxAnnounce; animation-timing-function: ease-out; animation-fill-mode: forwards; }
.fx-announce.k-ultimate { --an: #d4423d; --an2: #7d1414; }
.fx-announce.k-passive { --an: #2f9e8f; --an2: #12584f; }
.fx-announce.k-trait { --an: #c9842a; --an2: #6e4310; }
.fx-announce.k-special { --an: #8b5cf6; --an2: #4c1d95; }
.fx-announce.k-combo { --an: #d6457f; --an2: #7a1840; }
.fx-announce.k-autoAttack, .fx-announce.k-attack { --an: #5b6474; --an2: #262b35; }
.fx-announce.k-reflect, .fx-announce.k-status { --an: #6d5bd0; --an2: #33287a; }
.fx-an-main { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.fx-an-kind { font-size: 15px; font-weight: 800; padding: 1px 9px; border-radius: 999px; background: rgba(255,255,255,.22); }
.fx-an-name { font-size: 30px; font-weight: 900; letter-spacing: .02em; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.fx-an-sub { font-size: 13px; opacity: .92; margin-top: 2px; }
.fx-an-sub b { margin-right: 6px; padding: 0 6px; border-radius: 6px; background: rgba(0,0,0,.25); font-weight: 800; }
.fx-announce.foe .fx-an-sub b { background: #b4314a; }
@keyframes fxAnnounce { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.85); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); } 25% { transform: translate(-50%, -50%) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -54%) scale(1); } }
@media (max-width: 1023px) { .fx-announce { padding: 7px 14px 6px; max-width: calc(100vw - 24px); white-space: normal; } .fx-an-name { font-size: 21px; } .fx-an-kind { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .fx-announce { animation-name: fxFade; } }

.sidebar.has-recent { grid-template-rows: minmax(0, 1fr) auto 128px; }
.sidebar.has-recent.log-collapsed { grid-template-rows: minmax(0, 1fr) auto 36px; }
@media (min-width: 1024px) and (max-height: 780px) { .sidebar.has-recent { grid-template-rows: minmax(0, 1fr) auto 96px; } }
@media (min-width: 1700px) { .sidebar.has-recent { grid-template-rows: minmax(0, 1fr) auto 160px; } }
.recent { display: flex; flex-direction: column; overflow: hidden; padding: 6px 10px 6px; }
.recent-title { font-size: 12px; font-weight: 800; color: var(--ink-soft); display: flex; gap: 8px; align-items: baseline; }
.recent-title small { font-weight: 500; font-size: 11px; }
#recent-list, .sheet-recent { list-style: none; margin: 2px 0 0; padding: 0; max-height: 92px; overflow-y: auto; font-size: 13px; line-height: 1.45; }
#recent-list li, .sheet-recent li { padding: 1px 0 1px 8px; border-left: 3px solid #9aa3ad; margin-bottom: 2px; color: var(--ink); }
#recent-list li:first-child { font-weight: 700; }
#recent-list li.mine, .sheet-recent li.mine { border-left-color: #2f8ee0; }
#recent-list li.foe, .sheet-recent li.foe { border-left-color: #d23246; }
.sheet-recent { max-height: none; padding: 0 16px 10px; font-size: 15px; }


.fx-an-kind { white-space: nowrap; flex: none; }

.field.flanks { --fl-l: .26fr; --fl-r: .26fr; grid-template-columns: minmax(0, var(--fl-l)) repeat(5, minmax(0, 1fr)) minmax(0, var(--fl-r)); }
.field.flanks.fl-l { --fl-l: .62fr; } .field.flanks.fl-r { --fl-r: .62fr; }
.slot.flank.empty { border-width: 1px; border-style: dotted; opacity: .45; background: transparent; font-size: 12px; }
.slot.flank.empty small { position: static; }
.slot.flank.filled .name-plate { font-size: 12px; }
@media (max-width: 1023px) { .field.flanks { --fl-l: .16fr; --fl-r: .16fr; } .field.flanks.fl-l { --fl-l: .45fr; } .field.flanks.fl-r { --fl-r: .45fr; } .slot.flank.empty small { font-size: 9px; } }

.d-ab .auto.hold { border-style: dashed; }

.waiting.random { border: 2px solid #ffd257; }

.notice { position: fixed; z-index: 45; left: 50%; top: 4px; transform: translateX(-50%); display: flex; gap: 8px; align-items: center; max-width: calc(100vw - 16px);
  padding: 6px 8px 6px 14px; border-radius: 12px; background: #fff3cd; color: #5a4300; border: 2px solid #d99a17; font-size: 13px; font-weight: 700; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.notice button { min-width: 36px; min-height: 36px; border-radius: 50%; border: 1px solid #8a5a00; background: #fff; font-size: 18px; }

.link-status { position: fixed; z-index: 30; right: 8px; top: 4px; padding: 3px 10px; border-radius: 999px; background: rgba(20, 32, 30, .85); color: #fff; font-size: 12px; font-weight: 700; }
.link-status[hidden] { display: none; }
.link-status.bad { background: #b4314a; }

.field.cs .ab, .field.cs .ab em { font-size: clamp(11px, 8.4cqw, 20px); letter-spacing: -.03em; }
@media (max-width: 1023px) { .field.cs .ab, .field.cs .ab em { font-size: 10.5px; } }

.turn-strip { min-width: 0; }
.turn-strip #turn-owner { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.turn-strip .end, .turn-strip #cancel-top { flex: none; }
.turn-strip .skill-state { flex: none; }

.player-row { position: relative; }
.player-row .rand-next { position: absolute; z-index: 2; right: 10px; top: -9px; font-size: 12px; font-weight: 800; padding: 1px 8px; border-radius: 999px; background: #ffd257; color: #3b2600; white-space: nowrap; box-shadow: 0 1px 4px rgba(0,0,0,.3); pointer-events: none; }
@media (max-width: 1023px) { .player-row .rand-next { font-size: 9.5px; padding: 0 5px; top: -7px; right: 6px; } }
.turn-strip #cancel-top { white-space: nowrap; }
.start-notice { margin: 4px 0 6px !important; padding: 8px 10px; border-radius: 10px; background: #fff3cd; color: #5a4300 !important; font-size: 13px !important; text-align: left; border: 1px solid #d99a17; }
.notice.compact { top: auto; bottom: 8px; left: 8px; transform: none; z-index: 20; font-size: 11px; max-width: 320px; }

.hand-zone { position: relative; overflow: hidden; }
.hand { scroll-snap-type: x proximity; scrollbar-width: thin; overscroll-behavior-x: contain; }
.hand::-webkit-scrollbar { height: 5px; } .hand::-webkit-scrollbar-thumb { background: rgba(0,0,0,.25); border-radius: 3px; }
.hand-card { scroll-snap-align: start; flex-shrink: 0; }
.hand-count { display: inline-block; min-width: 1.6em; padding: 0 4px; border-radius: 999px; background: var(--ui-fg); color: var(--ui-bg, #fff); font-size: 12px; line-height: 17px; text-align: center; }
.hand-zone.overflow:not(.at-end)::after { content: "▶"; position: absolute; right: 0; top: 0; bottom: 0; width: 34px; display: grid; place-items: center; padding-left: 10px;
  background: linear-gradient(90deg, rgba(255,255,255,0), var(--ui-bg, rgba(255,255,255,.9)) 70%); color: var(--ui-sub); font-size: 12px; pointer-events: none; }
@media (min-width: 1024px) { .hand-card { flex: 0 0 auto; width: clamp(128px, 12vw, 184px); min-width: 0; max-width: none; } }
@media (min-width: 1700px) { .hand-card { width: 200px; } }
@media (max-width: 1023px) { .hand-card { flex: 0 0 auto; width: 96px; min-width: 0; max-width: none; } .hand-count { font-size: 10px; line-height: 14px; } }
@media (max-width: 370px) { .hand-card { width: 86px; } }

.fx-announce.small { padding: 5px 16px 5px; top: 40%; --an: #6d5bd0; --an2: #33287a; }
.fx-announce.small .fx-an-name { font-size: 19px; }
.fx-announce.small .fx-an-sub { font-size: 12px; }
@media (max-width: 1023px) { .fx-announce.small .fx-an-name { font-size: 14px; } .fx-announce.small .fx-an-sub { font-size: 10.5px; } }

@media (min-width: 1024px) {
  .field.cb .ab, .field.cb .ab em { font-size: clamp(13px, 10.6cqw, 25px); }
  .field.cb .mark { width: clamp(16px, 11cqw, 26px); height: clamp(16px, 11cqw, 26px); }
  .field .badge.hp b { font-size: clamp(16px, 13cqw, 32px); }
  .field.cb .art { min-height: 6cqw; }
}
@media (min-width: 1280px) { .layout { grid-template-columns: minmax(0, 1fr) clamp(380px, 30vw, 600px); } }
@media (min-width: 1280px) and (max-height: 780px) { .layout { grid-template-columns: minmax(0, 1fr) clamp(380px, 30vw, 600px); } }
@media (min-width: 1024px) and (max-width: 1279px) { .turn-strip .latest { display: none; } }
@media (max-width: 1023px) {
  .field.flanks.fl-l { --fl-l: .55fr; } .field.flanks.fl-r { --fl-r: .55fr; }
  .slot.flank.filled .name-plate, .slot.flank.filled .labels, .slot.flank.filled .abilities, .slot.flank.filled .hpline, .slot.flank.filled .badge.atk, .slot.flank.filled .emblem { display: none; }
  .slot.flank.filled .art { flex: 1 1 auto; min-height: 0; }
  .slot.flank.filled .initial { display: grid !important; place-items: center; font-size: 15px; font-weight: 900; }
  .slot.flank.filled .badge.hp { padding: 1px 3px; } .slot.flank.filled .badge.hp small { display: none; } .slot.flank.filled .badge.hp b { font-size: 12px; }
  .slot.flank.filled .foot-row { justify-content: center; }
}

.turn-count.near-end { color: #b4314a; font-weight: 800; }
@media (max-width: 1023px) { .turn-strip .turn-count.near-end { display: inline !important; font-size: 10.5px; } }

body.playing .layout { height: calc(100dvh - 26px - var(--online-bar-h, 0px)); }
@media (min-width: 1700px) { body.playing .layout { height: calc(100dvh - 28px - var(--online-bar-h, 0px)); } }
@media (max-width: 1023px) { body.playing .layout { height: calc(100dvh - 72px - var(--online-bar-h, 0px)); } }

.fx-announce.stay { animation-name: fxAnnIn; transition: left .3s ease, top .3s ease, padding .3s ease; }
@keyframes fxAnnIn { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.85); } 60% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes fxAnnInR { 0% { opacity: 0; transform: translate(-50%, -50%); } 100% { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes fxAnnOut { 0% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.96); } }
.fx-announce.out { animation: fxAnnOut .25s ease-in forwards !important; }
.fx-announce.dock { display: flex; align-items: center; justify-content: center; gap: 4px 12px; flex-wrap: wrap; padding: 4px 18px; border-radius: 12px; max-width: min(62%, 640px); z-index: 3; }
.fx-announce.dock .fx-an-name { font-size: 21px; }
.fx-announce.dock .fx-an-kind { font-size: 12px; }
.fx-announce.dock .fx-an-sub { font-size: 12px; margin-top: 0; }
.fx-announce.small.dock .fx-an-name { font-size: 16px; }
.fx-an-next { flex-basis: 100%; margin-top: 3px; font-size: 13px; font-weight: 900; color: #ffd257; text-shadow: 0 1px 0 rgba(0,0,0,.5); animation: fxNextBlink 1.1s ease-in-out infinite; }
.fx-announce.dock .fx-an-next { margin-top: 0; font-size: 12px; }
@keyframes fxNextBlink { 50% { opacity: .45; } }
@media (max-width: 1023px) {
  .fx-announce.dock { max-width: calc(100vw - 16px); padding: 3px 10px; gap: 0 8px; }
  .fx-announce.dock .fx-an-name { font-size: 16px; }
  .fx-announce.dock .fx-an-kind, .fx-announce.dock .fx-an-sub { font-size: 10.5px; }
  .fx-announce.small.dock .fx-an-name { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .fx-announce.stay { animation-name: fxAnnInR; } .fx-an-next { animation: none; } }

.fx-next { position: fixed; z-index: 37; right: 12px; bottom: 68px; min-height: 54px; padding: 0 30px; border-radius: 999px; border: 2px solid #8a5a00;
  background: #ffd257; color: #3b2600; font-weight: 900; font-size: 19px; letter-spacing: .04em; box-shadow: 0 0 0 3px rgba(255,255,255,.85), 0 6px 18px rgba(0,0,0,.4); cursor: pointer; }
.fx-next[hidden] { display: none; }
body.fx-waiting .board { cursor: pointer; }
.fx-ctl button.step { white-space: nowrap; }
@media (min-width: 1024px) { .fx-ctl button { padding: 0 12px; } }
@media (max-width: 1023px) {
  .fx-next { left: 8px; right: 8px; bottom: calc(76px + env(safe-area-inset-bottom)); min-height: 50px; font-size: 17px; }
  body.fx-waiting .waiting.random { visibility: hidden; }
  .fx-ctl button { font-size: 13px; line-height: 1.15; white-space: normal; }
  .fx-ctl button.step { white-space: normal; }
}

.start-speed { margin: 10px 0 6px; padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.05); text-align: left; }
.start-speed > b { display: block; font-size: 14px; margin-bottom: 6px; }
.start-speed .sp-choices { display: flex; gap: 6px; flex-wrap: wrap; }
.start-speed button { margin: 0; flex: 1 1 auto; min-height: 44px; min-width: 64px; padding: 0 8px; white-space: nowrap; border-radius: 999px; border: 2px solid #7f8b88; background: #fff; color: #233; font-weight: 800; font-size: 14px; cursor: pointer; }
.start-speed button.on { background: #ffd257; color: #3b2600; border-color: #8a5a00; }
.start-speed small { display: block; margin-top: 6px; font-size: 12px; line-height: 1.5; color: #4a5654; }

.hp-group { display: inline-flex; align-items: center; gap: 1.2cqw; min-width: 0; }
.badge.shield { background: linear-gradient(170deg, #9fd8ff, #1f7fe0 55%, #0b3f8f); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 1px rgba(10,50,120,.55), 0 0 8px rgba(80,170,255,.6); }
.badge.shield { padding-left: 1.6cqw; padding-right: 1.6cqw; }
.badge.shield b { font-size: clamp(12px, 10cqw, 25px); }
.hp-group .badge.hp { flex: none; }
.badge.shield.gone { display: none; }
.d-shield b { color: #1f6fd0; }
@container (max-width: 120px) {
  .hp-group { position: relative; }
  .hp-group .badge.shield { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 2; padding: 0 4px; }
  .hp-group .badge.shield b { font-size: 12px; }
  .card-wrap.has-shield .abilities { height: calc(var(--ab-rows, 3) * 30px + 22px); padding-bottom: 18px; }
}

.place-limit { flex: none; align-self: center; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 800; background: #e6f4ea; color: #1f5f35; border: 1px solid #7fb894; white-space: nowrap; }
.place-limit[hidden] { display: none; }
.place-limit.done { background: #fff1e6; color: #8a3d00; border-color: #e0a36b; }
.hand-card.unusable { filter: grayscale(.75) brightness(.92); opacity: .55; }
.hand-card.unusable.selected { opacity: .8; }
@media (max-width: 1023px) { .place-limit { font-size: 10.5px; padding: 2px 6px; white-space: normal; max-width: 74px; line-height: 1.25; text-align: center; } }
.card-wrap.controlled .card { box-shadow: 0 0 0 3px #8b5cf6, 0 0 14px rgba(139, 92, 246, .75); }
.ctl-tag { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; max-width: 94%;
  padding: 2px 8px; border-radius: 8px; background: rgba(76, 29, 149, .92); color: #fff; text-align: center; line-height: 1.2; box-shadow: 0 0 0 1px rgba(255,255,255,.7); }
.ctl-tag b { font-size: clamp(10px, 8cqw, 16px); font-weight: 900; white-space: nowrap; }
.ctl-tag small { font-size: clamp(8px, 6cqw, 12px); opacity: .95; }
.card-wrap.ctl-mine .ctl-tag { background: rgba(31, 111, 208, .92); }
.card-wrap.ctl-mine .card { box-shadow: 0 0 0 3px #1f6fd0, 0 0 14px rgba(31, 111, 208, .7); }
@container (max-width: 120px) { .ctl-tag { padding: 1px 3px; } .ctl-tag b { font-size: 9.5px; } .ctl-tag small { font-size: 8px; } }
.d-ctl { color: #5b21b6; font-weight: 700; }
.fx-announce.k-control { --an: #7c3aed; --an2: #3b1585; }

@media (max-width: 1023px) {
  .fx-announce.dock { flex-wrap: wrap; row-gap: 0; padding: 2px 10px; white-space: nowrap; width: max-content; max-width: calc(100vw - 16px); }
  .fx-announce.dock .fx-an-main { min-width: 0; flex: 0 1 auto; gap: 4px; overflow: hidden; }
  .fx-announce.dock .fx-an-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
  .fx-announce.dock .fx-an-kind { padding: 0 6px; }
  .fx-announce.dock .fx-an-sub { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fx-announce.dock .fx-an-sub b { margin-right: 3px; padding: 0 4px; }
  .fx-announce.dock .fx-an-next { flex-basis: 100%; font-size: 11px; line-height: 1.2; }
  .fx-announce.small.dock .fx-an-name { font-size: 13px; }
}

.st-band { position: relative; height: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; }
.st-band > .st-chip:first-child { margin-top: 3px; }
.st-chip { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 4px; max-width: 94%; padding: 2px 10px; border-radius: 8px;
  background: linear-gradient(180deg, #f76707, #c92a2a); color: #fff; box-shadow: 0 0 0 1.5px #fff, 0 2px 6px rgba(0,0,0,.45); line-height: 1.2; }
.st-chip b { font-size: clamp(12px, 11cqw, 21px); font-weight: 900; text-align: center; overflow-wrap: anywhere; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.st-chip i { font-style: normal; font-size: clamp(9px, 6.5cqw, 12px); font-weight: 800; white-space: nowrap; padding: 0 4px; border-radius: 5px; background: rgba(0,0,0,.28); }
.st-chip.more { background: #495057; }
.st-chip.more b { font-size: clamp(9px, 7cqw, 13px); }
@container (max-width: 120px) { .st-chip { padding: 1px 3px; gap: 0 2px; max-width: 98%; flex-wrap: wrap; } .st-chip b { font-size: 11px; } .st-chip i { font-size: 8.5px; padding: 0 2px; } }
.d-status { margin-bottom: 8px; padding: 8px 10px; border-radius: 10px; background: #fff4e6; border: 1px solid #f59f00; }
.d-status h3 { margin: 0 0 4px; font-size: 14px; color: #9c3d00; }
.d-status ul { margin: 0; padding-left: 1.2em; }
.d-status li { font-size: 14px; line-height: 1.5; color: #5c2b00; font-weight: 700; }

.pk-ab.pk-retire { border-color: #c92a2a; background: #fff5f5; }
.pk-ab.pk-retire .pk-name { color: #b02525; }
.pk-ab.pk-retire .mark.retire { background: #c92a2a; color: #fff; }
.pk-ab.pk-retire[disabled] { border-color: #e3b5b5; background: #faf3f3; }
.pk-retire-go { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 2px solid #7d1414; background: linear-gradient(180deg, #ff6b6b, #c92a2a); color: #fff; font-weight: 900; font-size: 15px; cursor: pointer; }
.fx-announce.k-retire { --an: #c92a2a; --an2: #6e1010; }

#start.has-deck .overlay-card { width: min(780px, 100%); max-height: calc(100dvh - 24px); overflow-y: auto; padding: 18px 18px 20px; }
#start.has-deck .overlay-card h1 { font-size: 22px; }
.deck-pick { margin: 8px 0 6px; padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.05); text-align: left; }
.dk-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.dk-head > b { font-size: 15px; }
.dk-count { font-size: 14px; font-weight: 700; color: #1f5f35; }
.dk-count b { font-size: 18px; }
.dk-count.bad { color: #c92a2a; }
.dk-help { margin: 2px 0 6px !important; font-size: 12.5px !important; line-height: 1.5 !important; text-align: left; }
.dk-on-ex { padding: 0 6px; border-radius: 6px; background: #ffe066; color: #3b2600; font-weight: 800; }
.dk-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.dk-tools button { margin: 0; min-height: 38px; padding: 0 12px; border-radius: 999px; border: 2px solid #7f8b88; background: #fff; color: #233; font-weight: 800; font-size: 13px; cursor: pointer; }
.dk-tools .dk-pack { border-color: #8a5a00; }
.dk-tools .dk-pack.on { background: #ffd257; color: #3b2600; }
.dk-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.dk-card { margin: 0 !important; min-height: 54px; justify-content: center; padding: 6px 4px 5px !important; border-radius: 10px !important; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer;
  border: 2px solid #b9c2cf !important; background: #e9ecef !important; color: #6c757d !important; font-weight: 700; filter: grayscale(.85); opacity: .65; transition: transform .12s, box-shadow .12s, opacity .12s; }
.dk-card.on { filter: none; opacity: 1; background: linear-gradient(180deg, #fff8d6, #ffe066) !important; color: #3b2600 !important; border-color: #e0a800 !important;
  box-shadow: 0 0 0 2px #fff, 0 0 12px rgba(255, 196, 0, .85); }
.dk-card.hold, .dk-card.pack-off { cursor: default; opacity: .4; }
.dk-card .dk-ini { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: hsl(var(--tone) 45% 45%); color: #fff; font-size: 14px; font-weight: 900; }
.dk-card .dk-name { font-size: 13px; line-height: 1.2; text-align: center; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.dk-card small { font-size: 10.5px; font-weight: 700; opacity: .85; }
@media (max-width: 600px) {
  #start.has-deck .overlay-card { padding: 14px 10px 16px; }
  .deck-pick { padding: 8px 6px; }
  .dk-grid { gap: 4px; }
  .dk-card { min-height: 56px; padding: 4px 2px !important; }
  .dk-card .dk-ini { width: 20px; height: 20px; font-size: 11px; }
  .dk-card .dk-name { font-size: 11px; }
  .dk-card small { font-size: 9px; }
}
#start.has-deck .start-choices { position: sticky; bottom: -20px; z-index: 2; flex-direction: row; flex-wrap: wrap; gap: 6px; margin: 8px -18px -20px; padding: 10px 18px 14px;
  background: var(--paper, #fdf7ec); box-shadow: 0 -6px 12px rgba(0,0,0,.12); }
#start.has-deck .start-choices button { flex: 1 1 180px; margin-top: 0; padding: 8px 10px; font-size: 15px; min-height: 46px; }
@media (max-width: 600px) { #start.has-deck .start-choices { bottom: -16px; margin: 8px -10px -16px; padding: 8px 10px 12px; } #start.has-deck .start-choices { flex-wrap: nowrap; } #start.has-deck .start-choices button { flex: 1 1 0; min-width: 0; min-height: 48px; padding: 4px 6px; font-size: 12.5px; line-height: 1.25; white-space: normal; } }

body.intro .field .card-wrap:not(.intro-in) { visibility: hidden; }
.card-wrap.intro-pop { animation: introPop .38s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes introPop { 0% { transform: translateY(14px) scale(.55); opacity: 0; } 60% { transform: translateY(-6px) scale(1.06); opacity: 1; } 100% { transform: none; opacity: 1; } }
.fx-announce.intro .fx-an-name { font-size: 34px; }
@media (max-width: 1023px) { .fx-announce.intro .fx-an-name { font-size: 24px; } }
.order-tag { flex: none; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 900; line-height: 1.5; white-space: nowrap; }
.order-tag.first { background: #ffd257; color: #3b2600; border: 1px solid #8a5a00; }
.order-tag.second { background: #dee2e6; color: #343a40; border: 1px solid #868e96; }
@media (max-width: 1023px) { .order-tag { font-size: 10px; padding: 0 5px; margin-left: 4px; } }
.name-plate .nm-short { display: none; }
.name-plate.xlong { font-size: clamp(10px, 7.6cqw, 20px); letter-spacing: -.05em; }
@container (max-width: 120px) { .name-plate .nm-full { display: none; } .name-plate .nm-short { display: inline; } }
.hand-card .name-plate .nm-full { display: inline; } .hand-card .name-plate .nm-short { display: none; }
@media (max-width: 1023px) { .hand-card .name-plate .nm-full { display: none; } .hand-card .name-plate .nm-short { display: inline; } }

.draw-next { flex: none; align-self: center; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; background: #e7f5ff; color: #1c5d99; border: 1px solid #74c0fc; white-space: nowrap; }
.draw-next[hidden] { display: none; }
.draw-next.no { background: #f1f3f5; color: #495057; border-color: #adb5bd; }
@media (max-width: 1023px) { .draw-next { font-size: 10px; padding: 2px 6px; white-space: normal; max-width: 72px; line-height: 1.25; text-align: center; } }
.fx-an-note { margin-top: 3px; font-size: 13px; font-weight: 800; color: #ffe8a3; }
.fx-announce.dock .fx-an-note { display: none; }

.board.has-foe-hand { grid-template-rows: auto auto minmax(0, 1fr) auto minmax(0, 1fr) auto auto; }
.foe-hand { min-width: 0; padding: 4px 8px 6px; border-radius: 12px; background: rgba(255, 249, 219, .97); border: 2px solid #e0a800; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.foe-hand[hidden] { display: none; }
.fh-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.fh-head b { font-size: 14px; color: #7a4a00; }
.fh-head button { min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid #b08900; background: #fff; font-weight: 800; font-size: 12px; cursor: pointer; }
.foe-hand.folded .fh-cards { display: none; }
@media (max-width: 1023px) { .foe-hand { padding: 3px 6px 4px; } .fh-head { margin-bottom: 3px; } .fh-head b { font-size: 12px; } .fh-head button { min-height: 28px; } .fh-card { min-width: 92px; min-height: 40px; padding: 2px 8px; } }
.foe-hand.folded { padding-bottom: 6px; }
.fh-cards { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.fh-card { flex: 0 0 auto; min-width: 110px; min-height: 52px; padding: 4px 10px; border-radius: 10px; border: 2px solid hsl(var(--tone) 40% 45%); background: linear-gradient(180deg, #fff, hsl(var(--tone) 55% 90%));
  display: flex; flex-direction: column; align-items: center; justify-content: center; color: #222; cursor: default; opacity: 1; }
.fh-card { flex: 0 1 auto; max-width: 100%; }
.fh-card b { font-size: 14px; display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fh-card small { font-size: 11px; color: #555; }
.fh-card:disabled { color: #222; }
.fh-card.pickable { cursor: pointer; border-color: #ff4d6a; box-shadow: 0 0 0 2px #fff, 0 0 12px #ff4d6a; animation: targetPulse 1.2s ease-in-out infinite; }
@media (max-width: 1023px) { .fh-card { min-width: 84px; min-height: 44px; padding: 3px 6px; } .fh-card b { font-size: 12px; } .fh-head b { font-size: 12px; } }

.picker.bar { max-width: calc(100vw - 16px); }
.picker.bar .pk-title { flex: 0 1 auto; min-width: 6em; white-space: normal; }

body.choosing .slot.picked .card-wrap { filter: none; }
.slot.picked .card { box-shadow: 0 0 0 1px var(--metal-edge), 0 0 0 4px #ffd257, 0 0 20px #ffd257; cursor: pointer; }
.slot.picked::after { content: "選んだ（押すと外す）"; position: absolute; left: 50%; top: 42%; transform: translateX(-50%); z-index: 4; pointer-events: none;
  padding: 3px 10px; border-radius: 999px; background: #ffd257; color: #3b2600; font-weight: 800; font-size: 12px; line-height: 1.3; text-align: center; width: max-content; max-width: 92%; white-space: normal; box-sizing: border-box; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
@media (max-width: 600px) { .slot.picked::after { content: "選んだ"; font-size: 11px; padding: 2px 8px; } }