:root {
    --nk-bg-top: #ece7de;
    --nk-bg-bottom: #d4cdc1;
    --nk-red-dark: #6d1d15;
    --nk-red-mid: #8f2a1f;
    --nk-red-light: #b54431;
    --nk-wood-1: #c99660;
    --nk-wood-2: #b9814d;
    --nk-wood-3: #8f5a2c;
    --nk-ink: #26160f;
    --nk-muted: #6a5344;
    --nk-post-space: clamp(1rem, 3vw, 3rem);
    --nk-panel-padding-x: clamp(1rem, 2.6vw, 2.4rem);
    --nk-panel-padding-top: clamp(5.8rem, 10vh, 7.3rem);
    --nk-panel-padding-bottom: clamp(1rem, 2.6vh, 1.7rem);
    --nk-shelf-gap: clamp(.95rem, 2.3vh, 1.6rem);
    --nk-group-gap: clamp(.45rem, 1.2vw, 1.2rem);
    --nk-card-gap: clamp(.16rem, .55vw, .42rem);
    --nk-card-width: 98px;
    --nk-card-photo-width: calc(var(--nk-card-width) - 20px);
    --nk-card-photo-height: calc(var(--nk-card-photo-width) * 1.34);
}

* { box-sizing: border-box; }
html, body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    background:
        radial-gradient(circle at top, rgba(255, 255, 255, .55), transparent 26%),
        linear-gradient(180deg, var(--nk-bg-top) 0%, var(--nk-bg-bottom) 100%);
    color: var(--nk-ink);
}
body { overflow: hidden; font-family: Arial, sans-serif; }
.nk-board-page, .nk-board-stage, .nk-board-viewport { width: 100%; min-height: 100vh; }
.nk-board-stage, .nk-board-viewport { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.nk-panel {
    position: relative;
    width: 100vw;
    height: 100vh;
    padding: var(--nk-panel-padding-top) calc(var(--nk-panel-padding-x) + var(--nk-post-space)) var(--nk-panel-padding-bottom);
    background:
        radial-gradient(circle at 50% 16%, rgba(255,255,255,.36), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 18%),
        linear-gradient(180deg, #e8e2d7 0%, #d6cdbf 100%);
    overflow: hidden;
    transform-origin: center center;
}
.nk-panel::before, .nk-panel::after {
    content: "";
    position: absolute;
    top: 4.45rem;
    bottom: .85rem;
    width: clamp(.9rem, 1.25vw, 1.25rem);
    border-radius: .45rem;
    background:
        linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,0)),
        linear-gradient(180deg, var(--nk-red-dark) 0%, var(--nk-red-mid) 45%, #2c211d 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 .35rem .9rem rgba(0,0,0,.14);
}
.nk-panel::before { left: var(--nk-panel-padding-x); }
.nk-panel::after { right: var(--nk-panel-padding-x); }
.nk-panel__beam-top, .nk-panel__beam-mid {
    position: absolute;
    left: .55rem;
    right: .55rem;
    border-radius: .5rem;
    background: linear-gradient(180deg, var(--nk-red-light) 0%, var(--nk-red-mid) 42%, #2b211d 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 .45rem 1rem rgba(0,0,0,.18);
}
.nk-panel__beam-top { top: .72rem; height: 1.5rem; }
.nk-panel__beam-mid { top: 3.1rem; left: 1.6rem; right: 1.6rem; height: 1.04rem; }
.nk-panel__crest {
    position: absolute;
    top: 1.55rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    max-width: min(80vw, 48rem);
    padding: .48rem 1rem;
    display: inline-flex;
    align-items: center;
    gap: .9rem;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(250,247,241,.96) 0%, rgba(234,227,216,.94) 100%);
    box-shadow: inset 0 0 0 1px rgba(109,29,21,.14), 0 .45rem 1rem rgba(0,0,0,.1);
}
.nk-panel__crest-logo, .nk-panel__crest-mark {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.nk-panel__crest-logo { object-fit: contain; background: transparent; padding: 0; }
.nk-panel__crest-mark {
    display: grid;
    place-items: center;
    background: radial-gradient(circle, #fbf8f3 0%, #ddd3c5 72%, #3a2c25 100%);
    color: var(--nk-red-dark);
    font: 900 1.15rem/1 Georgia, serif;
}
.nk-panel__crest-title {
    color: var(--nk-red-dark);
    font: 900 clamp(.92rem, 1vw + .62rem, 1.25rem)/1.05 "Noto Serif JP", Georgia, serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nk-panel__shelves {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--nk-shelf-gap);
    min-height: 0;
}
.shelf-row {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    padding-top: 1.2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.shelf-row::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: .95rem;
    height: .62rem;
    border-radius: .4rem;
    background: linear-gradient(180deg, #9c3829 0%, #7e261c 48%, #2b221e 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 .26rem .7rem rgba(0,0,0,.14);
}
.groups-row {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: nowrap;
    gap: var(--nk-group-gap);
    padding: .18rem .8rem 0;
    overflow: visible;
}
.group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .12rem;
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
}
.group[style*="--nk-desktop-order"] {
    order: var(--nk-desktop-order);
}
.group--priority .group-label {
    background: linear-gradient(180deg, rgba(109,29,21,.96) 0%, rgba(143,42,31,.94) 100%);
    color: #fff7ef;
    border-color: rgba(255,255,255,.18);
}
.group--priority {
    margin-inline: clamp(.2rem, .8vw, .7rem);
}
.group--highest { transform: translateY(-.28rem) scale(1.03); transform-origin: center top; z-index: 3; }
.group--highest { z-index: 4; }
.group-label {
    position: relative;
    max-width: 100%;
    padding: .22rem .65rem;
    border-radius: 999px;
    background: rgba(255, 249, 240, .94);
    border: 1px solid rgba(109,29,21,.14);
    color: var(--nk-ink);
    font: 800 clamp(.64rem, .45vw + .48rem, .82rem)/1.08 Georgia, serif;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}
.group--highest .group-label {
    padding: .34rem .98rem;
    background:
        linear-gradient(180deg, rgba(255, 248, 225, .24) 0%, rgba(255, 248, 225, 0) 26%),
        linear-gradient(180deg, #7b2118 0%, #a73324 100%);
    color: #fffaf2;
    border-color: rgba(255,255,255,.24);
    box-shadow:
        0 .38rem .95rem rgba(90, 26, 18, .28),
        0 0 0 2px rgba(255, 240, 215, .38),
        0 0 0 6px rgba(167, 51, 36, .10);
    font-size: clamp(.74rem, .56vw + .54rem, .98rem);
    letter-spacing: .08em;
}
.group-label::after {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(100% + .06rem);
    transform: translateX(-50%);
    width: 2px;
    height: .58rem;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(92, 53, 28, .85) 0%, rgba(204, 176, 141, .95) 100%);
}
.cards-row {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: var(--nk-card-gap);
    min-width: 0;
    padding-top: .18rem;
}
.group--priority .cards-row {
    gap: clamp(.24rem, .7vw, .5rem);
}
.cards-row::before {
    content: "";
    position: absolute;
    top: 0;
    left: .7rem;
    right: .7rem;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(92, 53, 28, .2) 0%, rgba(92, 53, 28, .78) 18%, rgba(92, 53, 28, .78) 82%, rgba(92, 53, 28, .2) 100%);
}
.group--priority .tablilla {
    flex-basis: calc(var(--nk-card-width) + 4px);
    width: calc(var(--nk-card-width) + 4px);
    max-width: calc(var(--nk-card-width) + 4px);
}
.group--highest .tablilla {
    flex-basis: calc(var(--nk-card-width) + 16px);
    width: calc(var(--nk-card-width) + 16px);
    max-width: calc(var(--nk-card-width) + 16px);
}
.group--highest .cards-row {
    gap: clamp(.34rem, 1vw, .72rem);
}
.group--highest .cards-row::before {
    left: .35rem;
    right: .35rem;
    height: 3px;
    background: linear-gradient(90deg, rgba(123, 33, 24, .18) 0%, rgba(167, 51, 36, .92) 18%, rgba(201, 150, 96, .96) 50%, rgba(167, 51, 36, .92) 82%, rgba(123, 33, 24, .18) 100%);
    box-shadow: 0 .14rem .4rem rgba(90, 26, 18, .18);
}
.group--highest .tablilla__board {
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.2),
        0 .55rem 1.1rem rgba(70,40,16,.22),
        0 0 0 2px rgba(212, 168, 0, .18);
}
.group--highest .tablilla__name {
    font-size: clamp(.58rem, .44vw + .4rem, .8rem);
    font-weight: 900;
}
.group--highest .tablilla__dan {
    color: #9b5f12;
    font-size: clamp(.36rem, .28vw + .28rem, .5rem);
}
.tablilla {
    position: relative;
    flex: 0 0 var(--nk-card-width);
    width: var(--nk-card-width);
    max-width: var(--nk-card-width);
    padding-top: .36rem;
}
.tablilla::before {
    content: "";
    position: absolute;
    top: .06rem;
    left: 50%;
    width: 2px;
    height: .36rem;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #58351c 0%, #ccb08d 100%);
}
.tablilla__board {
    position: relative;
    min-height: calc(var(--nk-card-photo-height) + 2rem);
    padding: .34rem .16rem .22rem;
    border-radius: .18rem;
    background:
        linear-gradient(90deg, rgba(92,54,23,.12), rgba(255,255,255,.18), rgba(92,54,23,.12)),
        linear-gradient(180deg, var(--nk-wood-1) 0%, #d9ac74 36%, var(--nk-wood-2) 68%, var(--nk-wood-3) 100%);
    border: 1px solid rgba(84, 48, 23, .34);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.15), 0 .35rem .85rem rgba(70,40,16,.16);
}
.tablilla__board::before {
    content: "";
    position: absolute;
    top: .22rem;
    left: 50%;
    width: .46rem;
    height: .46rem;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, #5a3317 0%, #7e5229 64%, #d8b084 66%, #d8b084 100%);
}
.tablilla__inner { display: flex; align-items: stretch; justify-content: center; gap: .12rem; }
.tablilla__photo-frame {
    width: var(--nk-card-photo-width);
    height: var(--nk-card-photo-height);
    padding: 2px;
    border-radius: .58rem;
    background: rgba(255, 250, 244, .82);
    border: 1px solid rgba(103, 60, 28, .16);
}
.tablilla__name-ja-rail {
    width: clamp(12px, .8vw, 16px);
    height: var(--nk-card-photo-height);
    border-radius: 999px;
    background: rgba(251, 245, 237, .55);
    border: 1px solid rgba(122,79,43,.14);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .18rem .05rem;
}
.tablilla__name-ja {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    color: #5b3418;
    font: 700 clamp(.54rem, .42vw, .68rem)/1.02 "Noto Serif JP", Georgia, serif;
}
.tablilla__photo, .tablilla__photo-placeholder {
    width: 100%;
    height: 100%;
    border-radius: .7rem;
    overflow: hidden;
    border: 1px solid rgba(92,54,23,.22);
    background: rgba(255,248,238,.92);
}
.tablilla__photo { object-fit: cover; object-position: center 24%; }
.tablilla__photo-placeholder {
    display: grid;
    place-items: center;
    color: #86664b;
    font: 800 .45rem/1 Arial, sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.tablilla__footer {
    margin-top: .12rem;
    min-height: 1.05rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.tablilla__name {
    width: 100%;
    color: var(--nk-ink);
    font: 800 clamp(.5rem, .38vw + .38rem, .68rem)/1.04 Arial, sans-serif;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tablilla__dan {
    color: #7c5224;
    font: 900 clamp(.32rem, .22vw + .25rem, .42rem)/1 Arial, sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-top: .05rem;
    white-space: nowrap;
}
.nk-empty, .nk-error {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    font: 700 1.05rem/1.35 Arial, sans-serif;
}
.nk-empty { color: var(--nk-muted); }
.nk-error { color: #7a1f18; background: rgba(255, 243, 241, .82); }

@media (max-width: 1024px) {
    body { overflow: auto; }
    .nk-board-stage, .nk-board-viewport { align-items: flex-start; overflow: visible; }
    .nk-panel { width: 100%; min-height: 100vh; height: auto; overflow: visible; }
    .groups-row { overflow-x: auto; overflow-y: hidden; justify-content: flex-start; padding-bottom: .25rem; }
    .group[style*="--nk-desktop-order"] { order: initial; }
}

@media (max-width: 767px) {
    :root {
        --nk-post-space: .55rem;
        --nk-panel-padding-x: .55rem;
        --nk-panel-padding-top: 5.2rem;
        --nk-panel-padding-bottom: .8rem;
        --nk-shelf-gap: 1rem;
        --nk-group-gap: .7rem;
        --nk-card-gap: .24rem;
        --nk-card-width: min(34vw, 128px);
    }
    body { overflow: auto; }
    .nk-board-stage, .nk-board-viewport { min-height: auto; align-items: flex-start; overflow: visible; }
    .nk-panel::before, .nk-panel::after { top: 4rem; bottom: .55rem; width: .7rem; }
    .nk-panel__beam-top { left: .3rem; right: .3rem; height: 1.1rem; }
    .nk-panel__beam-mid { top: 2.85rem; left: .75rem; right: .75rem; height: .84rem; }
    .nk-panel__crest { top: 1.2rem; max-width: calc(100vw - 3rem); padding: .32rem .68rem; gap: .55rem; }
    .nk-panel__crest-logo, .nk-panel__crest-mark { width: 38px; height: 38px; }
    .nk-panel__crest-title { font-size: .9rem; letter-spacing: .06em; white-space: normal; text-align: center; }
    .nk-panel__shelves { height: auto; min-height: 0; }
    .shelf-row { flex: 0 0 auto; padding-top: 1rem; }
    .groups-row { flex-wrap: wrap; justify-content: center; row-gap: .95rem; overflow: visible; padding-inline: .15rem; }
    .group { width: 100%; max-width: 100%; }
    .group--priority, .group--highest { margin-inline: 0; transform: none; }
    .group-label { max-width: min(92vw, 18rem); white-space: normal; text-align: center; font-size: .82rem; line-height: 1.1; padding: .28rem .7rem; }
    .group--highest .group-label { max-width: min(92vw, 19rem); padding: .32rem .82rem; font-size: .9rem; }
    .cards-row { flex-wrap: wrap; justify-content: center; padding-top: .2rem; }
    .cards-row::before { left: 1rem; right: 1rem; }
    .tablilla, .group--priority .tablilla, .group--highest .tablilla { flex: 0 0 var(--nk-card-width); width: var(--nk-card-width); max-width: var(--nk-card-width); }
    .tablilla__name { font-size: .76rem; }
    .tablilla__dan { font-size: .46rem; }
}