:root{font-family:IBM Plex Sans,Yu Gothic,Meiryo,sans-serif;line-height:1.5;font-weight:400;color:#1c1a17;background-color:#f5efe6;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--ink: #1c1a17;--ink-muted: #5d5246;--surface: #f9f3e844;--surface-strong: #fff7ed;--accent: #1f7a71;--accent-strong: #155f58;--accent-warm: #e76f51;--border: rgba(31, 26, 23, .12);--shadow: 0 18px 40px rgba(39, 29, 18, .12)}*{box-sizing:border-box}body{margin:0;min-height:100dvh;height:100dvh;color:var(--ink);background:radial-gradient(rgba(43,136,81,.9),transparent 95%),linear-gradient(160deg,#0f4f30,#0b3f27 45%,#083520);overflow:hidden}body:before{content:"";position:fixed;inset:0;background:linear-gradient(140deg,rgba(255,255,255,.08),transparent 55%),url(/noise.svg);pointer-events:none;mix-blend-mode:soft-light;opacity:.55}#root{height:100dvh}button{font-family:inherit}.app{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;gap:16px;padding:12px 20px 56px;height:100dvh;overflow:hidden;position:relative}.header{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:center;position:sticky;top:0;z-index:10}.title-block{max-width:560px}.eyebrow{text-transform:uppercase;letter-spacing:.28em;font-size:.72rem;margin:0 0 .4rem;color:var(--ink-muted)}.status-panel{background:var(--surface);border-radius:18px;border:1px solid var(--border);box-shadow:var(--shadow);padding:10px 14px;min-width:220px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.status-row{display:flex;align-items:center;gap:6px;font-size:.92rem;padding:4px 8px;border-radius:999px;background:#ffffff8c}.status-row .label{color:var(--ink-muted)}.status-row.score-row.is-over-quota{background:linear-gradient(120deg,#f0c94a52,#1f7a713d);box-shadow:0 0 0 1px #f0c94a59,0 10px 22px #1f7a712e;animation:score-glow 1.6s ease-in-out infinite}.status-row.score-row.is-over-quota .value{color:#1f7a71;font-weight:700}.match-tag{margin-top:0;padding:4px 10px;border-radius:999px;font-size:.8rem;text-align:center;background:#1f7a7129;color:var(--accent-strong)}.match-tag.is-won{background:#2e8b5733;color:#2f6f4b}.match-tag.is-lost{background:#b0442a2e;color:#9b3f2c}.table{grid-column:1;grid-row:2;display:grid;grid-template-rows:minmax(0,1fr) auto auto;gap:14px;min-height:0;max-width:100%}.board-play-row,.hand-skill-row{display:contents}.sidebar{position:absolute;left:20px;top:50vh;z-index:20;display:flex;flex-direction:column;align-items:flex-start;overflow:visible}.panel{background:var(--surface);border-radius:20px;border:1px solid var(--border);box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0;max-width:100%}.panel-header{display:flex;justify-content:space-between;align-items:baseline;gap:12px}.panel-header h2{margin:0;font-size:1.25rem;font-family:Fraunces,Times New Roman,serif}.hint{color:var(--ink-muted);font-size:.85rem}.actions{display:flex;gap:8px;flex-wrap:wrap}.primary-button,.ghost-button{border-radius:999px;padding:8px 14px;font-size:.9rem;border:1px solid transparent;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease}.primary-button{background:var(--accent);color:#fff;box-shadow:0 10px 24px #1f7a714d}.primary-button:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.primary-button:not(:disabled):hover{transform:translateY(-1px)}.ghost-button{background:transparent;border-color:var(--border);color:var(--ink)}.ghost-button:hover{transform:translateY(-1px)}.card-row{display:flex;flex-wrap:wrap;gap:10px;min-height:92px;justify-content:center}.board-row{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;padding:4px 6px;justify-content:flex-start;align-items:center;scrollbar-gutter:stable;width:100%;max-width:100%;box-sizing:border-box}.play-row{border:2px dashed rgba(245,239,230,.85);border-radius:14px;padding:8px 10px;min-height:104px;height:104px;min-width:160px;background:transparent;display:inline-flex;flex-wrap:nowrap;align-self:center;align-items:center;justify-content:center;width:max-content;max-width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-gutter:stable;min-width:0}.play-panel{background:transparent;border:none;box-shadow:none;padding:0}.play-header{display:flex;justify-content:center;margin-bottom:6px}.play-button{border-radius:999px;padding:8px 14px;font-size:.85rem;border:1px solid transparent;cursor:pointer;background:var(--accent);color:#fff;box-shadow:0 8px 16px #1f7a714d;transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease}.play-button:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.play-button:not(:disabled):hover{transform:translateY(-1px)}.play-row.is-locked{opacity:.6}.card-gap{width:64px;height:90px;border-radius:14px;background:transparent;pointer-events:none;flex:0 0 auto}.card:active{cursor:grabbing}.card.is-selected{box-shadow:0 0 0 3px #f0c94ae6,0 0 18px #f0c94a99,0 10px 20px #271d121f;outline:2px solid rgba(240,201,74,.9);outline-offset:2px}.card:hover{transform:translateY(-4px);box-shadow:0 12px 26px #271d1233}.card.is-selected:hover{box-shadow:0 0 0 3px #f0c94af2,0 0 20px #f0c94ab3,0 12px 26px #271d1233}.card-inner{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;width:100%;height:100%;padding:8px;font-family:Fraunces,Times New Roman,serif}.card-rank{font-size:1.25rem;font-weight:600}.card-suit{font-size:.95rem;align-self:flex-end}.card.is-red{color:#b0442a}.card.is-black{color:#1c1a17}.board-panel{align-self:center;background:#0820149e;border-color:#ffffff14;width:100%;max-width:100%}.hand-panel{align-self:end}.skills-panel{padding-top:0;display:flex;flex-direction:column;align-items:flex-start;gap:12px}.mana-panel{width:100%;padding:6px 8px;border-radius:12px;background:#12121233;border:1px solid rgba(255,255,255,.2);color:#f5efe6;display:flex;align-items:center;justify-content:flex-start;gap:8px;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;--mana-mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='64'%20height='64'%20preserveAspectRatio='xMidYMid%20meet'%20viewBox='0%200%20256%20256'%3e%3cpath%20stroke='black'%20stroke-width='7'%20fill='black'%20d='M128%2054%20Q%20112,112%2054,128%20Q%20112,144%20128,202%20Q%20144,144%20202,128%20Q%20144,112%20128,54%20Z'%3e%3c/path%3e%3c/svg%3e")}.mana-label{opacity:.8}.mana-icons{display:flex;align-items:center;gap:4px}.mana-gem{width:16px;height:16px;background:#6b6560;mask:var(--mana-mask) center / contain no-repeat;-webkit-mask:var(--mana-mask) center / contain no-repeat}.mana-gem.is-full{background:#f0c94a;box-shadow:0 0 6px #f0c94a99}.mana-gem.is-empty{background:#5a534d}.skill-rail{display:flex;flex-direction:column;align-items:flex-start;gap:12px;width:auto}.skill-slot{position:relative;display:flex;justify-content:flex-start}.skill-chip{width:44px;aspect-ratio:1 / 1;padding:6px;border-radius:12px;border:1px solid rgba(31,26,23,.2);cursor:pointer;text-align:center;display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease}.skill-chip:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}.skill-chip:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 10px 18px #271d1229}.skill-chip.is-active{border-color:var(--accent);box-shadow:0 0 0 2px #1f7a7138}.skill-chip.is-ready{background:linear-gradient(165deg,#7a1f1f,#571010);border-color:#ffffff2e;box-shadow:0 10px 22px #340a0a52;color:#f5efe6}.skill-chip.is-dry{background:linear-gradient(165deg,#6b6560,#4f4a46);border-color:#ffffff1f;color:#efe7dd}.skill-chip-icon{width:24px;height:24px;display:block;filter:brightness(0) invert(1)}.skill-chip-fallback{font-weight:600;font-size:.7rem}.skill-card{position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);width:280px;padding:12px 14px;border-radius:16px;background:var(--surface-strong);border:1px solid var(--border);box-shadow:var(--shadow);z-index:5;display:flex;gap:12px;align-items:flex-start}.skill-card-body{flex:1;min-width:0}.skill-card-title{font-weight:700}.skill-card-desc{margin-top:6px;font-size:.85rem;color:var(--ink-muted)}.skill-card-meta{margin-top:8px;font-size:.78rem;color:var(--accent-strong)}.skill-card-actions{display:flex;flex-direction:column;gap:8px}.skill-card-button{border-radius:999px;padding:6px 12px;font-size:.78rem;border:1px solid transparent;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease;white-space:nowrap}.skill-card-button:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.skill-card-button.is-primary{background:var(--accent);color:#fff;box-shadow:0 8px 16px #1f7a714d}.skill-card-button.is-ghost{background:transparent;border-color:var(--border);color:var(--ink)}.skill-card-button:not(:disabled):hover{transform:translateY(-1px)}.score-list{display:grid;gap:10px}.score-row{display:flex;justify-content:space-between;gap:12px;padding:8px 10px;border-radius:12px;background:#fff9;border:1px solid rgba(31,26,23,.08)}.score-name{font-weight:600}.score-meta{font-size:.8rem;color:var(--ink-muted);margin-top:2px}.score-value{font-weight:700;color:var(--accent-strong)}.best-score{display:grid;gap:6px}.best-value{font-size:1.8rem;font-family:Fraunces,Times New Roman,serif}.best-meta{color:var(--ink-muted)}.empty{color:var(--ink-muted);font-size:.9rem;padding:10px 4px}.seed{position:fixed;left:18px;bottom:12px;font-size:.75rem;color:var(--ink-muted);padding:4px 8px;border-radius:8px;border:1px solid var(--border);background:#ffffffb3}.role-list-toggle{position:fixed;top:14px;left:14px;z-index:26;border-radius:999px;padding:6px 12px;font-size:.78rem;border:1px solid rgba(255,255,255,.3);background:#091c12bf;color:#f5efe6;cursor:pointer;box-shadow:0 8px 16px #080c0a59;transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease}.role-list-toggle:hover{transform:translateY(-1px)}.role-list-toggle.is-open{box-shadow:0 0 0 2px #f0c94ab3}.role-list-overlay{position:fixed;inset:0;background:#070f0c8c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:40;padding:20px}.role-list-panel{width:min(960px,92vw);max-height:min(80vh,760px);overflow:hidden;display:flex;flex-direction:column;border-radius:20px;background:#0b1812f2;border:1px solid rgba(255,255,255,.16);box-shadow:0 26px 50px #050a0880}.role-list-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.1)}.role-list-title{color:#f5efe6;font-weight:700;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase}.role-list-close{border-radius:999px;padding:4px 10px;font-size:.72rem;border:1px solid rgba(255,255,255,.2);background:transparent;color:#f5efe6;cursor:pointer}.role-table-wrap{overflow:auto;padding:10px 16px 16px}.role-group{display:grid;gap:8px;padding:8px 0 12px}.role-group+.role-group{border-top:1px solid rgba(255,255,255,.12)}.role-group-title{color:#f5efe6d9;font-weight:700;font-size:.78rem;letter-spacing:.08em}.role-table{width:100%;border-collapse:collapse;font-size:.82rem;color:#f5efe6}.role-table thead th{text-align:left;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#f5efe6b3;padding:8px 6px;border-bottom:1px solid rgba(255,255,255,.12)}.role-table tbody tr{border-bottom:1px solid rgba(255,255,255,.08)}.role-table tbody tr:last-child{border-bottom:none}.role-table td{padding:10px 6px;vertical-align:top}.role-name{font-weight:600;white-space:nowrap}.role-score{font-weight:700;color:#f0c94a;white-space:nowrap}.role-desc{color:#f5efe6bf;line-height:1.4}.drag-preview{position:fixed;top:0;left:0;z-index:30;pointer-events:none}.drag-preview .card{animation:none;cursor:grabbing;box-shadow:0 18px 36px #271d1240}@property --anganim{syntax: "<angle>"; inherits: false; initial-value: 0deg;}@property --angc1{syntax: "<color>"; inherits: false; initial-value: transparent;}@property --angc2{syntax: "<color>"; inherits: false; initial-value: transparent;}@property --angc3{syntax: "<color>"; inherits: false; initial-value: transparent;}@property --angc4{syntax: "<color>"; inherits: false; initial-value: transparent;}.card{cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;transition:transform .2s ease,box-shadow .2s ease;position:relative;width:64px;height:90px;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 20px #271d121f;border-radius:14px;padding:3px}.score-overlay-layer{position:fixed;inset:0;pointer-events:none;z-index:25}.score-overlay{position:absolute;transform:translate(-50%,-120%);padding:8px 12px;border-radius:12px;background:#091c12e6;border:1px solid rgba(255,255,255,.18);color:#f5efe6;text-align:center;display:grid;gap:2px;font-size:.72rem;text-shadow:0 2px 8px rgba(0,0,0,.55);animation:score-overlay var(--score-anim-duration, 1s) ease;min-width:120px}.score-overlay-title{font-weight:700;letter-spacing:.05em}.score-overlay-score{font-size:.7rem;opacity:.9}.card-score,.card-score-high{animation-name:card-score;animation-iteration-count:1;animation-duration:var(--score-anim-duration, 1s);--blink-span: 15deg;background:conic-gradient(from var(--anganim),transparent,0deg,transparent,calc(45deg - var(--blink-span)),var(--angc1),calc(45deg + var(--blink-span)),transparent,90deg,transparent,calc(135deg - var(--blink-span)),var(--angc2),calc(135deg + var(--blink-span)),transparent,180deg,transparent,calc(225deg - var(--blink-span)),var(--angc3),calc(225deg + var(--blink-span)),transparent,270deg,transparent,calc(315deg - var(--blink-span)),var(--angc4),calc(315deg + var(--blink-span)),transparent,360deg,transparent)}.card-score-mini{animation-name:card-score-mini;animation-iteration-count:1;animation-duration:.5s}@keyframes card-score{0%{scale:100%}10%{--anganim: 0turn;--angc1:transparent;--angc2:transparent;--angc3:transparent;--angc4:transparent}35%{scale:110%;animation-timing-function:linear}50%{--angc1:#cfff20ff;--angc2:#1bb32888;--angc3:#314dec88;--angc4:#ec313a88}90%{--angc1:transparent;--angc2:transparent;--angc3:transparent;--angc4:transparent;--anganim: 1turn}to{scale:100%;animation-timing-function:ease-out}}@keyframes card-score-mini{0%{scale:100%}40%{scale:108%}to{scale:100%}}@keyframes score-overlay{0%{opacity:0;transform:translate(-50%,-90%)}20%{opacity:1;transform:translate(-50%,-110%)}80%{opacity:1;transform:translate(-50%,-125%)}to{opacity:0;transform:translate(-50%,-140%)}}@keyframes score-glow{0%{box-shadow:0 0 0 1px #f0c94a33,0 6px 16px #1f7a7129}50%{box-shadow:0 0 0 1px #f0c94a80,0 12px 28px #1f7a7147}to{box-shadow:0 0 0 1px #f0c94a33,0 6px 16px #1f7a7129}}.card-frame-page{width:100%;height:100%;border-radius:12px;background:var(--surface-strong)}@media(max-width:1100px){.app{padding:12px 16px 56px}.sidebar{left:16px;top:86px}.skill-chip{width:40px}}@media(max-width:700px){.app{padding:20px 16px 64px}h1{font-size:2.1rem}.sidebar{left:12px;top:80px}.skill-chip{width:36px}.skill-chip-icon{width:20px;height:20px}.mana-panel{font-size:.7rem}.mana-gem{width:14px;height:14px}.skill-card{width:220px;left:calc(100% + 8px)}.role-list-panel{width:min(92vw,720px)}.card,.card-gap{width:54px;height:76px}.status-panel{width:100%}}@media(max-width:520px){.table{display:flex;flex-direction:column;gap:12px}.board-play-row{display:flex;flex-direction:column;gap:8px;align-items:stretch;flex:1;justify-content:space-between;min-height:0}.play-panel{order:2;flex:1;align-self:stretch;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px}.board-panel{order:1;flex:1;padding:6px}.play-header{margin-bottom:0;justify-content:flex-start}.play-row{width:100%}.hand-skill-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px;align-items:start}.sidebar{position:static;align-self:start;justify-self:start;z-index:auto;width:auto}.skill-rail{display:flex;flex-direction:column;gap:6px}.skill-chip{width:38px;padding:4px;border-radius:10px}.skill-chip-icon{width:18px;height:18px}.skill-card{position:fixed;left:50%;top:120px;transform:translate(-50%);width:min(260px,90vw);z-index:35}.card-row{gap:6px}.hand-panel .card-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));justify-items:center;align-content:start}.card{width:44px;height:64px}.board-panel .card{width:54px;height:76px}.card-gap{width:44px;height:64px}.play-row{min-height:70px;height:70px;padding:6px}.board-row{padding:2px}.play-button{padding:6px 10px;font-size:.78rem}.mana-panel{position:fixed;right:18px;bottom:12px;width:auto;padding:4px 6px;border-radius:10px;font-size:.65rem;z-index:28}}@media(prefers-reduced-motion:reduce){.card{animation:none;transition:none}.score-overlay,.status-row.score-row.is-over-quota{animation:none}.primary-button,.ghost-button,.skill-chip,.skill-card-button{transition:none}}