/* The card table: original portraits, deliberate feedback, readable decisions. */
.fx-public-card.fx-focus-card { width: 174px; height: 256px; }
.fx-focus-card .fx-public-front { padding: 10px; box-shadow: 0 12px 60px #20180e66, 0 0 0 5px #fff9e9bb; }
.fx-focus-card .fx-public-front .character-art { width: 125px; height: 146px; flex-shrink: 0; }
.fx-focus-card .fx-public-front small { font-size: 13px; line-height: 19px; min-height: 19px; flex-shrink: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-focus-card .fx-public-front strong { font-size: 24px; }
.fx-focus-card .fx-public-front span { font-size: 9px; letter-spacing: .06em; }
.feel-controls { display: flex; align-items: center; gap: 5px; }
.feel-toggle { border: 1px solid #cfc7b8; border-radius: 6px; background: #f7f4ec; color: #635b4f; font-family: inherit; font-weight: 500; line-height: 1.2; font-size: 11px; padding: 8px 10px; cursor: pointer; white-space: nowrap; }
.feel-toggle[aria-pressed="true"] { background: #e5e9dc; border-color: #8c957d; color: #46513b; }
button:focus-visible { outline: 3px solid #a2372a; outline-offset: 4px; }
.character-portrait { display: block; object-fit: cover; object-position: center 28%; user-select: none; }
.hero-art { gap: 0; padding: 18px 0 8px; }
.hero-art .mini-role { width: 113px; background: #f4ead9; padding: 6px 6px 10px; box-shadow: 0 2px 0 #c7b695, 0 10px 22px #47331d22; border: 1px solid #cabc9e; border-radius: 6px; }
.hero-art .mini-role:first-child { transform: rotate(-9deg) translateY(7px); }
.hero-art .mini-role:nth-child(2) { z-index: 2; transform: translateY(-5px); }
.hero-art .mini-role:last-child { transform: rotate(9deg) translateY(7px); }
.hero-art .mini-role .character-art { width: 100%; height: 133px; border-radius: 3px; margin: 0 0 9px; }
.hero-art .mini-role span { font-size: 10px; letter-spacing: .12em; }
.influence-card { position: relative; display: flex; flex-direction: column; align-items: center; width: 173px; min-height: 313px; padding: 13px 10px 11px; color: #332d23; background: linear-gradient(125deg,#fff9ea,#ede1cb); border: 1px solid color-mix(in srgb,var(--role-color) 65%,#cbb991); border-radius: 9px; box-shadow: 0 3px 0 #c3b28f, 0 5px 0 #ded2bb, 0 12px 20px #40321d1c; overflow: hidden; font-family: inherit; transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; text-align: center; }
.influence-card .character-art { width: 100%; height: 174px; margin: 8px 0 10px; border-radius: 4px; border: 1px solid #9e875044; box-shadow: inset 0 0 20px #0002; }
.influence-card .card-label { font-size: 9px; line-height: 1.3; letter-spacing: .09em; min-height: 12px; }
.influence-card .card-corner { display: none; }
.influence-card .role-name { font-size: 26px; line-height: 1.05; margin: 0 0 7px; }
.influence-card .role-power { font-size: 11px; line-height: 1.5; max-width: 151px; min-height: 33px; }
.influence-card .card-bottom-mark { font-size: 9px; opacity: .5; margin-top: 5px; }
.influence-card.inspectable { cursor: zoom-in; }
.influence-card.selectable { cursor: pointer; }
.influence-card.selected { transform: translateY(-9px); border: 2px solid #64744d; padding: 12px 9px 10px; box-shadow: 0 3px 0 #7f8d69, 0 0 0 4px #6d805a22, 0 16px 24px #40321d22; }
.influence-card.loss-choice.selected { border-color: #a2372a; box-shadow: 0 3px 0 #9c5946, 0 0 0 4px #a2372a20, 0 16px 24px #40321d22; }
.influence-card.loss-choice.selected .card-label { color: #a2372a; }
.influence-card.loss-choice .card-check { background: #a2372a; }
.influence-card.revealed { opacity: .72; filter: saturate(.32); transform: rotate(-2deg); box-shadow: 0 2px 0 #c3b28f, 0 5px 9px #40321d13; }
.influence-card.revealed .character-art { filter: grayscale(.5); }
.influence-card .card-lost-stamp { top: 46%; color: #7d3329; border-color: #7d3329; background: #f9f2e6d9; font-size: 26px; letter-spacing: .17em; border-width: 3px; }
@media (hover: hover) and (pointer: fine) {
  .influence-card:not(.selected):not(.revealed):hover { transform: translateY(-5px) rotate(-.6deg); box-shadow: 0 3px 0 #c3b28f, 0 5px 0 #ded2bb, 0 17px 25px #40321d26; }
  .action-button:not(:disabled):hover { transform: translateY(-3px); box-shadow: 0 3px 0 #bca982, 0 8px 15px #40321d19; }
}
.mini-card-face .character-art { width: 100%; height: 43px; margin: 0; border-radius: 2px; }
.side-rule .character-art { width: 45px; height: 57px; flex-shrink: 0; border-radius: 4px; border: 1px solid #c6b797; }
.side-rule { gap: 12px; }
.side-rule strong { font-size: 15px; }
.side-rule span { font-size: 11px; line-height: 1.5; }
.action-button { transition: transform 130ms ease, box-shadow 130ms ease; border-bottom-width: 3px; }
.action-button:disabled { box-shadow: none; }
.pending-card { border: 1px solid #9f8763; border-left: 4px solid #a2372a; background: #fbf6e9; box-shadow: 0 4px 15px #47331d0c; }
.pending-card > div:last-child { flex: 1; min-width: 0; }
.pending-context { display: block; font-weight: 650; font-size: 15px; line-height: 1.55; color: #372f26; }
.pending-instruction { display: block; font-size: 12px; line-height: 1.6; margin-top: 4px; color: #706656; font-weight: normal; }
.loss-controls { text-align: center; padding: 0 12px 22px; }
.loss-controls .button { min-width: 230px; min-height: 48px; }
.loss-controls p { font-size: 12px; line-height: 1.6; margin: 12px auto 0; max-width: 340px; }
.fx-public-front .character-art { width: 91px; height: 114px; border-radius: 3px; margin: 5px auto; }
.fx-coin { background: radial-gradient(circle at 30% 24%,#fff2b3,#d8ad50 55%,#946b26); border: 2px solid #bf9445; box-shadow: inset 0 0 0 2px #f6dd8b, 0 3px 6px #583c2929; }
.fx-spark { position: fixed; width: 5px; height: 5px; background: #d6b265; border-radius: 1px; pointer-events: none; box-shadow: 0 0 4px #f0d68d99; }
.fx-arrival-ring { position: fixed; width: 28px; height: 28px; border: 2px solid #d6b265; border-radius: 50%; pointer-events: none; }
.fx-center-seal { background: radial-gradient(ellipse at center,#fff9e9 40%,#e9dec8); border: 1px solid #b39967; box-shadow: 0 8px 35px #4b352326, inset 0 0 0 5px #f3e7cf; }
#character-modal { max-width: 680px; }
#character-details { display: grid; grid-template-columns: 210px 1fr; gap: 30px; align-items: center; padding: 8px 0 10px; }
#character-details h2 { margin: 12px 0 16px; font-size: 38px; }
#character-details p { font-size: 14px; line-height: 1.75; }
.inspector-portrait { padding: 6px; background: #efe1c6; border: 1px solid var(--role-color); border-radius: 7px; box-shadow: 0 3px 0 #c3b28f,0 12px 25px #47331d20; transform: rotate(-2deg); }
.inspector-portrait img { width: 100%; height: auto; border-radius: 3px; }
@media(max-width: 760px) {
  .site-header { flex-wrap: wrap; gap: 14px; }
  .header-right { gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
  .strategy-link { display: none; }
  .feel-toggle { font-size: 10px; padding: 8px; }
  .hero-art .mini-role { width: 96px; }
  .hero-art .mini-role .character-art { height: 113px; }
  .influence-card { width: 150px; min-height: 286px; padding: 12px 9px 10px; }
  .influence-card .character-art { height: 151px; }
  .influence-card .role-name { font-size: 24px; }
  .influence-card.selected { padding: 11px 8px 9px; }
  .self-area.exchanging .influence-card { width: 100%; min-height: 282px; }
  .self-area.exchanging .character-art { height: 145px; }
  .pending-context { font-size: 14px; }
  .response-buttons .button { min-height: 46px; }
  #character-details { grid-template-columns: 1fr; gap: 20px; text-align: center; }
  .inspector-portrait { width: 170px; margin: auto; }
  #character-details h2 { font-size: 32px; margin: 8px 0; }
}
@media(max-width: 420px) {
  .site-header { justify-content: center; padding-bottom: 15px; }
  .header-right { width: 100%; justify-content: center; }
  .hand-cards { gap: 10px; }
  .influence-card { width: min(150px,calc((100vw - 72px)/2)); min-height: 277px; padding-left: 8px; padding-right: 8px; }
  .influence-card .character-art { height: 140px; }
  .influence-card .card-label { letter-spacing: .04em; font-size: 8px; }
  .influence-card .role-name { font-size: 22px; }
  .influence-card .role-power { font-size: 11px; }
}
html[data-motion="reduced"] *,html[data-motion="reduced"] *::before,html[data-motion="reduced"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html[data-motion="reduced"] #visual-layer { display: none; }
html[data-motion="reduced"] .influence-card:hover,html[data-motion="reduced"] .action-button:hover { transform: none; }
@media(max-width: 760px) {
  .opponents { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
  .seat { min-height: 103px; padding: 9px 7px; }
  .seat-top { gap: 6px; }
  .seat .avatar { width: 22px; height: 22px; font-size: 15px; flex-shrink: 0; }
  .seat-name { font-size: 11px; max-width: 64px; }
  .seat-type { font-size: 8px; letter-spacing: 0; }
  .seat-state { gap: 4px; margin-top: 12px; }
  .tiny-cards { gap: 3px; }
  .card-back,.card-back.revealed { width: 22px; height: 34px; }
  .mini-card-face .character-art { width: 100%; height: 23px; }
  .mini-card-face small { font-size: 7px; letter-spacing: -.4px; }
  .seat-state .coin-count { font-size: 12px; gap: 3px; }
  .seat-state .coin { width: 13px; height: 13px; font-size: 9px; }
  .table-objects { margin: 13px auto 9px; }
  .middle-table { padding-top: 17px; padding-bottom: 17px; }
  .self-area.exchanging .influence-card .character-art { width: 100%; height: 145px; }
  .self-area.exchanging .card-corner { display: none; }
}
@media(max-width: 360px) {
  .seat .avatar { display: none; }
  .seat-name { max-width: 65px; }
  .seat-state { flex-wrap: wrap; }
}

.decision-jump { display: none; }
@media(max-width: 760px) {
  .decision-jump { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 44px; margin: -4px auto 17px; padding: 9px 17px; border: 1px solid #c5b693; border-radius: 6px; color: #7e3025; background: #faf4e5; font: inherit; font-size: 12px; font-weight: 600; }
}