.nine-main { max-width: 980px; margin: 0 auto; padding: 8px 14px 30px; }
.entry { max-width: 560px; margin: 0 auto 14px; }
.entry .btn.primary { width: auto; margin: 0; white-space: nowrap; }
.row.nowrap { flex-wrap: nowrap; }
.row.center { justify-content: center; }
.center { text-align: center; }
.board-title { text-align: center; font-family: var(--serif); font-size: clamp(22px, 6vw, 38px); margin: 6px 0 14px;
  background: linear-gradient(90deg, #ffe08a, #fff, #c9a6ff, #ffe08a); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: hue-slide 6s linear infinite; }
.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(6px, 2vw, 16px); max-width: 720px; margin: 0 auto; }
.board .cell { position: relative; perspective: 1000px; }
.board .card-stage { width: 100%; }
.board .cell.flipping .card-stage { animation: cell-flip .6s ease-in-out; }
@keyframes cell-flip { 0% { transform: rotateY(0); } 50% { transform: rotateY(90deg) scale(.95); } 100% { transform: rotateY(0); } }
.reroll { position: absolute; right: -4px; top: -6px; z-index: 5; width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; background: #2c2547ee; color: #fff; font-size: 17px; cursor: pointer; box-shadow: 0 3px 10px #0008; }
.reroll:hover { background: #4a3d80; }
.board .cap { font-size: 11px; text-align: center; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board .cap.hi { color: #ffe08a; font-weight: 700; }
.actions { margin-top: 14px; }

/* 裏面は模様だけにする（engine/card.css の「ORICA MAKER」「FAN MADE」の文字をこのサイトでは出さない） */

/* ---- ドラッグ＆ドロップ（drag9.js） ---- */
.drag-ghost { position: fixed; z-index: 9999; pointer-events: none; transform-origin: 0 0; will-change: transform; transition: filter .2s, opacity .2s; }
.drag-ghost > * { width: 100% !important; height: 100% !important; margin: 0 !important; transition: transform .22s cubic-bezier(.2, 1.5, .4, 1), box-shadow .22s; border-radius: 6px; }
.drag-ghost > img, .drag-ghost > .fb { object-fit: cover; display: block; }
.drag-ghost.lift > * { transform: scale(1.12); box-shadow: 0 22px 40px #000c, 0 0 0 2px #ffcc4daa, 0 0 26px #ffcc4d66; }
.drag-ghost.will-remove { opacity: .55; filter: grayscale(.7) brightness(.8); }
.drag-ghost.will-return > * { box-shadow: 0 14px 30px #000a, 0 0 0 2px #ffffff55; }
.drag-ghost.settle { transition: transform .26s cubic-bezier(.25, 1.35, .45, 1), opacity .26s; }
.drag-ghost.settle > * { transform: none; box-shadow: 0 6px 16px #0008; }
.drag-ghost.gone { opacity: 0; }
.drag-src { opacity: .28; filter: saturate(.3); transition: opacity .15s; }
.dragging .cell { transition: transform .18s cubic-bezier(.2, 1.4, .4, 1), box-shadow .18s, border-color .18s; }
.dragging .cell:not(.drag-src) { animation: drop-breathe 1.2s ease-in-out infinite; }
.cell.drop-hot { transform: scale(1.07) !important; border-color: var(--accent, #ffcc4d) !important; border-style: solid !important; box-shadow: 0 0 0 3px #ffcc4d77, 0 0 28px #ffcc4daa !important; animation: none !important; z-index: 2; }
.cell.snapped { animation: drop-snap .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes drop-breathe { 50% { box-shadow: 0 0 0 2px #ffffff22, 0 0 14px #ffcc4d33; } }
@keyframes drop-snap { 0% { transform: scale(.86) rotate(-3deg); } 55% { transform: scale(1.08) rotate(1deg); } 100% { transform: none; } }
html.is-dragging, html.is-dragging * { cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important; }
@media (prefers-reduced-motion: reduce) { .drag-ghost, .drag-ghost > *, .cell.snapped, .dragging .cell { transition: none !important; animation: none !important; } }
.board .cell { touch-action: pan-y; -webkit-touch-callout: none; cursor: grab; border-radius: 8px; transition: transform .18s, box-shadow .2s; }
.board .cell.picked { transform: scale(.94); box-shadow: 0 0 0 3px #8f6bff, 0 0 20px #8f6bffaa; }
.board .cell.drop-hot { border-radius: 8px; }
.board .cell:focus-visible { outline: 2px solid var(--accent, #ffcc4d); outline-offset: 3px; }
.drag-ghost .card-stage { pointer-events: none; }
/* スマホ幅で9マスが画面からはみ出さないように（1fr だとカードの最小幅で列が広がっていた） */
.board { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.board .cell { min-width: 0; }