:root {
--n36-bg0: #ffffff;
--n36-bg1: #ffffff;
--n36-bg2: #f3f1ef;
--n36-panel: #ffffff;
--n36-ink: #14110f;
--n36-ink-dim: #5a524e;
--n36-accent: #8a2424;
--n36-accent-2: #c44a62;
--n36-accent-soft: #e8c4c8;
--n36-good: #2f6b3a;
--n36-bad: #a61e1e;
--n36-line: rgba(20, 17, 15, 0.14);
--n36-line-strong: rgba(20, 17, 15, 0.28);
--n36-font-display: "Alegreya", "Palatino Linotype", Georgia, serif;
--n36-font-body: "Rubik", "Segoe UI", sans-serif;
--n36-radius: 12px;
--n36-shadow: none;
--n36-img: ../img;
}
.n36-html,
.n36-body {
margin: 0;
min-height: 100%;
height: 100%;
background: var(--n36-bg0);
color: var(--n36-ink);
font-family: var(--n36-font-body);
font-size: 16px;
line-height: 1.45;
-webkit-font-smoothing: antialiased;
}
.n36-html:has(.n36-board),
.n36-body:has(.n36-board) {
overflow: hidden;
}
.n36-overlay-html,
.n36-overlay-body {
background: transparent !important;
}
#n36-root,
.n36-embed {
min-height: 100vh;
min-height: 100dvh;
}
#n36-root:has(.n36-board) {
height: 100%;
max-height: 100%;
min-height: 0;
overflow: hidden;
}
.n36-embed {
min-height: 70vh;
border-radius: var(--n36-radius);
overflow: hidden;
}
.n36-shell {
position: relative;
min-height: 100vh;
padding: 0.85rem clamp(1rem, 3vw, 2rem) 1.5rem;
box-sizing: border-box;
}
.n36-atmosphere {
pointer-events: none;
position: absolute;
inset: 0;
background: #ffffff;
z-index: 0;
}
.n36-shell > *:not(.n36-atmosphere) {
position: relative;
z-index: 1;
}
.n36-brand {
text-align: center;
margin: 0.6rem auto 1rem;
max-width: 36rem;
box-shadow: none !important;
border: none !important;
background: transparent !important;
outline: none !important;
}
.n36-brand h1,
.n36-logo {
font-family: var(--n36-font-display);
font-weight: 700;
letter-spacing: 0.04em;
color: var(--n36-accent);
margin: 0;
font-size: clamp(2.2rem, 6vw, 3.4rem);
}
.n36-brand-home {
margin: 0;
text-align: left;
max-width: none;
padding: 0;
}
.n36-brand-home h1,
.n36-home-title {
font-family: var(--n36-font-display);
font-size: clamp(1.85rem, 3.4vw, 2.45rem);
font-weight: 900;
letter-spacing: 0.02em;
line-height: 1.08;
text-transform: uppercase;
color: var(--n36-ink);
margin: 0;
}
.n36-brand-sm h1 {
font-size: 1.45rem;
}
.n36-eyebrow {
text-transform: uppercase;
letter-spacing: 0.16em;
font-size: 0.68rem;
color: var(--n36-ink-dim);
margin: 0.25rem 0 0;
opacity: 0.85;
}
.n36-brand-home .n36-eyebrow {
margin-top: 0.35rem;
font-size: 0.82rem;
letter-spacing: 0.01em;
text-transform: none;
color: var(--n36-ink);
opacity: 1;
}
.n36-lead {
color: var(--n36-ink);
font-size: 1.08rem;
line-height: 1.5;
opacity: 0.92;
}
.n36-create,
.n36-join,
.n36-home-public,
.n36-lobby section,
.n36-action-panel,
.n36-modal-card {
background: var(--n36-panel);
border: 1px solid var(--n36-ink);
border-radius: var(--n36-radius);
padding: 1rem 1.1rem;
max-width: 28rem;
margin: 0 auto 0.85rem;
box-shadow: none;
}
.n36-join {
max-width: 28rem;
}
.n36-create label,
.n36-join label,
.n36-invite label {
display: block;
margin-bottom: 0.75rem;
font-size: 0.95rem;
font-weight: 600;
color: var(--n36-ink);
}
.n36-create input,
.n36-join input,
.n36-inline-form input,
.n36-invite input {
display: block;
width: 100%;
margin-top: 0.35rem;
padding: 0.6rem 0.75rem;
border-radius: 6px;
border: 1px solid var(--n36-line-strong);
background: #faf8f6;
color: var(--n36-ink);
font: inherit;
font-size: 1rem;
box-sizing: border-box;
}
.n36-create input[type='radio'],
.n36-join input[type='radio'] {
appearance: auto;
display: inline-block !important;
width: 1.05rem !important;
max-width: 1.05rem;
min-width: 1.05rem;
height: 1.05rem;
margin: 0 !important;
padding: 0 !important;
flex: 0 0 1.05rem;
accent-color: var(--n36-accent);
vertical-align: middle;
}
.n36-create .n36-check,
.n36-join .n36-check,
.n36-public-toggle .n36-check {
display: flex;
align-items: flex-start;
gap: 0.45rem;
margin-bottom: 0.55rem;
}
.n36-create input[type='checkbox'],
.n36-join input[type='checkbox'] {
appearance: auto;
display: inline-block !important;
width: 1.05rem !important;
max-width: 1.05rem;
min-width: 1.05rem;
height: 1.05rem;
margin: 0.12rem 0 0 !important;
padding: 0 !important;
flex: 0 0 1.05rem;
accent-color: var(--n36-accent);
vertical-align: middle;
border: none;
background: transparent;
}
.n36-create input::placeholder,
.n36-join input::placeholder,
.n36-inline-form input::placeholder {
color: #8a8078;
}
.n36-opt {
font-weight: 400;
color: var(--n36-ink-dim);
font-size: 0.85em;
}
.n36-radio {
display: flex !important;
flex-direction: row;
gap: 0.65rem;
align-items: center;
margin: 0.35rem 0;
color: var(--n36-ink);
font-weight: 500;
width: 100%;
box-sizing: border-box;
}
.n36-mode-fieldset {
border: 1px solid var(--n36-line-strong);
border-radius: 6px;
margin: 0 0 0.85rem;
padding: 0.55rem 0.75rem 0.65rem;
}
.n36-mode-fieldset .n36-radio {
white-space: nowrap;
}
fieldset {
border: 1px solid var(--n36-line-strong);
border-radius: 6px;
margin: 0 0 1rem;
padding: 0.75rem;
}
legend {
padding: 0 0.35rem;
color: var(--n36-ink);
font-weight: 600;
}
.n36-btn {
appearance: none;
border: 1px solid var(--n36-ink);
background: var(--n36-ink);
color: #fff;
font: inherit;
font-weight: 700;
padding: 0.75rem 1.15rem;
border-radius: 6px;
cursor: pointer;
text-decoration: none;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.n36-btn:hover:not(:disabled) {
background: #2a2420;
border-color: var(--n36-accent);
color: #fff;
text-decoration: none;
}
.n36-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.n36-btn-primary {
background: var(--n36-accent);
color: #ffffff;
border-color: var(--n36-accent);
width: 100%;
margin-top: 0.5rem;
}
.n36-btn-primary:hover:not(:disabled) {
background: #a32e2e;
border-color: #a32e2e;
color: #ffffff;
}
.n36-turn-start {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
width: 100%;
}
.n36-turn-start .n36-btn-primary {
width: auto;
min-width: 14rem;
margin-top: 0;
}
.n36-rest-alt {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
margin-top: 0.35rem;
width: 100%;
max-width: 28rem;
}
.n36-rest-or {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--n36-ink-dim);
}
.n36-rest-card {
width: 100%;
margin: 0;
text-align: left;
}
.n36-bard-offer {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
width: 100%;
}
.n36-bard-offer > .n36-btn-primary {
width: auto;
min-width: 14rem;
}
.n36-bard-card {
width: 100%;
margin: 0;
text-align: left;
padding: 0.55rem 0.75rem 0.65rem;
border-color: var(--n36-ink);
border-left-color: var(--n36-accent);
background:
linear-gradient(135deg, rgba(196, 74, 98, 0.1) 0%, transparent 45%),
#fffaf8;
}
.n36-bard-card .n36-skill-kicker {
color: var(--n36-accent);
font-size: 0.62rem;
margin-bottom: 0.2rem;
}
.n36-bard-progress {
margin: 0.2rem 0 0;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--n36-ink-dim);
}
.n36-bard-card .n36-skill-name {
color: var(--n36-ink);
}
.n36-die-pick-opts {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: stretch;
gap: 0.5rem;
margin: 0 0 0.65rem;
width: 100%;
max-width: 22rem;
box-sizing: border-box;
}
.n36-bard-card .n36-skill-rule {
margin: 0 0 0.3rem;
font-size: 0.72rem;
font-weight: 400;
line-height: 1.32;
color: var(--n36-ink-dim);
}
.n36-bard-use-btn,
.n36-treasure-offer-btn {
width: 100%;
margin: 0.25rem 0 0.1rem;
min-height: auto;
font-weight: 600;
font-size: 0.76rem;
line-height: 1.18;
padding: 0.3rem 0.5rem;
letter-spacing: -0.01em;
}
.n36-treasure-offer-btn {
display: flex !important;
align-items: center;
justify-content: flex-start;
gap: 0.35rem;
text-align: left;
}
.n36-treasure-offer-chips {
display: inline-flex;
align-items: center;
gap: 0.18rem;
flex: 0 0 auto;
}
.n36-treasure-offer-btn .n36-chip-treasure-offer {
width: 1.28rem;
height: 1.28rem;
border-width: 1.5px;
}
.n36-treasure-offer-btn .n36-chip-treasure-offer .n36-face-pips {
width: 68%;
height: 68%;
}
.n36-treasure-offer-label {
flex: 1 1 auto;
min-width: 0;
}
.n36-bard-card .n36-die-pick-opts {
justify-content: center;
margin-left: auto;
margin-right: auto;
width: auto;
max-width: 100%;
}
.n36-bard-card .n36-die-pick-opts .n36-die-pick-btn {
flex: 0 0 auto;
min-width: 6.5rem;
}
.n36-keep-choice .n36-die-pick-opts {
margin: 0.45rem auto 0;
}
.n36-die-pick-opts .n36-die-pick-btn {
flex: 1 1 0;
width: auto;
min-width: 0;
margin: 0;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.35rem;
padding: 0.55rem 0.65rem;
}
.n36-die-pick-label {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: inherit;
opacity: 0.9;
}
.n36-die-pick-face {
display: grid;
place-items: center;
width: 2.1rem;
height: 2.1rem;
border-radius: 6px;
border: 2px solid var(--n36-ink);
background: #ffffff;
color: var(--n36-ink);
box-shadow: none;
}
.n36-die-pick-btn.is-keep .n36-die-pick-face {
border-color: var(--n36-ink);
color: var(--n36-ink);
background: #ffffff;
}
.n36-die-pick-btn.is-blocked .n36-die-pick-face {
border-color: var(--n36-ink);
color: var(--n36-ink);
opacity: 0.4;
background: #ffffff;
}
.n36-die-pick-face .n36-face-pips {
width: 1.35rem;
height: 1.35rem;
gap: 2px;
}
.n36-die-pick-face .n36-pip.is-on {
background: var(--n36-ink);
box-shadow: none;
}
.n36-btn-quiet {
background: #ffffff;
border-color: var(--n36-ink);
color: var(--n36-ink);
font-size: 0.85rem;
font-weight: 700;
padding: 0.4rem 0.75rem;
}
.n36-btn-quiet:hover:not(:disabled) {
background: var(--n36-bg2);
border-color: var(--n36-ink);
color: var(--n36-ink);
}
.n36-link {
background: none;
border: none;
color: var(--n36-accent);
cursor: pointer;
font: inherit;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
padding: 0;
}
.n36-inline-form.is-loading {
opacity: 0.88;
}
.n36-inline-form.is-loading input:disabled {
background: var(--n36-bg2);
color: var(--n36-ink-dim);
}
.n36-btn-spinner {
display: inline-block;
width: 0.85em;
height: 0.85em;
margin-right: 0.4em;
border: 2px solid rgba(255, 255, 255, 0.35);
border-top-color: #fff;
border-radius: 50%;
animation: n36-spin 0.65s linear infinite;
vertical-align: -0.12em;
}
@keyframes n36-spin {
to {
transform: rotate(360deg);
}
}
#n36-root.is-busy .n36-btn-primary,
#n36-root.is-busy .n36-btn-option,
#n36-root.is-busy .n36-die-pick-btn,
#n36-root.is-busy .n36-die-pick-hit {
pointer-events: none;
opacity: 0.72;
}
.n36-error {
color: var(--n36-bad);
text-align: center;
font-weight: 600;
}
.n36-btn:focus-visible,
.n36-board-menu-item:focus-visible,
.n36-link:focus-visible {
outline: 2px solid var(--n36-accent, #8a2424);
outline-offset: 2px;
}
.n36-net-toast {
position: fixed;
left: 50%;
bottom: calc(1rem + env(safe-area-inset-bottom));
transform: translateX(-50%);
z-index: 10040;
max-width: min(28rem, calc(100vw - 2rem));
padding: 0.55rem 0.9rem;
border-radius: 8px;
background: rgba(20, 17, 15, 0.92);
color: #fff;
font-size: 0.85rem;
font-weight: 600;
text-align: center;
pointer-events: none;
}
.n36-net-toast[hidden] {
display: none;
}
.n36-code {
color: var(--n36-ink-dim);
}
.n36-code strong {
color: var(--n36-accent);
letter-spacing: 0.12em;
font-size: 1.25rem;
}
.n36-stake {
color: var(--n36-ink);
font-weight: 600;
}
.n36-players-list h2,
.n36-log h2,
.n36-modal-card h2,
.n36-help-section h2 {
color: var(--n36-ink);
}
.n36-players-list ul {
list-style: none;
padding: 0;
margin: 0;
}
.n36-players-list li {
display: flex;
gap: 0.5rem;
align-items: center;
padding: 0.5rem 0;
border-bottom: 1px solid var(--n36-line);
color: var(--n36-ink);
font-weight: 600;
min-width: 0;
}
.n36-players-list .n36-pseudo {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.n36-players-list .n36-tag,
.n36-players-list .n36-link {
flex-shrink: 0;
}
.n36-tag {
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #ffffff;
background: var(--n36-accent);
padding: 0.15rem 0.4rem;
border-radius: 4px;
font-weight: 700;
line-height: 1.2;
flex-shrink: 0;
}
.n36-tag-decide {
background: var(--n36-accent-2);
color: #fff;
}
.n36-tag-play {
display: inline-block;
animation: n36-tag-play-pulse 1.35s ease-in-out infinite;
}
@keyframes n36-tag-play-pulse {
0%,
100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(138, 36, 36, 0.55);
}
50% {
transform: scale(1.08);
box-shadow: 0 0 0 7px rgba(138, 36, 36, 0);
}
}
.n36-tag-out {
background: var(--n36-bg2);
color: var(--n36-ink);
border: 1px solid var(--n36-line-strong);
}
.n36-inline-form {
display: flex;
gap: 0.5rem;
max-width: 28rem;
margin: 0 auto 1rem;
}
.n36-lobby > #n36-start,
.n36-lobby > .n36-btn-primary {
display: block;
box-sizing: border-box;
max-width: 28rem;
width: 100%;
margin: 0.5rem auto 0.85rem;
}
.n36-setup .n36-home-panel > .n36-btn-primary {
display: block;
box-sizing: border-box;
max-width: none;
width: 100%;
margin: 0;
}
.n36-lobby-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.55rem;
width: 100%;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 40;
margin: 0;
padding: 0.75rem clamp(1rem, 3vw, 1.5rem) max(0.75rem, env(safe-area-inset-bottom));
box-sizing: border-box;
background: rgba(255, 255, 255, 0.97);
border-top: 1px solid var(--n36-line);
box-shadow: 0 -8px 22px rgba(20, 17, 15, 0.08);
backdrop-filter: blur(8px);
}
.n36-has-cookie-banner .n36-lobby-actions {
bottom: 3.75rem;
}
.n36-lobby-actions .n36-btn-primary,
.n36-lobby-actions .n36-lobby-cancel {
width: auto;
min-width: 12rem;
max-width: 100%;
margin: 0;
padding-inline: 1.35rem;
}
.n36-lobby-cancel {
color: var(--n36-bad);
border-color: var(--n36-bad);
}
.n36-lobby-cancel:hover:not(:disabled) {
background: rgba(166, 30, 30, 0.08);
border-color: var(--n36-bad);
color: #7a1515;
}
.n36-lobby > .n36-wait {
max-width: 28rem;
margin: 0.5rem auto 0.85rem;
}
.n36-setup .n36-wait {
max-width: none;
margin: 0;
text-align: left;
}
.n36-inline-form input {
flex: 1 1 0;
min-width: 0;
width: auto;
max-width: none;
margin: 0;
}
.n36-inline-form .n36-btn {
flex: 0 0 auto;
width: auto;
white-space: nowrap;
}
.n36-invite {
max-width: 28rem;
margin: 0 auto 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
background: var(--n36-panel);
border: 1px solid var(--n36-line-strong);
border-radius: var(--n36-radius);
padding: 1rem;
}
.n36-twitch {
text-align: center;
}
.n36-twitch a {
color: var(--n36-accent);
font-weight: 600;
} .n36-topbar {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
margin-bottom: 1rem;
}
.n36-logo {
font-size: 1.35rem !important;
display: inline;
}
.n36-meta {
color: var(--n36-ink-dim);
margin-left: 0.5rem;
font-size: 0.95rem;
}
.n36-progress-wrap {
text-align: center;
margin: 0 auto 1.5rem;
max-width: 40rem;
}
.n36-status-label {
margin: 0 0 0.4rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--n36-ink-dim);
}
.n36-status-col {
min-width: 0;
}
.n36-status-side {
display: flex;
flex-direction: column;
gap: 0.85rem;
justify-content: center;
}
.n36-status-block {
text-align: left;
}
.n36-phase {
display: none;
}
.n36-progress {
display: grid;
gap: 0.35rem;
}
.n36-progress-track {
height: 16px;
border-radius: 999px;
background: var(--n36-bg2);
border: 1px solid var(--n36-line-strong);
overflow: hidden;
}
.n36-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--n36-accent-2), var(--n36-accent));
transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.n36-progress-value {
font-family: var(--n36-font-display);
font-size: clamp(2.5rem, 8vw, 4rem);
line-height: 1;
color: var(--n36-ink);
font-weight: 900;
display: inline-flex;
align-items: flex-end;
justify-content: center;
gap: 0.15em;
}
.n36-progress-max {
font-size: 0.45em;
color: var(--n36-ink-dim);
padding-bottom: 0.12em;
}
.n36-odometer {
display: inline-flex;
gap: 0.06em;
height: 1em;
overflow: hidden;
}
.n36-odo-wheel {
display: inline-block;
width: 0.62em;
height: 1em;
overflow: hidden;
position: relative;
}
.n36-odo-strip {
display: flex;
flex-direction: column;
will-change: transform;
}
.n36-odo-strip > span {
display: flex;
align-items: center;
justify-content: center;
height: 1em;
line-height: 1;
font-size: 1em;
color: inherit;
}
.n36-progress-value.is-up .n36-odo-strip {
color: #8a2424;
}
.n36-progress-value.is-down .n36-odo-strip {
color: #1a3f78;
}
.n36-center-treasures {
display: flex;
gap: 0.4rem;
align-items: center;
flex-wrap: wrap;
min-height: 2rem;
}
.n36-effects-row {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
align-items: stretch;
min-height: 2rem;
}
.n36-effect {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin: 0;
padding: 0.35rem 0.6rem 0.35rem 0.7rem;
border-radius: 8px;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.02em;
border: 1px solid var(--n36-line-strong);
background: var(--n36-bg2);
color: var(--n36-ink);
line-height: 1;
box-shadow: none;
}
.n36-effect-name {
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 0.72rem;
}
.n36-effect-die {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.55rem;
height: 1.55rem;
border-radius: 5px;
border: 2px solid currentColor;
background: #ffffff;
flex-shrink: 0;
}
.n36-effect-die .n36-face-pips {
width: 72%;
height: 72%;
}
.n36-effect-die .n36-pip.is-on {
background: currentColor;
}
.n36-effect-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.55rem;
height: 1.55rem;
padding: 0 0.25rem;
border-radius: 5px;
border: 2px solid currentColor;
background: #ffffff;
font-size: 0.85rem;
font-variant-numeric: tabular-nums;
}
.n36-effect-btn {
cursor: pointer;
font: inherit;
min-height: 2.25rem;
transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.n36-effect-btn:hover,
.n36-effect-btn:focus-visible {
border-color: var(--n36-accent);
box-shadow: 0 0 0 2px rgba(58, 106, 176, 0.2);
}
.n36-effect-btn.is-open {
position: relative;
z-index: 2147483601;
}
.n36-effect-btn.is-open.is-tab-below {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom-width: 0;
padding-bottom: calc(0.35rem + 1px);
}
.n36-effect-btn.is-open.is-tab-above {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-top-width: 0;
padding-top: calc(0.35rem + 1px);
}
.n36-board .n36-effect-btn.is-open.is-tab-below {
padding-bottom: calc(0.15rem + 1px);
}
.n36-board .n36-effect-btn.is-open.is-tab-above {
padding-top: calc(0.15rem + 1px);
}
.n36-effect-info {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1rem;
height: 1rem;
margin-left: 0.1rem;
border-radius: 50%;
border: 1px solid currentColor;
font-size: 0.62rem;
font-weight: 800;
line-height: 1;
opacity: 0.85;
}
.n36-effect-sheet {
display: block;
}
.n36-effect-sheet-card {
position: fixed;
left: 8px;
top: 8px;
z-index: 2147483600;
width: min(22rem, calc(100vw - 16px));
max-height: min(70dvh, 28rem);
overflow: auto;
background: #fff;
border: 1px solid var(--n36-ink);
border-radius: 10px;
padding: 0.7rem 0.85rem 0.85rem;
box-sizing: border-box;
box-shadow: 0 10px 28px rgba(8, 6, 4, 0.22);
}
.n36-effect-sheet-card.is-attached-below {
border-top-left-radius: 0;
border-top-right-radius: 10px;
box-shadow: 0 8px 22px rgba(8, 6, 4, 0.18);
}
.n36-effect-sheet-card.is-attached-above {
border-bottom-left-radius: 0;
border-bottom-right-radius: 10px;
box-shadow: 0 -4px 22px rgba(8, 6, 4, 0.12);
}
.n36-effect-sheet.is-bless .n36-effect-sheet-card {
border-color: #3a6ab0;
}
.n36-effect-sheet.is-curse .n36-effect-sheet-card {
border-color: #7a4ab0;
}
.n36-effect-sheet.is-bard .n36-effect-sheet-card {
border-color: var(--n36-accent);
}
.n36-effect-btn.is-open.n36-bless.is-tab-below,
.n36-effect-btn.is-open.n36-bless.is-tab-above {
border-color: #3a6ab0;
}
.n36-effect-btn.is-open.n36-curse.is-tab-below,
.n36-effect-btn.is-open.n36-curse.is-tab-above {
border-color: #7a4ab0;
}
.n36-effect-btn.is-open.n36-bard.is-tab-below,
.n36-effect-btn.is-open.n36-bard.is-tab-above {
border-color: var(--n36-accent);
}
.n36-effect-sheet-head {
display: grid;
grid-template-columns: 1fr auto;
gap: 0.15rem 0.5rem;
align-items: start;
margin-bottom: 0.75rem;
}
.n36-effect-sheet-kicker {
grid-column: 1 / -1;
margin: 0;
font-size: 0.78rem;
font-weight: 600;
color: var(--n36-ink-dim);
}
.n36-effect-sheet-title {
margin: 0;
font-size: 1rem;
line-height: 1.25;
}
.n36-effect-sheet-close {
border: 0;
background: none;
color: var(--n36-ink);
font-size: 1.45rem;
line-height: 1;
cursor: pointer;
padding: 0.1rem 0.2rem;
}
.n36-effect-sheet-list {
margin: 0 0 0.75rem;
padding-left: 1.1rem;
font-size: 0.9rem;
line-height: 1.45;
}
.n36-effect-sheet-list li + li {
margin-top: 0.35rem;
}
.n36-effect-sheet-duration {
margin: 0;
font-size: 0.82rem;
font-style: italic;
color: var(--n36-ink-dim);
}
.n36-effect-sheet.is-bless .n36-effect-sheet-title {
color: #1a3f78;
}
.n36-effect-sheet.is-curse .n36-effect-sheet-title {
color: #5a2a90;
}
.n36-effect-sheet.is-bard .n36-effect-sheet-title {
color: #8a4a10;
}
.n36-help-effects {
margin-top: 0.35rem;
}
.n36-help-effects > ul {
margin: 0.35rem 0 0;
padding-left: 1rem;
}
.n36-help-effects > ul > li + li {
margin-top: 0.55rem;
}
.n36-help-effects em {
display: block;
margin-top: 0.25rem;
font-size: 0.88em;
color: var(--n36-ink-dim);
}
button.n36-die-tag {
padding: 0;
border: 0;
background: none;
font: inherit;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
}
button.n36-die-tag:hover,
button.n36-die-tag:focus-visible {
filter: brightness(0.85);
}
button.n36-skill-curse-badge,
button.n36-extra-turn-badge {
font: inherit;
cursor: pointer;
}
button.n36-extra-turn-badge:hover,
button.n36-extra-turn-badge:focus-visible,
button.n36-skill-curse-badge:hover,
button.n36-skill-curse-badge:focus-visible {
filter: brightness(0.95);
box-shadow: 0 0 0 2px rgba(58, 106, 176, 0.25);
}
.n36-bless {
color: #1a3f78;
border-color: #3a6ab0;
background: #e4eefc;
}
.n36-curse {
color: #4a2a78;
border-color: #7a4ab0;
background: #f0e8fc;
}
.n36-bard {
color: #6a2418;
border-color: var(--n36-accent);
background: #f8ece8;
}
.n36-seats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 0.75rem;
margin-bottom: 1.25rem;
}
.n36-seat {
background: var(--n36-panel);
border: 1px solid var(--n36-ink);
border-radius: var(--n36-radius);
padding: 0.85rem;
transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.n36-seat.is-active {
border-color: var(--n36-accent);
border-width: 2px;
box-shadow: none;
transform: none;
}
.n36-seat.is-deciding {
border-color: var(--n36-accent-2);
border-width: 2px;
box-shadow: 0 0 0 1px rgba(232, 116, 58, 0.4), 0 8px 24px rgba(20, 17, 15, 0.12);
transform: translateY(-2px);
}
.n36-riposte {
border: 2px solid var(--n36-accent-2);
border-radius: var(--n36-radius);
padding: 1rem;
background: rgba(232, 116, 58, 0.18);
color: var(--n36-ink);
}
.n36-riposte p {
color: var(--n36-ink);
}
.n36-riposte-who {
color: var(--n36-accent);
font-size: 1.1rem;
margin: 0 0 0.4rem;
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
}
.n36-riposte-overlay {
position: fixed;
inset: 0;
z-index: 120;
display: flex;
align-items: center;
justify-content: center;
padding: max(0.75rem, env(safe-area-inset-top))
max(0.75rem, env(safe-area-inset-right))
max(0.75rem, env(safe-area-inset-bottom))
max(0.75rem, env(safe-area-inset-left));
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(4px);
box-sizing: border-box;
overflow: auto;
-webkit-overflow-scrolling: touch;
animation: n36-fade 0.25s ease-out;
}
.n36-riposte-card {
width: min(100%, 24rem);
max-width: 100%;
margin: auto;
padding: 1rem 0.95rem 1.05rem;
border-radius: 10px;
border: 1px solid var(--n36-ink);
border-left: 3px solid var(--n36-accent);
background: #ffffff;
box-shadow: 0 10px 32px rgba(20, 17, 15, 0.14);
color: var(--n36-ink);
text-align: center;
box-sizing: border-box;
overflow-wrap: anywhere;
word-break: break-word;
animation: n36-sum-pop 0.35s cubic-bezier(0.2, 1.2, 0.3, 1);
}
.n36-riposte-kicker {
margin: 0 0 0.65rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--n36-accent);
}
.n36-riposte-copy {
margin: 0 0 1rem;
font-size: 0.95rem;
line-height: 1.55;
color: var(--n36-ink);
text-align: center;
}
.n36-riposte-story {
margin: 0 0 1rem;
text-align: center;
overflow-wrap: normal;
word-break: normal;
}
.n36-riposte-line {
margin: 0 0 0.65rem;
font-size: 0.95rem;
line-height: 1.55;
color: var(--n36-ink);
text-align: center;
overflow-wrap: normal;
word-break: normal;
}
.n36-riposte-line:last-child {
margin-bottom: 0;
}
.n36-riposte-line strong {
color: var(--n36-ink);
font-weight: 700;
}
.n36-riposte-phrase {
display: inline-flex;
align-items: center;
gap: 0.2rem;
flex-wrap: nowrap;
white-space: nowrap;
vertical-align: baseline;
}
.n36-riposte-token {
display: inline-flex;
vertical-align: middle;
margin: 0 0.08rem;
}
.n36-riposte-token .n36-chip {
flex-shrink: 0;
}
.n36-riposte-token .n36-d6-md .n36-d6-scene {
width: 38px;
height: 38px;
}
.n36-riposte-copy strong {
color: var(--n36-ink);
font-weight: 700;
}
.n36-riposte-alert {
margin: 0 0 0.85rem;
font-family: var(--n36-font-display, "Alegreya", Georgia, serif);
font-size: clamp(1.25rem, 4.5vw, 1.75rem);
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #b81e1e;
text-align: center;
line-height: 1.2;
}
#n36-focus-fx .n36-riposte-alert {
margin-bottom: 0.35rem;
padding: 0.45rem 0.85rem;
background: #ffffff;
border: 2px solid var(--n36-ink);
border-radius: 6px;
}
#n36-focus-fx.is-handoff .n36-riposte-alert {
margin-bottom: 1rem;
font-size: clamp(1.35rem, 6vw, 1.9rem);
padding: 0;
background: transparent;
border: none;
border-radius: 0;
}
.n36-riposte-progress {
margin-top: 0.15rem;
padding-top: 0.85rem;
border-top: 1px solid var(--n36-line);
}
.n36-riposte-progress-label {
margin: 0 0 0.45rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--n36-ink-dim);
text-align: center;
}
.n36-progress-riposte {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.n36-riposte-turn-order {
margin-top: 0.85rem;
padding-top: 0.85rem;
border-top: 1px solid var(--n36-line);
}
.n36-riposte-turn-order-label {
margin: 0 0 0.5rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--n36-ink-dim);
text-align: center;
}
.n36-turn-order-list {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.35rem 0.2rem;
margin: 0;
padding: 0;
list-style: none;
}
.n36-turn-order-item {
position: relative;
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 0.12rem;
max-width: 5.5rem;
margin-right: 0.55rem;
padding: 0.28rem 0.42rem;
border-radius: 6px;
border: 1px solid var(--n36-line);
background: #faf8f4;
text-align: center;
}
.n36-turn-order-item:not(:last-child)::after {
content: "→";
position: absolute;
right: -0.72rem;
top: 50%;
transform: translateY(-50%);
color: var(--n36-ink-dim);
font-size: 0.75rem;
pointer-events: none;
}
.n36-turn-order-item:last-child {
margin-right: 0;
}
.n36-turn-order-name {
font-size: 0.78rem;
font-weight: 700;
line-height: 1.2;
color: var(--n36-ink);
overflow-wrap: anywhere;
word-break: break-word;
}
.n36-turn-order-name em {
font-style: normal;
font-weight: 600;
color: var(--n36-ink-dim);
}
.n36-turn-order-tag {
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--n36-ink-dim);
line-height: 1.1;
}
.n36-turn-order-item.is-current {
border-color: var(--n36-accent);
background: rgba(232, 116, 58, 0.1);
}
.n36-turn-order-item.is-current .n36-turn-order-tag {
color: var(--n36-accent);
}
.n36-turn-order-item.is-self {
border-color: var(--n36-ink);
box-shadow: inset 0 0 0 1px rgba(20, 17, 15, 0.08);
}
.n36-turn-order-item.is-deciding {
border-color: #b81e1e;
background: rgba(184, 30, 30, 0.06);
}
.n36-riposte-card .n36-riposte-who {
margin: 0 0 0.75rem;
font-size: 1.05rem;
font-weight: 700;
color: var(--n36-ink);
}
.n36-riposte-card p {
margin: 0 0 0.55rem;
font-size: 0.95rem;
line-height: 1.45;
color: var(--n36-ink-dim);
overflow-wrap: anywhere;
word-break: break-word;
}
.n36-riposte-card p strong {
color: var(--n36-ink);
font-weight: 700;
}
.n36-riposte-actions {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.5rem;
margin-top: 1rem;
}
.n36-riposte-actions .n36-btn {
width: 100%;
margin: 0;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
line-height: 1.25;
box-sizing: border-box;
}
.n36-riposte-actions .n36-btn-primary {
margin-top: 0;
}
.n36-seat.is-out {
opacity: 0.55;
filter: grayscale(0.5);
}
.n36-seat.is-eliminating {
animation: n36-seat-eliminate 1.35s cubic-bezier(0.2, 0.9, 0.3, 1) both;
z-index: 2;
}
@keyframes n36-seat-eliminate {
0% {
transform: scale(1);
filter: none;
opacity: 1;
box-shadow: 0 0 0 0 rgba(200, 40, 30, 0);
}
18% {
transform: scale(1.045);
filter: saturate(1.2);
opacity: 1;
box-shadow:
0 0 0 2px rgba(220, 70, 45, 0.85),
0 0 28px rgba(180, 30, 20, 0.45);
}
42% {
transform: scale(0.97) rotate(-0.8deg);
filter: grayscale(0.2) brightness(0.92);
}
70% {
transform: scale(0.99);
filter: grayscale(0.45) brightness(0.88);
opacity: 0.72;
}
100% {
transform: scale(1);
filter: grayscale(0.55);
opacity: 0.5;
box-shadow: none;
}
}
.n36-seat h3 {
margin: 0;
font-size: 1.05rem;
color: var(--n36-ink);
font-weight: 700;
}
.n36-role {
font-size: 0.8rem;
color: var(--n36-accent);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
}
.n36-skill {
font-size: 0.82rem;
color: var(--n36-ink-dim);
font-style: italic;
margin: 0.4rem 0;
min-height: 2.2em;
line-height: 1.35;
}
.n36-seat-meta {
display: flex;
justify-content: space-between;
font-size: 0.8rem;
color: var(--n36-ink);
font-weight: 600;
}
.n36-seat-treasures {
margin-top: 0.45rem;
display: flex;
gap: 0.25rem;
flex-wrap: wrap;
color: var(--n36-ink-dim);
}
.n36-dice-board {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.45rem;
margin-bottom: 0;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
.n36-dice-row {
display: flex;
gap: 1.1rem;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
min-height: 0;
perspective: 600px;
}
.n36-die-slot {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.45rem;
}
.n36-die-pick-hit {
appearance: none;
display: block;
margin: 0;
padding: 0;
border: 0;
background: transparent;
border-radius: 12px;
cursor: pointer;
line-height: 0;
color: inherit;
transition: transform 0.18s ease, filter 0.18s ease;
}
.n36-die-pick-hit,
.n36-die-pick-hit .n36-d6,
.n36-die-pick-hit .n36-d6-scene,
.n36-die-pick-hit .n36-d6-face {
cursor: pointer;
}
.n36-die-pick-hit:focus-visible {
outline: 2px solid var(--n36-accent, #8a2424);
outline-offset: 4px;
}
.n36-die-slot.is-keep-ok .n36-die-pick-hit:hover,
.n36-die-slot.is-keep-ok .n36-die-pick-hit:focus-visible {
transform: translateY(-2px);
filter: drop-shadow(0 0 0.5px var(--n36-accent, #8a2424))
drop-shadow(0 6px 12px rgba(20, 17, 15, 0.18));
}
.n36-die-slot.is-keep-blocked {
opacity: 0.7;
}
.n36-die-slot.is-keep-blocked,
.n36-die-slot.is-keep-blocked .n36-d6,
.n36-die-slot.is-keep-blocked .n36-d6-scene,
.n36-die-slot.is-keep-blocked .n36-d6-face {
cursor: not-allowed;
}
.n36-die-tag.is-pick-hint {
color: var(--n36-accent);
}
.n36-die-tag {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--n36-ink-dim);
}
.n36-die-tag.is-bless {
color: #1a3f78;
}
.n36-die-tag.is-curse {
color: #5a2a90;
}
.n36-die-tag.is-riposte {
color: #a84820;
}
.n36-die-tag.is-treasure {
color: #8a2424;
}
.n36-die-slot.is-riposte-kept .n36-d6-face,
.n36-d6.is-riposte-kept .n36-d6-face {
box-shadow:
0 0 0 2px rgba(232, 116, 58, 0.75),
0 0 18px rgba(232, 116, 58, 0.35);
}
.n36-die-slot.is-treasure-flip .n36-d6-face,
.n36-d6.is-treasure-flip .n36-d6-face {
box-shadow:
0 0 0 2px rgba(138, 36, 36, 0.85),
0 0 20px rgba(138, 36, 36, 0.4);
}
.n36-d6.is-riposte-roll .n36-d6-face {
box-shadow:
0 0 0 2px rgba(232, 116, 58, 0.9),
0 0 22px rgba(232, 116, 58, 0.45);
}
.n36-riposte-result {
width: 100%;
max-width: min(22rem, 100%);
margin: 0.15rem auto 0;
padding: 0.75rem 0.85rem 0.85rem;
border-radius: 10px;
text-align: center;
background: #fff8f4;
border: 1px solid rgba(168, 72, 32, 0.45);
box-shadow: none;
box-sizing: border-box;
overflow-wrap: anywhere;
word-break: break-word;
}
.n36-riposte-result.is-flash {
animation: n36-riposte-result-flash 0.9s ease;
}
@keyframes n36-riposte-result-flash {
0%,
100% {
transform: scale(1);
}
40% {
transform: scale(1.03);
box-shadow: 0 0 0 2px rgba(168, 72, 32, 0.45);
}
}
.n36-riposte-result-kicker {
margin: 0 0 0.2rem;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #a84820;
}
.n36-riposte-result-title {
margin: 0 0 0.55rem;
font-family: var(--n36-font-display);
font-size: 1.05rem;
font-weight: 700;
color: var(--n36-ink);
}
.n36-riposte-result-dice {
display: flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
margin-bottom: 0.45rem;
}
.n36-riposte-result-die {
width: 2.35rem;
height: 2.35rem;
border-radius: 7px;
display: grid;
place-items: center;
background: #ffffff;
border: 2px solid var(--n36-ink);
box-shadow: none;
}
.n36-riposte-result-die.is-from {
opacity: 0.55;
filter: grayscale(0.35);
}
.n36-riposte-result-die.is-to {
box-shadow:
0 0 0 2px rgba(168, 72, 32, 0.75);
}
.n36-riposte-result-die .n36-face-pips {
width: 78%;
height: 78%;
}
.n36-riposte-result-arrow {
font-size: 1.15rem;
font-weight: 700;
color: #a84820;
}
.n36-riposte-result-sub {
margin: 0;
font-size: 0.9rem;
color: var(--n36-ink-dim);
}
.n36-riposte-result-sub strong {
color: var(--n36-ink);
}
.n36-die-slot:has(.is-kept),
.n36-die-slot.is-blessed,
.n36-die-slot.is-cursed,
.n36-die-slot.is-riposte-kept,
.n36-die-slot.is-treasure-flip {
gap: 0.55rem;
}
.n36-die-slot:has(.is-kept) .n36-die-tag:not(.is-bless):not(.is-curse):not(.is-riposte):not(.is-treasure) {
color: var(--n36-accent);
}
.n36-die-slot:has(.is-discarded) .n36-die-tag:not(.is-bless):not(.is-curse),
.n36-die-slot.is-moved .n36-die-tag:not(.is-bless):not(.is-curse) {
color: #6a625c;
}
.n36-die-slot.is-blessed .n36-d6-face,
.n36-d6.is-blessed-die .n36-d6-face {
box-shadow: 0 0 0 2px rgba(126, 176, 240, 0.65);
}
.n36-die-slot.is-cursed .n36-d6-face,
.n36-d6.is-cursed-die .n36-d6-face {
box-shadow: 0 0 0 2px rgba(180, 120, 240, 0.7);
}
.n36-die-slot.is-blessed.is-cursed .n36-d6-face,
.n36-d6.is-blessed-die.is-cursed-die .n36-d6-face {
box-shadow:
0 0 0 2px rgba(126, 176, 240, 0.75),
0 0 0 4px rgba(180, 120, 240, 0.55);
}
.n36-die-slot.is-curse-flash {
animation: n36-curse-flash 0.7s ease-out;
}
.n36-curse-dice-note {
margin: 0.4rem 0 0;
text-align: center;
font-size: 0.82rem;
font-weight: 700;
color: #5a2a90;
letter-spacing: 0.02em;
}
.n36-die-ghost {
width: 72px;
height: 72px;
border-radius: 10px;
border: 2px dashed rgba(20, 17, 15, 0.18);
background: rgba(0, 0, 0, 0.18);
box-sizing: border-box;
}
.n36-die-ghost-sm {
width: 52px;
height: 52px;
border-radius: 8px;
}
.n36-skill-hint {
margin: 0 0 0.55rem;
font-size: 0.78rem;
color: var(--n36-ink-dim);
font-style: italic;
}
.n36-skill-outcomes {
display: flex;
flex-direction: column;
gap: 0.35rem;
width: 100%;
min-width: 0;
margin-top: 0.1rem;
}
.n36-skill-card.is-used .n36-skill-outcomes {
margin-top: 0.25rem;
}
.n36-skill-outcomes .n36-skill-target {
margin: 0;
}
.n36-skill-target.is-miss {
background: rgba(20, 17, 15, 0.04);
border-color: var(--n36-line);
}
.n36-skill-target.is-miss .n36-skill-target-label {
color: var(--n36-ink-dim);
font-style: normal;
text-transform: none;
letter-spacing: 0.02em;
font-weight: 600;
font-size: 0.78rem;
line-height: 1.3;
overflow-wrap: anywhere;
}
.n36-skill-target.is-miss.is-label-only {
grid-template-columns: 1fr;
text-align: center;
padding: 0.35rem 0.5rem;
background: rgba(20, 17, 15, 0.03);
}
.n36-skill-card.is-used {
opacity: 1;
border-left-color: var(--n36-ink);
background:
linear-gradient(180deg, #f7f5f3 0%, #ffffff 100%);
}
.n36-skill-card.is-used .n36-skill-name {
margin-bottom: 0.45rem;
}
.n36-skill-card.is-cursed {
position: relative;
opacity: 1;
filter: none;
border-color: var(--n36-ink);
border-left-color: #5b2d82;
background:
linear-gradient(135deg, rgba(91, 45, 130, 0.1) 0%, transparent 50%),
#ffffff;
overflow: visible;
margin-top: 0.5rem;
padding-top: 1.15rem;
}
.n36-skill-card.is-cursed .n36-skill-name,
.n36-skill-card.is-cursed .n36-skill-rule {
color: var(--n36-ink-dim);
}
.n36-skill-curse-badge {
position: absolute;
top: -0.45rem;
right: 0.65rem;
z-index: 2;
padding: 0.28rem 0.55rem;
border-radius: 4px;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #fff;
background: #5b2d82;
border: 1px solid var(--n36-ink);
box-shadow: none;
animation: n36-sum-pop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.n36-skill-card.is-curse-hit {
animation: n36-curse-flash 0.75s ease-out;
}
@keyframes n36-curse-flash {
0%,
100% {
filter: grayscale(0.55);
}
40% {
filter: grayscale(0.2);
box-shadow: 0 0 0 3px rgba(180, 120, 240, 0.65), 0 0 22px rgba(140, 80, 220, 0.4);
}
}
.n36-effect-fly-curse .n36-effect-fly-die {
border-color: #c4a0f0;
background: linear-gradient(180deg, #c8a8f0, #6a3cac);
color: #1a1028;
}
.n36-effect-fly-curse .n36-effect-fly-label {
color: #f0e0ff;
text-shadow:
0 2px 8px rgba(0, 0, 0, 0.85),
0 0 14px rgba(50, 16, 80, 0.9);
}
.n36-effect-fly-curse .n36-pip.is-on {
background: #4a1212;
}
.n36-backlash-stage.n36-curse-end-stage {
border: 1px solid rgba(180, 120, 240, 0.55);
border-left: 4px solid #c4a0f0;
background:
radial-gradient(ellipse 80% 55% at 50% 0%, rgba(140, 80, 220, 0.35), transparent 70%),
linear-gradient(165deg, rgba(50, 22, 78, 0.97), rgba(20, 10, 32, 0.98));
box-shadow:
0 8px 28px rgba(0, 0, 0, 0.35),
0 0 32px rgba(140, 80, 220, 0.22);
}
.n36-backlash-stage.n36-curse-end-stage .n36-backlash-stage-kicker {
color: #e8d0ff;
}
.n36-backlash-stage.n36-curse-end-stage .n36-backlash-stage-title {
color: #ffffff;
text-shadow: 0 2px 14px rgba(140, 80, 220, 0.45);
}
.n36-curse-end-callout,
.n36-backlash-stage.n36-curse-end-stage .n36-backlash-stage-rule {
margin: 0;
font-size: 0.95rem;
line-height: 1.45;
color: #f0e4ff;
max-width: 100%;
overflow-wrap: anywhere;
}
.n36-backlash-stage.n36-curse-end-stage .n36-backlash-stage-result {
display: inline-block;
margin: 0.2rem 0 0.1rem;
padding: 0.5rem 0.7rem;
border-radius: 6px;
background: rgba(140, 80, 220, 0.22);
border: 1px solid rgba(200, 160, 255, 0.35);
color: #fff8f4;
font-size: 0.92rem;
font-weight: 700;
}
.n36-backlash-stage.n36-curse-end-stage .n36-wait {
color: rgba(232, 208, 255, 0.88);
}
#n36-die-move-fx {
position: fixed;
inset: 0;
z-index: 10000;
pointer-events: none;
overflow: hidden;
}
.n36-die-move {
position: fixed;
left: 0;
top: 0;
width: 72px;
height: 72px;
margin: 0;
transform: translate(-50%, -50%);
z-index: 10001;
opacity: 1;
will-change: transform, opacity;
}
.n36-die-move-face {
width: 72px;
height: 72px;
border-radius: 10px;
background: #ffffff;
border: 2px solid var(--n36-ink);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}
.n36-die-move-face .n36-face-pips {
width: 70%;
height: 70%;
}
.n36-die-move-face .n36-pip.is-on {
background: var(--n36-ink);
box-shadow: none;
}
.n36-die-move.is-flying {
animation: n36-die-relocate 0.48s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes n36-die-relocate {
0% {
transform: translate(-50%, -50%) translate(0, 0) scale(1);
opacity: 1;
}
70% {
opacity: 1;
}
100% {
transform: translate(-50%, -50%) translate(var(--n36-fly-x), var(--n36-fly-y)) scale(0.78);
opacity: 0.2;
}
} .n36-d6 {
appearance: none;
border: 0;
background: transparent;
padding: 0;
margin: 0;
cursor: default;
display: inline-block;
vertical-align: middle;
}
.n36-d6-scene {
perspective: 500px;
}
.n36-d6-lg .n36-d6-scene {
width: 72px;
height: 72px;
}
.n36-d6-md .n36-d6-scene {
width: 52px;
height: 52px;
}
.n36-d6-cube {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transform: rotateX(0deg) rotateY(0deg);
}
.n36-d6-face {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
border: 2px solid var(--n36-ink);
border-radius: 10px;
box-shadow: inset 0 0 0 1px rgba(20, 17, 15, 0.06);
backface-visibility: hidden;
}
.n36-d6-lg .n36-d6-face-1 { transform: rotateY(0deg) translateZ(36px); }
.n36-d6-lg .n36-d6-face-2 { transform: rotateY(90deg) translateZ(36px); }
.n36-d6-lg .n36-d6-face-3 { transform: rotateX(90deg) translateZ(36px); }
.n36-d6-lg .n36-d6-face-4 { transform: rotateX(-90deg) translateZ(36px); }
.n36-d6-lg .n36-d6-face-5 { transform: rotateY(-90deg) translateZ(36px); }
.n36-d6-lg .n36-d6-face-6 { transform: rotateY(180deg) translateZ(36px); }
.n36-d6-md .n36-d6-face-1 { transform: rotateY(0deg) translateZ(26px); }
.n36-d6-md .n36-d6-face-2 { transform: rotateY(90deg) translateZ(26px); }
.n36-d6-md .n36-d6-face-3 { transform: rotateX(90deg) translateZ(26px); }
.n36-d6-md .n36-d6-face-4 { transform: rotateX(-90deg) translateZ(26px); }
.n36-d6-md .n36-d6-face-5 { transform: rotateY(-90deg) translateZ(26px); }
.n36-d6-md .n36-d6-face-6 { transform: rotateY(180deg) translateZ(26px); }
.n36-d6.is-rolling .n36-d6-scene {
animation: n36-d6-bounce 0.95s ease-out;
}
.n36-d6.is-kept,
.n36-d6.is-blessed-die,
.n36-d6.is-cursed-die,
.n36-d6.is-riposte-kept,
.n36-d6.is-treasure-flip,
.n36-d6.is-riposte-roll {
padding: 3px;
}
.n36-d6.is-kept .n36-d6-face {
border-color: var(--n36-ink);
box-shadow: inset 0 0 0 1px rgba(20, 17, 15, 0.06), 0 0 0 2px var(--n36-ink);
}
.n36-d6.is-discarded {
opacity: 0.45;
filter: none;
transform: scale(0.88);
}
.n36-role-showcase {
display: none;
}
.n36-d6-skill .n36-d6-face {
background: #ffffff;
border-color: var(--n36-ink);
}
.n36-face-pips {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
width: 78%;
height: 78%;
gap: 4%;
}
.n36-pip {
border-radius: 50%;
background: transparent;
}
.n36-pip.is-on {
background: var(--n36-ink);
box-shadow: none;
} .n36-chip {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 6px;
background: linear-gradient(145deg, #e8c4c8, #e8c547);
border: 2px solid #8a2424;
vertical-align: middle;
}
.n36-chip .n36-face-pips {
width: 70%;
height: 70%;
}
.n36-chip .n36-pip.is-on {
background: #3a2a08;
}
.n36-chip-sm {
width: 1.45rem;
height: 1.45rem;
border-width: 1px;
}
@keyframes n36-d6-bounce {
0% {
transform: translateY(-18px) scale(0.92);
}
40% {
transform: translateY(4px) scale(1.04);
}
70% {
transform: translateY(-4px) scale(0.99);
}
100% {
transform: translateY(0) scale(1);
}
}
.n36-final {
margin: 0.25rem 0 0;
font-size: 1.15rem;
color: #fff;
font-weight: 700;
text-align: center;
}
.n36-sum-eq {
display: flex;
align-items: flex-end;
justify-content: center;
flex-wrap: wrap;
gap: 0.45rem 0.55rem;
margin: 0.65rem 0 0.15rem;
padding: 0.65rem 0.75rem;
border-radius: 10px;
background: linear-gradient(180deg, rgba(138, 36, 36, 0.16), rgba(196, 74, 98, 0.1));
border: 1px solid rgba(138, 36, 36, 0.55);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset;
animation: n36-sum-in 0.45s ease-out;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
.n36-sum-term {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.45rem;
min-width: 0;
}
.n36-sum-label {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--n36-ink-dim);
}
.n36-sum-op {
align-self: center;
margin-bottom: 1.15rem;
font-family: var(--n36-font-display);
font-size: 1.65rem;
font-weight: 700;
line-height: 1;
color: var(--n36-accent);
text-shadow: 0 1px 0 rgba(20, 17, 15, 0.12);
}
.n36-sum-plus {
color: var(--n36-accent-2);
}
.n36-sum-total {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.3rem;
min-width: 0;
}
.n36-sum-total-value {
display: grid;
place-items: center;
min-width: 2.75rem;
min-height: 2.75rem;
padding: 0.15rem 0.45rem;
border-radius: 8px;
font-family: var(--n36-font-display);
font-size: 1.85rem;
font-weight: 700;
line-height: 1;
color: #1a140c;
background: linear-gradient(180deg, #c44a62, var(--n36-accent));
border: 1px solid #c9a03a;
box-shadow: 0 4px 14px rgba(138, 36, 36, 0.35);
animation: n36-sum-pop 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) 0.12s both;
}
@keyframes n36-sum-in {
from {
opacity: 0;
transform: translateY(0.35rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes n36-sum-pop {
from {
opacity: 0;
transform: scale(0.55);
}
to {
opacity: 1;
transform: scale(1);
}
}
.n36-actions {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
gap: 1rem;
align-items: center;
justify-content: flex-start;
}
.n36-between-wait {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
text-align: center;
}
.n36-actions > .n36-game-home-link,
.n36-between-wait > .n36-game-home-link {
margin-top: 0.1rem;
font-size: 0.92rem;
}
.n36-choice {
width: 100%;
text-align: center;
color: var(--n36-ink);
}
.n36-choice p {
color: var(--n36-ink);
font-weight: 600;
}
.n36-choice .n36-btn:not(.n36-die-pick-btn) {
margin: 0.25rem;
}
.n36-choice .n36-die-pick-opts .n36-die-pick-btn {
margin: 0;
}
.n36-monster-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
.n36-options {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.55rem;
width: 100%;
max-width: 28rem;
min-width: 0;
box-sizing: border-box;
}
.n36-skill-card {
position: relative;
text-align: left;
padding: 0.85rem 1rem 0.95rem;
border-radius: 10px;
border: 1px solid var(--n36-ink);
border-left: 3px solid var(--n36-accent);
background:
linear-gradient(135deg, rgba(138, 36, 36, 0.07) 0%, transparent 42%),
linear-gradient(180deg, #fffaf8 0%, #ffffff 100%);
box-sizing: border-box;
min-width: 0;
overflow: hidden;
}
.n36-skill-kicker {
margin: 0 0 0.3rem;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--n36-accent);
}
.n36-skill-kicker span {
font-weight: 600;
letter-spacing: 0.02em;
text-transform: none;
color: var(--n36-ink-dim);
opacity: 1;
}
.n36-skill-name {
margin: 0 0 0.45rem;
font-family: var(--n36-font-display);
font-size: 1.15rem;
font-weight: 900;
color: var(--n36-ink);
line-height: 1.2;
letter-spacing: 0.01em;
}
.n36-skill-rule {
margin: 0 0 0.65rem;
font-size: 0.9rem;
font-weight: 400;
line-height: 1.45;
color: var(--n36-ink);
}
.n36-skill-target {
display: grid;
grid-template-columns: minmax(0, 1fr) 40px;
align-items: center;
column-gap: 0.45rem;
margin: 0 0 0.4rem;
padding: 0.35rem 0.45rem;
border-radius: 6px;
background: rgba(138, 36, 36, 0.06);
border: 1px solid rgba(138, 36, 36, 0.28);
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
.n36-skill-target .n36-skill-target-label {
min-width: 0;
}
.n36-skill-target .n36-d6,
.n36-skill-target .n36-chip {
justify-self: center;
align-self: center;
}
.n36-skill-target.is-treasure-steal {
background: rgba(138, 36, 36, 0.08);
border-color: rgba(138, 36, 36, 0.4);
}
.n36-skill-target.is-treasure-steal .n36-skill-target-label {
color: var(--n36-accent);
}
.n36-skill-treasure-gain {
background: rgba(138, 36, 36, 0.08);
border-color: var(--n36-accent);
}
.n36-skill-treasure-gain .n36-skill-target-label {
color: var(--n36-accent);
} .n36-skill-target .n36-chip {
width: 40px;
height: 40px;
box-sizing: border-box;
border-radius: 8px;
border-width: 1.5px;
flex-shrink: 0;
}
.n36-skill-target .n36-chip .n36-face-pips {
width: 72%;
height: 72%;
}
.n36-skill-hint.is-miss {
display: none;
}
.n36-skill-target-label {
font-size: 0.72rem;
font-weight: 700;
color: var(--n36-accent);
letter-spacing: 0.03em;
text-transform: uppercase;
line-height: 1.25;
} .n36-skill-target .n36-d6-md {
width: 40px;
height: 40px;
}
.n36-skill-target .n36-d6-md .n36-d6-scene {
width: 40px;
height: 40px;
}
.n36-skill-target .n36-d6-md .n36-d6-face {
border-width: 1.5px;
border-radius: 8px;
}
.n36-skill-target .n36-d6-md .n36-d6-face-1 { transform: rotateY(0deg) translateZ(20px); }
.n36-skill-target .n36-d6-md .n36-d6-face-2 { transform: rotateY(90deg) translateZ(20px); }
.n36-skill-target .n36-d6-md .n36-d6-face-3 { transform: rotateX(90deg) translateZ(20px); }
.n36-skill-target .n36-d6-md .n36-d6-face-4 { transform: rotateX(-90deg) translateZ(20px); }
.n36-skill-target .n36-d6-md .n36-d6-face-5 { transform: rotateY(-90deg) translateZ(20px); }
.n36-skill-target .n36-d6-md .n36-d6-face-6 { transform: rotateY(180deg) translateZ(20px); }
#n36-root .n36-skill-card {
width: 100%;
max-width: 28rem;
margin: 0 auto;
box-sizing: border-box;
}
.n36-turn-progress {
list-style: none;
margin: 0.35rem 0 0;
padding: 0;
display: flex;
align-items: center;
gap: 0;
}
.n36-turn-step {
display: flex;
align-items: center;
gap: 0.3rem;
position: relative;
padding-right: 1.1rem;
}
.n36-turn-step:not(:last-child)::after {
content: '>';
position: absolute;
right: 0.12rem;
top: 50%;
width: auto;
height: auto;
background: none;
transform: translateY(-50%);
color: var(--n36-ink-dim);
font-size: 0.68rem;
font-weight: 600;
line-height: 1;
}
.n36-turn-step:last-child {
padding-right: 0;
}
.n36-turn-step-dot {
width: 0.55rem;
height: 0.55rem;
border-radius: 50%;
border: 1.5px solid var(--n36-line-strong);
background: transparent;
flex-shrink: 0;
}
.n36-turn-step-label {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--n36-ink-dim);
}
.n36-turn-step.is-done .n36-turn-step-dot {
background: rgba(139, 195, 74, 0.85);
border-color: var(--n36-good);
}
.n36-turn-step.is-done .n36-turn-step-label {
color: #c5e1a5;
}
.n36-turn-step.is-current .n36-turn-step-dot {
background: var(--n36-accent);
border-color: var(--n36-accent);
box-shadow: 0 0 0 3px rgba(138, 36, 36, 0.22);
}
.n36-turn-step.is-current .n36-turn-step-label {
color: var(--n36-accent);
}
.n36-turn-step.is-todo .n36-turn-step-label {
opacity: 0.55;
}
.n36-option-row {
display: flex;
justify-content: center;
}
.n36-btn-option {
width: auto;
max-width: 100%;
font-size: 0.88rem;
padding: 0.45rem 0.85rem;
}
.n36-btn-option.n36-bard-use-btn,
.n36-btn-option.n36-treasure-offer-btn {
font-size: 0.76rem;
padding: 0.3rem 0.5rem;
font-weight: 600;
}
.n36-btn-skill-use {
display: block;
width: fit-content;
max-width: 100%;
margin: 0.35rem auto 0;
font-size: 0.95rem;
font-weight: 700;
padding: 0.6rem 1.2rem;
}
.n36-btn-main {
min-width: min(100%, 16rem);
padding: 0.9rem 1.4rem;
font-size: 1.05rem;
}
.n36-action-panel {
max-width: 40rem;
}
.n36-action-panel .n36-btn-primary {
width: auto;
min-width: 12rem;
}
.n36-action-panel .n36-btn-main {
width: auto;
min-width: min(100%, 16rem);
margin-top: 0;
}
.n36-btn-pass-nudge {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
}
.n36-btn-pass-nudge:not(:disabled) {
animation: n36-pass-nudge-pulse 1.2s ease-in-out infinite;
}
.n36-pass-nudge-text {
min-width: 0;
}
.n36-pass-nudge-timer {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
min-width: 1.7rem;
height: 1.7rem;
padding: 0 0.2rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.22);
color: #ffffff;
font-size: 0.95em;
font-weight: 800;
font-variant-numeric: tabular-nums;
line-height: 1;
letter-spacing: 0;
text-transform: none;
}
@keyframes n36-pass-nudge-pulse {
0%,
100% {
box-shadow: 0 0 0 0 rgba(138, 36, 36, 0.55);
filter: brightness(1);
}
50% {
box-shadow: 0 0 0 10px rgba(138, 36, 36, 0);
filter: brightness(1.14);
}
}
@media (prefers-reduced-motion: reduce) {
.n36-btn-pass-nudge:not(:disabled) {
animation: none;
}
}
.n36-wait {
text-align: center;
color: var(--n36-ink);
font-weight: 600;
font-size: 1.05rem;
max-width: 100%;
min-width: 0;
overflow-wrap: anywhere;
word-break: break-word;
}
.n36-log {
max-width: 40rem;
margin: 1.25rem auto 0;
font-size: 0.95rem;
color: var(--n36-ink-dim);
background: var(--n36-panel);
border: 1px solid var(--n36-ink);
border-radius: var(--n36-radius);
padding: 0.85rem 1rem;
}
.n36-log h2 {
font-family: var(--n36-font-display);
font-size: 1rem;
color: var(--n36-ink);
margin: 0 0 0.4rem;
}
.n36-log ul {
list-style: none;
padding: 0;
margin: 0;
max-height: 10rem;
overflow: auto;
}
.n36-log li {
padding: 0.35rem 0;
border-bottom: 1px solid var(--n36-line);
color: var(--n36-ink-dim);
animation: n36-fade 0.35s ease;
}
.n36-modal-card {
text-align: center;
max-width: 28rem;
color: var(--n36-ink);
}
.n36-modal-card ul,
.n36-awards {
color: var(--n36-ink);
}
.n36-awards {
width: min(100%, 22rem);
margin: 0 auto 1.15rem;
text-align: center;
}
.n36-awards-label {
margin: 0 0 0.55rem;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--n36-ink-dim);
}
.n36-awards-list {
list-style: none;
margin: 0;
padding: 0.35rem;
display: flex;
flex-direction: column;
gap: 0.35rem;
border-radius: 12px;
background:
linear-gradient(180deg, rgba(138, 36, 36, 0.08), transparent 40%),
rgba(18, 16, 14, 0.45);
border: 1px solid rgba(138, 36, 36, 0.22);
box-shadow: inset 0 1px 0 rgba(255, 248, 238, 0.06);
}
.n36-awards-list li {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: center;
gap: 0.55rem 0.75rem;
padding: 0.55rem 0.75rem;
border-radius: 8px;
text-align: left;
background: rgba(255, 248, 238, 0.03);
border: 1px solid transparent;
}
.n36-awards-final .n36-awards-list li {
grid-template-columns: 1.6rem minmax(0, 1fr) auto;
}
.n36-awards-list li.is-winner {
color: inherit;
font-weight: inherit;
background:
linear-gradient(105deg, rgba(138, 36, 36, 0.18), rgba(138, 36, 36, 0.05));
border-color: rgba(138, 36, 36, 0.4);
box-shadow: 0 0 0 1px rgba(138, 36, 36, 0.08);
}
.n36-awards-rank {
font-family: var(--n36-font-display);
font-size: 0.85rem;
font-weight: 700;
color: var(--n36-ink-dim);
text-align: center;
}
.n36-awards-list li.is-winner .n36-awards-rank {
color: var(--n36-accent);
}
.n36-awards-name {
display: flex;
flex-direction: column;
gap: 0.28rem;
min-width: 0;
font-weight: 600;
color: var(--n36-ink);
line-height: 1.2;
}
.n36-awards-name .n36-pseudo {
display: block;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.n36-awards-name em {
font-style: normal;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--n36-accent);
}
.n36-awards-gain {
justify-self: end;
min-width: 2.6rem;
padding: 0.2rem 0.45rem;
border-radius: 999px;
text-align: center;
font-family: var(--n36-font-display);
font-size: 0.95rem;
font-weight: 700;
line-height: 1.2;
color: var(--n36-bg1);
background: linear-gradient(165deg, #c44a62, var(--n36-accent));
box-shadow: 0 2px 8px rgba(138, 36, 36, 0.28);
}
.n36-awards-list li:not(.is-winner) .n36-awards-gain {
color: var(--n36-ink);
background: rgba(20, 17, 15, 0.08);
box-shadow: none;
}
.n36-awards-total {
justify-self: end;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.05rem;
min-width: 2.8rem;
font-family: var(--n36-font-display);
font-size: 1.05rem;
font-weight: 700;
line-height: 1.1;
color: var(--n36-ink);
}
.n36-awards-total small {
font-family: var(--n36-font-body);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--n36-ink-dim);
}
.n36-awards-final .n36-awards-total {
min-width: 3.2rem;
}
.n36-session-end-card {
position: relative;
overflow: hidden;
border-color: rgba(138, 36, 36, 0.45);
background:
radial-gradient(ellipse at 50% 0%, rgba(138, 36, 36, 0.18), transparent 55%),
var(--n36-panel);
}
.n36-session-stake {
margin: -0.35rem 0 1rem;
color: var(--n36-ink-dim);
}
.n36-champion {
margin: 0 0 1rem;
font-family: var(--n36-font-display);
font-size: 1.55rem;
font-weight: 700;
color: var(--n36-accent);
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
}
.n36-win-card {
position: relative;
overflow: hidden;
border-color: var(--n36-ink);
background: #ffffff;
animation: n36-win-card-in 0.55s ease-out;
}
.n36-win-card.is-celebrating .n36-win-hero-ring {
animation: n36-win-ring 1.4s ease-out;
}
.n36-win-hero {
position: relative;
display: grid;
place-items: center;
width: 5.5rem;
height: 5.5rem;
margin: 0.15rem auto 0.85rem;
}
.n36-win-hero-ring {
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid rgba(138, 36, 36, 0.55);
box-shadow:
0 0 0 6px rgba(138, 36, 36, 0.08),
0 0 24px rgba(138, 36, 36, 0.35);
}
.n36-win-hero-score {
position: relative;
z-index: 1;
font-family: var(--n36-font-display);
font-size: 1.85rem;
font-weight: 700;
line-height: 1;
color: var(--n36-accent);
text-shadow: 0 2px 12px rgba(138, 36, 36, 0.4);
}
.n36-win-hero-score small {
display: block;
margin-top: 0.15rem;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--n36-ink-dim);
}
.n36-win-card-kicker {
margin: 0 0 0.2rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--n36-ink-dim);
}
.n36-win-card-title {
margin: 0 0 0.25rem !important;
font-family: var(--n36-font-display);
font-size: 2rem !important;
color: var(--n36-accent) !important;
}
.n36-win-card-name {
margin: 0 0 1rem;
font-size: 1.2rem;
font-weight: 700;
color: var(--n36-ink);
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
}
@keyframes n36-win-card-in {
from {
opacity: 0;
transform: translateY(0.6rem) scale(0.96);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes n36-win-ring {
0% {
transform: scale(0.7);
opacity: 0.2;
}
60% {
transform: scale(1.08);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 1;
}
}
#n36-win-fx {
position: fixed;
inset: 0;
z-index: 9999;
pointer-events: none;
display: grid;
place-items: center;
background: transparent;
}
#n36-win-fx:not(:empty) {
background: radial-gradient(ellipse at center, rgba(20, 14, 8, 0.55), rgba(0, 0, 0, 0.25));
}
#n36-elim-fx {
position: fixed;
inset: 0;
z-index: 10050;
pointer-events: none;
display: grid;
place-items: center;
background: transparent;
}
#n36-elim-fx:not(:empty) {
background: radial-gradient(ellipse at center, rgba(40, 8, 6, 0.58), rgba(20, 17, 15, 0.08));
}
#n36-elim-fx.is-blocking-elim {
pointer-events: auto;
background: rgba(10, 5, 4, 0.88);
}
#n36-elim-fx.is-blocking-elim:not(:empty) {
background: rgba(10, 5, 4, 0.88);
}
#n36-win-fx,
#n36-elim-fx,
#n36-backlash-fx,
#n36-extra-turn-fx,
#n36-bard-fx,
#n36-cast-fx,
#n36-riposte-fx,
#n36-host-fx,
#n36-treasure-flip-fx {
box-sizing: border-box;
width: 100%;
max-width: 100vw;
padding-left: max(1rem, env(safe-area-inset-left, 0px));
padding-right: max(1rem, env(safe-area-inset-right, 0px));
overflow-x: clip;
}
.n36-elim-toast,
.n36-win-toast,
.n36-backlash-toast,
.n36-host-toast,
.n36-riposte-toast,
.n36-treasure-flip-toast,
.n36-cast-toast,
.n36-bard-toast,
.n36-extra-turn-toast {
box-sizing: border-box;
width: 100%;
min-width: 0;
max-width: 22rem;
justify-self: center;
}
.n36-elim-toast {
position: relative;
max-width: 21rem;
padding: 1.35rem 1.3rem 1.25rem;
border-radius: 16px;
text-align: center;
color: #fff4ee;
background: linear-gradient(165deg, rgba(78, 22, 18, 0.97), rgba(22, 10, 9, 0.98));
border: 1px solid rgba(220, 90, 70, 0.65);
box-shadow:
0 22px 48px rgba(0, 0, 0, 0.55),
0 0 36px rgba(180, 40, 28, 0.32);
opacity: 0;
transform: translateY(0.85rem) scale(0.9);
transition:
opacity 0.35s ease,
transform 0.5s cubic-bezier(0.2, 1.12, 0.3, 1);
overflow: hidden;
}
.n36-elim-toast.is-in {
opacity: 1;
transform: translateY(0) scale(1);
}
.n36-elim-toast.is-out {
opacity: 0;
transform: translateY(0.35rem) scale(0.96);
}
.n36-elim-burst {
position: absolute;
inset: -45%;
background:
radial-gradient(circle at 50% 42%, rgba(220, 70, 50, 0.28), transparent 44%),
conic-gradient(
from 20deg,
transparent,
rgba(200, 60, 40, 0.16),
transparent 28%,
rgba(120, 30, 20, 0.1),
transparent 55%
);
animation: n36-elim-burst 2.6s ease-out both;
pointer-events: none;
}
@keyframes n36-elim-burst {
0% {
opacity: 0;
transform: scale(0.7) rotate(-8deg);
}
25% {
opacity: 1;
transform: scale(1) rotate(0deg);
}
100% {
opacity: 0.35;
transform: scale(1.08) rotate(6deg);
}
}
.n36-elim-kicker {
position: relative;
margin: 0 0 0.3rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 170, 150, 0.9);
}
.n36-elim-title {
position: relative;
margin: 0 0 0.35rem;
font-family: var(--n36-font-display);
font-size: 2rem;
font-weight: 700;
line-height: 1.1;
color: #ffc4b0;
text-shadow: 0 2px 14px rgba(180, 40, 28, 0.45);
animation: n36-sum-pop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) 0.06s both;
}
.n36-elim-name {
position: relative;
margin: 0 0 0.45rem;
font-size: 1.15rem;
font-weight: 700;
color: #fff8f4;
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
}
.n36-elim-sub {
position: relative;
margin: 0;
font-size: 0.88rem;
line-height: 1.35;
color: #ffc8b8;
opacity: 0.92;
}
.n36-elim-toast.is-traquenard {
max-width: 24rem;
padding-bottom: 1.4rem;
}
.n36-elim-dice {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 0.85rem;
margin: 0.2rem 0 0.75rem;
padding: 0.35rem 0.15rem 0.45rem;
min-height: 3.6rem;
}
.n36-elim-toast .n36-elim-die {
filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
}
.n36-elim-toast.is-traquenard .n36-elim-sub {
font-size: 0.9rem;
line-height: 1.4;
color: #ffd4c4;
}
.n36-elim-math {
position: relative;
margin: 0.45rem 0 0;
font-size: 0.92rem;
font-weight: 700;
line-height: 1.45;
font-variant-numeric: tabular-nums;
color: #fff3ea;
}
.n36-elim-math-sep {
display: inline-block;
margin: 0 0.2rem;
opacity: 0.7;
font-weight: 700;
}
.n36-trap-warning {
width: 100%;
max-width: 22rem;
margin: 0.15rem 0 0.2rem;
padding: 0.55rem 0.7rem 0.6rem;
border: 1px solid var(--n36-accent);
border-radius: 10px;
background: rgba(138, 36, 36, 0.08);
text-align: center;
box-sizing: border-box;
}
.n36-trap-warning-text {
margin: 0;
font-size: 0.82rem;
line-height: 1.4;
color: var(--n36-ink);
}
.n36-trap-dead-faces {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.35rem;
margin-top: 0.45rem;
}
.n36-trap-dead-face {
position: relative;
display: grid;
place-items: center;
width: 1.85rem;
height: 1.85rem;
border-radius: 5px;
border: 2px solid var(--n36-accent);
background: #fff;
opacity: 0.78;
}
.n36-trap-dead-face .n36-face-pips {
width: 1.15rem;
height: 1.15rem;
gap: 1px;
}
.n36-trap-dead-face .n36-pip.is-on {
background: var(--n36-accent);
}
.n36-trap-dead-face::after {
content: '';
position: absolute;
left: 8%;
right: 8%;
top: 50%;
height: 2px;
background: var(--n36-accent);
transform: rotate(-32deg);
pointer-events: none;
}
.n36-elim-dismiss {
position: relative;
width: 100%;
margin-top: 1rem;
min-height: 44px;
box-sizing: border-box;
}
.n36-win-toast {
position: relative;
padding: 1.5rem 1.4rem 1.35rem;
border-radius: 16px;
text-align: center;
color: #fff8f2;
background:
linear-gradient(165deg, rgba(92, 32, 28, 0.98), rgba(24, 14, 12, 0.99));
border: 1px solid rgba(232, 196, 200, 0.55);
box-shadow:
0 22px 50px rgba(0, 0, 0, 0.55),
0 0 40px rgba(138, 36, 36, 0.28);
opacity: 0;
transform: translateY(0.9rem) scale(0.88);
transition:
opacity 0.4s ease,
transform 0.55s cubic-bezier(0.2, 1.15, 0.3, 1);
overflow: hidden;
}
.n36-win-toast.is-in {
opacity: 1;
transform: translateY(0) scale(1);
}
.n36-win-toast.is-out {
opacity: 0;
transform: translateY(-0.4rem) scale(0.97);
}
.n36-win-burst {
position: absolute;
inset: -40%;
background:
radial-gradient(circle at 50% 40%, rgba(232, 196, 200, 0.22), transparent 42%),
conic-gradient(from 0deg, transparent, rgba(196, 74, 98, 0.16), transparent 25%, rgba(232, 196, 200, 0.1), transparent 50%);
animation: n36-win-burst 2.8s ease-out both;
pointer-events: none;
}
.n36-win-kicker {
position: relative;
margin: 0 0 0.35rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #f0d2d6;
}
.n36-win-title {
position: relative;
margin: 0 0 0.35rem;
font-family: var(--n36-font-display);
font-size: 2.1rem;
font-weight: 700;
line-height: 1.1;
color: #ffffff;
text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
animation: n36-sum-pop 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) 0.08s both;
}
.n36-win-name {
position: relative;
margin: 0 0 0.75rem;
font-size: 1.15rem;
font-weight: 700;
color: #fff8f2;
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
}
.n36-win-score {
position: relative;
margin: 0;
font-family: var(--n36-font-display);
font-size: 0.95rem;
letter-spacing: 0.04em;
color: #e8c4c8;
}
.n36-win-score span {
display: inline-block;
margin-right: 0.15rem;
font-size: 1.55rem;
font-weight: 700;
color: #ffffff;
animation: n36-sum-pop 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) 0.2s both;
}
@keyframes n36-win-burst {
from {
opacity: 0;
transform: rotate(0deg) scale(0.6);
}
40% {
opacity: 1;
}
to {
opacity: 0.55;
transform: rotate(28deg) scale(1.15);
}
}
.n36-help-body {
overflow: auto;
flex: 1;
min-height: 0;
font-size: 0.88rem;
color: var(--n36-ink-dim);
line-height: 1.45;
}
.n36-help-body ol {
margin: 0;
padding-left: 1.15rem;
}
.n36-help-body li + li {
margin-top: 0.55rem;
}
.n36-help-body strong {
color: var(--n36-accent);
} .n36-overlay-public {
justify-content: center;
}
.n36-overlay-public-alert {
padding: 2rem 1.5rem;
}
.n36-ov-public-card {
width: min(100%, 40rem);
padding: 1.35rem 1.5rem 1.5rem;
border: 3px solid var(--n36-accent, #8a2424);
border-radius: 14px;
background: rgba(12, 10, 9, 0.88);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
animation: n36-ov-public-in 0.45s ease both;
}
.n36-ov-public-kicker {
margin: 0 0 0.65rem;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--n36-accent, #e8b4b8);
}
.n36-ov-public-text {
margin: 0;
font-family: var(--n36-font-display);
font-size: clamp(1.35rem, 4.5vw, 2rem);
line-height: 1.25;
font-weight: 700;
}
.n36-ov-public-cta {
margin: 0.75rem 0 0;
font-size: clamp(1rem, 3vw, 1.35rem);
line-height: 1.35;
font-weight: 600;
}
.n36-ov-public-code {
margin: 0.85rem 0 0;
font-size: 1rem;
letter-spacing: 0.06em;
}
@keyframes n36-ov-public-in {
from {
opacity: 0;
transform: translateY(12px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
} .n36-overlay {
min-height: 100vh;
padding: 1.5rem;
color: #fff;
font-family: var(--n36-font-body);
background: transparent;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 0.5rem;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}
.n36-ov-brand {
font-family: var(--n36-font-display);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--n36-accent);
font-size: 0.95rem;
font-weight: 700;
}
.n36-ov-progress {
font-family: var(--n36-font-display);
font-size: clamp(4rem, 14vw, 7rem);
line-height: 1;
font-weight: 700;
}
.n36-ov-progress span {
font-size: 0.4em;
opacity: 0.85;
}
.n36-ov-phase {
font-size: 1.3rem;
color: var(--n36-accent);
font-weight: 700;
}
.n36-ov-player {
font-size: 1.45rem;
font-weight: 700;
max-width: 96vw;
overflow-wrap: anywhere;
word-break: break-word;
}
.n36-ov-player span {
opacity: 0.9;
font-size: 0.85em;
}
.n36-ov-dice {
display: flex;
gap: 0.6rem;
align-items: center;
margin: 0.5rem 0;
}
.n36-ov-final {
font-size: 1.5rem;
font-weight: 700;
}
.n36-ov-feed {
list-style: none;
padding: 0;
margin: 1rem 0 0;
width: min(36rem, 100%);
font-size: 1.05rem;
}
.n36-ov-feed li {
background: rgba(0, 0, 0, 0.65);
padding: 0.45rem 0.75rem;
margin-bottom: 0.3rem;
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.15);
animation: n36-fade 0.4s ease;
}
.n36-ov-banner {
margin-top: 1rem;
font-family: var(--n36-font-display);
font-size: 1.6rem;
color: var(--n36-accent);
text-align: center;
font-weight: 700;
}
.n36-overlay-wait {
font-family: var(--n36-font-display);
font-size: 2rem;
color: var(--n36-accent);
}
@keyframes n36-fade {
from {
opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes n36-roll {
0% {
transform: rotate(-12deg) scale(0.85);
opacity: 0.4;
}
60% {
transform: rotate(6deg) scale(1.05);
}
100% {
transform: none;
opacity: 1;
}
} #n36-focus-fx {
position: fixed;
inset: 0;
z-index: 9999;
pointer-events: none;
overflow: hidden;
}
.n36-focus-fx-stage {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
.n36-focus-fx-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
will-change: transform, opacity;
animation: n36-focus-slide 2.2s cubic-bezier(0.33, 0.12, 0.25, 1) forwards;
filter: none;
}
.n36-focus-fx-art {
width: min(42vw, 260px);
height: min(42vw, 260px);
aspect-ratio: 1;
background: #e23b2e;
border-radius: 12px;
border: 3px solid rgba(255, 248, 238, 0.85);
box-shadow:
inset 0 0 0 1px rgba(0, 0, 0, 0.2),
0 10px 22px rgba(20, 17, 15, 0.2);
}
.n36-focus-fx-card.is-riposte .n36-focus-fx-art {
background: var(--n36-accent-2);
}
.n36-focus-fx-caption {
margin: 0;
padding: 0.42rem 0.95rem;
font-family: var(--n36-font-display, "Alegreya", Georgia, serif);
font-size: clamp(1.15rem, 3vw, 1.55rem);
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.2;
text-align: center;
color: var(--n36-ink);
text-shadow: none;
white-space: normal;
max-width: min(92vw, 22rem);
overflow: hidden;
overflow-wrap: anywhere;
word-break: break-word;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
background: #ffffff;
border: 1px solid var(--n36-ink);
border-radius: 6px;
box-shadow: none;
}
.n36-focus-fx-role,
.n36-focus-fx-name { display: none;
}
@keyframes n36-focus-slide {
0% {
transform: translateX(-115vw) scale(0.94);
opacity: 0;
}
12% {
opacity: 1;
}
22% {
transform: translateX(0) scale(1);
}
28% {
transform: translateX(0) scale(1.03);
}
72% {
transform: translateX(0) scale(1);
opacity: 1;
}
100% {
transform: translateX(115vw) scale(0.94);
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.n36-focus-fx-card {
animation-duration: 1s;
}
.n36-tag-play {
animation: none;
}
} #n36-treasure-fx,
#n36-effect-fx {
position: fixed;
inset: 0;
z-index: 10000;
pointer-events: none;
overflow: hidden;
} .n36-treasure-fly,
.n36-effect-fly {
position: fixed;
left: 0;
top: 0;
z-index: 10001;
margin: 0;
width: auto;
height: auto;
transform: translate(-50%, -50%);
opacity: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
will-change: transform, opacity;
}
.n36-treasure-fly-die,
.n36-effect-fly-die {
width: 72px;
height: 72px;
border-radius: 12px;
background: linear-gradient(145deg, #e8c4c8, #e8c547);
border: 3px solid #8a2424;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
transform: scale(0.55);
transform-origin: center center;
will-change: transform;
backface-visibility: hidden;
}
.n36-effect-fly-bless .n36-effect-fly-die {
background: linear-gradient(145deg, #d6e8ff, #8a2424);
border-color: #5b8fd9;
}
.n36-effect-fly-label {
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #d6e8ff;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
white-space: nowrap;
line-height: 1.1; transform: none;
}
.n36-treasure-fly-die .n36-face-pips,
.n36-effect-fly-die .n36-face-pips {
width: 70%;
height: 70%;
}
.n36-treasure-fly-die .n36-pip.is-on {
background: #3a2a08;
}
.n36-effect-fly-bless .n36-pip.is-on {
background: #1a3a66;
}
.n36-treasure-fly.is-to-center,
.n36-effect-fly.is-to-center {
animation: n36-fx-to-center 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.n36-treasure-fly.is-to-center .n36-treasure-fly-die,
.n36-effect-fly.is-to-center .n36-effect-fly-die {
animation: n36-fx-die-to-center 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.n36-treasure-fly.is-focus,
.n36-effect-fly.is-focus {
animation: n36-fx-hold 0.68s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.n36-treasure-fly.is-focus .n36-treasure-fly-die,
.n36-effect-fly.is-focus .n36-effect-fly-die {
animation: n36-fx-die-focus 0.68s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.n36-treasure-fly.is-flying,
.n36-effect-fly.is-flying {
animation: n36-fx-fly 0.65s cubic-bezier(0.4, 0.05, 0.2, 1) forwards;
}
.n36-treasure-fly.is-flying .n36-treasure-fly-die,
.n36-effect-fly.is-flying .n36-effect-fly-die {
animation: n36-fx-die-fly 0.65s cubic-bezier(0.4, 0.05, 0.2, 1) forwards;
}
.n36-effect-fly.is-flying .n36-effect-fly-label {
animation: n36-fx-label-out 0.35s ease forwards;
}
@keyframes n36-fx-to-center {
0% {
transform: translate(-50%, -50%) translate(0, 0);
opacity: 0;
}
100% {
transform: translate(-50%, -50%) translate(var(--n36-fly-x), var(--n36-fly-y));
opacity: 1;
}
}
@keyframes n36-fx-die-to-center {
0% {
transform: scale(0.55);
}
100% {
transform: scale(1.05);
}
}
@keyframes n36-fx-hold {
0%,
100% {
transform: translate(-50%, -50%);
opacity: 1;
}
}
@keyframes n36-fx-die-focus {
0% {
transform: scale(1.05);
}
55% {
transform: scale(1.28);
}
100% {
transform: scale(1.08);
}
}
@keyframes n36-fx-fly {
0% {
transform: translate(-50%, -50%) translate(0, 0);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) translate(var(--n36-fly-x), var(--n36-fly-y));
opacity: 0.15;
}
}
@keyframes n36-fx-die-fly {
0% {
transform: scale(1.08);
}
100% {
transform: scale(0.45);
}
}
@keyframes n36-fx-label-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.n36-treasure-phase {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
width: 100%;
max-width: 28rem;
margin: 0 auto;
}
.n36-treasure-gain {
width: 100%;
text-align: center;
padding: 0.3rem 0.5rem;
border-radius: 0;
border: none;
background: rgba(120, 85, 20, 0.28);
box-sizing: border-box;
}
.n36-treasure-gain.is-empty {
border: none;
background: rgba(0, 0, 0, 0.22);
text-align: center;
}
.n36-treasure-gain.is-empty .n36-treasure-gain-text {
justify-content: center;
text-align: center;
width: 100%;
}
.n36-treasure-gain-kicker {
margin: 0 0 0.35rem;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--n36-ink-dim);
}
.n36-treasure-gain-row {
display: flex;
align-items: center;
gap: 0.65rem;
}
.n36-treasure-gain-text {
margin: 0;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0.2rem 0.35rem;
width: 100%;
font-size: 0.85rem;
font-weight: 600;
color: var(--n36-ink);
line-height: 1.25;
text-align: center;
}
.n36-treasure-gain-label {
flex: 0 0 auto;
}
.n36-treasure-gain-chip {
display: inline-flex;
align-items: center;
vertical-align: middle;
flex-shrink: 0;
}
.n36-treasure-gain-chip .n36-chip {
width: 1.4rem;
height: 1.4rem;
flex-shrink: 0;
}
.n36-treasure-gain-chip .n36-face-pips {
width: 72%;
height: 72%;
}
.n36-treasure-gain-chip .n36-pip {
width: 100%;
height: 100%;
min-width: 3px;
min-height: 3px;
}
.n36-treasure-gain-chip .n36-pip.is-on {
background: #3a2a08;
}
.n36-ambush-stage {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
width: 100%;
max-width: min(28rem, 100%);
margin: 0 auto 0.5rem;
padding: 1rem 0.95rem 1.15rem;
border-radius: 10px;
border: 1px solid var(--n36-ink);
border-left: 3px solid var(--n36-accent-2);
background: #ffffff;
text-align: center;
animation: n36-fade 0.35s ease;
box-sizing: border-box;
min-width: 0;
overflow: hidden;
overflow-wrap: anywhere;
word-break: break-word;
}
.n36-ambush-kicker {
margin: 0;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--n36-accent);
}
.n36-ambush-title {
margin: 0;
font-family: var(--n36-font-display);
font-size: clamp(1.15rem, 4vw, 1.35rem);
font-weight: 700;
color: var(--n36-ink);
letter-spacing: 0.02em;
max-width: 100%;
}
.n36-ambush-rule {
margin: 0;
font-size: 0.88rem;
line-height: 1.45;
color: var(--n36-ink-dim);
max-width: 100%;
}
.n36-ambush-ghosts {
display: flex;
gap: 1rem;
margin: 0.25rem 0 0.35rem;
}
.n36-die-ghost-ambush {
border-color: rgba(255, 107, 90, 0.45);
background: rgba(80, 20, 16, 0.45);
box-shadow: inset 0 0 12px rgba(255, 80, 60, 0.15);
}
.n36-btn-ambush {
background: var(--n36-accent);
border-color: var(--n36-accent);
color: #ffffff;
opacity: 1;
box-shadow: 0 2px 0 rgba(20, 17, 15, 0.1);
}
.n36-btn-ambush:hover:not(:disabled) {
background: #a32e2e;
border-color: #a32e2e;
color: #ffffff;
}
.n36-ambush-stage .n36-btn-ambush.n36-btn-primary {
background: var(--n36-accent);
border-color: var(--n36-accent);
color: #ffffff;
opacity: 1;
}
.n36-ambush-stage .n36-btn-ambush.n36-btn-primary:hover:not(:disabled) {
background: #a32e2e;
border-color: #a32e2e;
color: #ffffff;
}
.n36-ambush-stage.is-reveal.is-safe {
border-left-color: var(--n36-good);
background: linear-gradient(180deg, rgba(47, 107, 58, 0.08), #ffffff 55%);
}
.n36-ambush-stage.is-reveal.is-double,
.n36-ambush-stage.is-reveal.is-win {
border-left-color: var(--n36-accent);
background: linear-gradient(180deg, rgba(138, 36, 36, 0.08), #ffffff 55%);
}
.n36-ambush-stage.is-reveal.is-ambush {
border-left-color: var(--n36-bad);
background: linear-gradient(180deg, rgba(166, 30, 30, 0.1), #ffffff 55%);
animation: n36-ambush-pulse 1.1s ease-in-out infinite;
}
.n36-ambush-label {
margin: 0;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--n36-accent);
}
.n36-ambush-result {
margin: 0.15rem 0 0;
font-size: 1.05rem;
font-weight: 700;
color: var(--n36-ink);
line-height: 1.35;
max-width: 100%;
overflow-wrap: anywhere;
}
.n36-backlash-stage {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.65rem;
width: 100%;
max-width: min(28rem, 100%);
margin: 0 auto;
padding: 1rem 0.95rem 1.1rem;
border-radius: 10px;
border: 1px solid var(--n36-ink);
border-left: 3px solid var(--n36-accent-2);
background: #ffffff;
text-align: center;
box-sizing: border-box;
min-width: 0;
overflow: hidden;
overflow-wrap: anywhere;
word-break: break-word;
}
.n36-backlash-stage.is-enter {
animation: n36-sum-in 0.4s ease-out;
}
.n36-backlash-stage.is-end {
border-left-color: var(--n36-bad);
background: linear-gradient(180deg, rgba(166, 30, 30, 0.08), #ffffff 55%);
}
.n36-backlash-stage.is-add {
border-left-color: #6b4fa8;
background: linear-gradient(180deg, rgba(107, 79, 168, 0.08), #ffffff 55%);
}
.n36-backlash-stage.is-flash {
animation: n36-backlash-flash 0.7s ease-out;
}
.n36-backlash-stage-kicker {
margin: 0;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--n36-accent);
}
.n36-backlash-stage.is-add .n36-backlash-stage-kicker {
color: #6b4fa8;
}
.n36-backlash-stage-title {
margin: 0;
font-family: var(--n36-font-display);
font-size: clamp(1.25rem, 5vw, 1.85rem);
font-weight: 700;
line-height: 1.1;
color: var(--n36-ink);
animation: n36-sum-pop 0.55s cubic-bezier(0.2, 1.4, 0.4, 1);
max-width: 100%;
overflow-wrap: anywhere;
}
.n36-backlash-stage-rule {
margin: 0;
font-size: 0.92rem;
line-height: 1.45;
color: var(--n36-ink-dim);
max-width: 100%;
overflow-wrap: anywhere;
}
.n36-backlash-stage-result {
margin: 0.15rem 0 0.25rem;
font-size: 1.05rem;
font-weight: 700;
color: var(--n36-ink);
max-width: 100%;
overflow-wrap: anywhere;
}
.n36-backlash-stage-result strong {
color: var(--n36-accent);
} .n36-ambush-stage .n36-skill-rule,
.n36-ambush-stage .n36-rule-body,
.n36-backlash-stage .n36-skill-rule,
.n36-backlash-stage .n36-rule-body {
color: var(--n36-ink-dim);
overflow-wrap: anywhere;
}
.n36-ambush-stage .n36-wait,
.n36-backlash-stage .n36-wait {
color: var(--n36-ink-dim);
font-size: 0.92rem;
}
.n36-ambush-stage .n36-rule-fold,
.n36-backlash-stage .n36-rule-fold {
width: 100%;
max-width: 100%;
min-width: 0;
}
.n36-ambush-stage .n36-rule-toggle {
color: var(--n36-accent);
border-color: var(--n36-line-strong);
background: #faf8f6;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.n36-ambush-stage .n36-btn-main,
.n36-backlash-stage .n36-btn-main,
.n36-curse-end-stage .n36-btn-main {
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
margin-top: 0.15rem;
}
.n36-ambush-stage .n36-dice-board,
.n36-backlash-stage .n36-dice-board {
width: 100%;
max-width: 100%;
min-width: 0;
}
@keyframes n36-backlash-flash {
0% {
box-shadow: 0 0 0 0 rgba(232, 116, 58, 0.55);
}
40% {
box-shadow: 0 0 28px 4px rgba(232, 116, 58, 0.45);
}
100% {
box-shadow: 0 0 0 0 rgba(232, 116, 58, 0);
}
}
#n36-backlash-fx {
position: fixed;
inset: 0;
z-index: 9997;
pointer-events: none;
display: grid;
place-items: center;
}
.n36-backlash-toast {
padding: 1.2rem 1.35rem 1.25rem;
border-radius: 14px;
text-align: center;
color: var(--n36-ink);
background: linear-gradient(165deg, rgba(120, 45, 28, 0.97), rgba(36, 14, 10, 0.98));
border: 1px solid rgba(255, 140, 100, 0.65);
box-shadow:
0 18px 40px rgba(0, 0, 0, 0.5),
0 0 32px rgba(232, 116, 58, 0.35);
opacity: 0;
transform: translateY(0.8rem) scale(0.92);
transition:
opacity 0.35s ease,
transform 0.45s cubic-bezier(0.2, 1.1, 0.3, 1);
}
.n36-backlash-toast.is-add {
background: linear-gradient(165deg, rgba(80, 55, 140, 0.97), rgba(24, 16, 48, 0.98));
border-color: rgba(180, 160, 255, 0.65);
box-shadow:
0 18px 40px rgba(0, 0, 0, 0.5),
0 0 32px rgba(139, 108, 240, 0.35);
}
.n36-backlash-toast.is-in {
opacity: 1;
transform: translateY(0) scale(1);
}
.n36-backlash-toast.is-out {
opacity: 0;
transform: translateY(-0.45rem) scale(0.96);
}
.n36-backlash-kicker {
margin: 0 0 0.3rem;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #ffb088;
}
.n36-backlash-toast.is-add .n36-backlash-kicker {
color: #e8c4c8;
}
.n36-backlash-title {
margin: 0 0 0.4rem;
font-family: var(--n36-font-display);
font-size: 1.75rem;
font-weight: 700;
color: #fff;
}
.n36-backlash-sub {
margin: 0;
font-size: 0.92rem;
line-height: 1.35;
color: #ffd8c8;
}
.n36-backlash-toast.is-add .n36-backlash-sub {
color: #ddd0ff;
}
.n36-d6.n36-d6-ambush .n36-d6-face {
background: #ffffff;
border-color: var(--n36-ink);
}
.n36-d6.n36-d6-ambush.is-ambush-double .n36-d6-face {
border-color: var(--n36-ink);
box-shadow: inset 0 0 0 1px rgba(20, 17, 15, 0.06), 0 0 0 2px var(--n36-ink);
}
.n36-dice-board.is-ambush {
margin-bottom: 0.25rem;
}
@keyframes n36-ambush-pulse {
0%,
100% {
box-shadow: 0 0 0 0 rgba(255, 70, 55, 0.15);
}
50% {
box-shadow: 0 0 0 6px rgba(255, 70, 55, 0.08);
}
} .n36-board {
display: flex;
flex-direction: column;
min-height: 0;
height: 100%;
max-height: 100%;
box-sizing: border-box;
overflow: hidden;
}
.n36-layout {
display: grid;
grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) minmax(220px, 280px);
gap: 1rem;
align-items: stretch;
flex: 1 1 auto;
min-height: 0;
width: 100%;
overflow: hidden;
}
.n36-board.is-rail-closed .n36-layout {
grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
}
.n36-board.is-rail-closed .n36-sidebar-rail {
display: none;
}
.n36-sidebar {
background: var(--n36-panel);
border: 1px solid var(--n36-ink);
border-radius: var(--n36-radius);
padding: 0.85rem;
display: flex;
flex-direction: column;
min-height: 0;
max-height: none;
height: auto;
align-self: stretch;
box-shadow: none;
overflow: hidden;
}
.n36-sidebar-title {
font-family: var(--n36-font-display);
font-size: 0.95rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--n36-accent);
margin: 0 0 0.75rem;
flex-shrink: 0;
}
.n36-sidebar-players {
overflow: hidden;
justify-content: flex-start;
}
.n36-sidebar-roles-btn {
flex: 0 0 auto;
width: 100%;
margin: 0.65rem 0 0;
padding: 0.5rem 0.65rem;
font-size: 0.78rem;
line-height: 1.3;
white-space: normal;
text-align: center;
}
.n36-board .n36-seats {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-content: flex-start;
gap: 0.65rem;
margin: 0; padding: 0.15rem 3px;
box-sizing: border-box;
grid-template-columns: unset;
flex: 1 1 auto;
min-height: 0;
min-width: 0;
overflow-x: hidden;
overflow-y: auto;
scrollbar-gutter: stable;
}
.n36-board .n36-seat {
display: grid;
grid-template-columns: 52px minmax(0, 1fr);
gap: 0.7rem;
align-items: start;
box-sizing: border-box;
width: 100%;
min-width: 0;
background: #ffffff;
border: 1px solid var(--n36-ink);
border-left-width: 3px;
border-left-color: var(--n36-ink);
border-radius: 10px;
padding: 0.7rem 0.75rem;
transform: none;
will-change: transform;
}
.n36-seat-open {
display: contents;
font: inherit;
color: inherit;
text-align: left;
cursor: pointer;
}
.n36-seat-art {
width: 52px;
height: 52px;
border-radius: 10px;
background:
linear-gradient(145deg, #c44a62 0%, #8a2424 55%, #4a1212 100%);
border: 1px solid rgba(20, 17, 15, 0.22);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
flex-shrink: 0;
}
.n36-seat[data-role='barbare'] {
border-left-color: var(--n36-accent-2);
}
.n36-seat[data-role='barbare'] .n36-seat-art {
background: linear-gradient(145deg, #c44a62 0%, #8a2424 60%, #4a1212 100%);
}
.n36-seat[data-role='mage'] {
border-left-color: #8a2424;
}
.n36-seat[data-role='mage'] .n36-seat-art {
background: linear-gradient(145deg, #c44a62 0%, #8a2424 55%, #4a1212 100%);
}
.n36-seat[data-role='pretresse'] {
border-left-color: #8a2424;
}
.n36-seat[data-role='pretresse'] .n36-seat-art {
background: linear-gradient(145deg, #e8c4c8 0%, #8a2424 55%, #4a1212 100%);
}
.n36-seat[data-role='paladin'] {
border-left-color: var(--n36-accent);
}
.n36-seat[data-role='paladin'] .n36-seat-art {
background: linear-gradient(145deg, #c44a62 0%, #8a2424 55%, #4a1212 100%);
}
.n36-seat[data-role='voleuse'] {
border-left-color: #8a2424;
}
.n36-seat[data-role='voleuse'] .n36-seat-art {
background: linear-gradient(145deg, #e8c4c8 0%, #8a2424 55%, #4a1212 100%);
}
.n36-seat[data-role='barde'] {
border-left-color: #8a2424;
}
.n36-seat[data-role='barde'] .n36-seat-art {
background: linear-gradient(145deg, #e8c4c8 0%, #8a2424 55%, #4a1212 100%);
}
.n36-seat-body {
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.28rem;
}
.n36-seat-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.4rem;
min-width: 0;
}
.n36-seat-name {
margin: 0;
font-size: 1rem;
font-weight: 700;
color: var(--n36-ink);
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.n36-seat-meta-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.5rem;
min-width: 0;
}
.n36-seat-role {
margin: 0;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--n36-accent);
line-height: 1.2;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.n36-seat-px {
flex-shrink: 0;
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--n36-ink-dim);
font-variant-numeric: tabular-nums;
}
.n36-seat-stats {
display: grid;
grid-template-columns: 1fr;
gap: 0.35rem;
margin-top: 0.15rem;
}
.n36-seat-stat {
display: flex;
flex-direction: column;
gap: 0.08rem;
padding: 0.3rem 0.4rem;
border-radius: 6px;
background: rgba(20, 17, 15, 0.04);
border: 1px solid rgba(20, 17, 15, 0.08);
min-width: 0;
}
.n36-seat-stat-label {
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--n36-ink-dim);
}
.n36-seat-stat strong {
font-size: 0.82rem;
font-weight: 700;
color: var(--n36-ink);
line-height: 1.15;
}
.n36-seat-stat.is-rest-ready {
border-color: rgba(139, 195, 74, 0.35);
background: rgba(139, 195, 74, 0.1);
}
.n36-seat-stat.is-rest-ready strong {
color: #3d8a4a;
}
.n36-seat-stat.is-rest-used {
opacity: 0.85;
}
.n36-seat-stat.is-rest-used .n36-seat-stat-label {
text-decoration: line-through;
color: var(--n36-ink-dim);
}
.n36-seat-stat.is-rest-used strong {
display: none;
}
.n36-board .n36-seat-treasures {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.3rem;
margin-top: 0.2rem;
min-height: 1.5rem;
}
.n36-seat-empty {
font-size: 0.72rem;
color: var(--n36-ink-dim);
font-style: italic;
}
.n36-board .n36-seat.is-active,
.n36-board .n36-seat.is-deciding {
transform: none;
border-width: 1px;
border-left-width: 3px;
}
.n36-board .n36-seat.is-active {
border-color: var(--n36-accent);
border-left-color: var(--n36-accent);
background:
linear-gradient(135deg, rgba(138, 36, 36, 0.1) 0%, #fffaf8 52%, #ffffff 100%);
box-shadow:
0 0 0 1px rgba(138, 36, 36, 0.14),
0 4px 14px rgba(138, 36, 36, 0.1);
}
.n36-board .n36-seat.is-deciding {
border-color: var(--n36-accent-2);
border-left-color: var(--n36-accent-2);
background: #ffffff;
box-shadow: none;
}
.n36-board .n36-seat.is-out {
opacity: 0.5;
filter: grayscale(0.55);
}
.n36-board .n36-seat.is-eliminating {
opacity: 1;
}
.n36-muted {
color: var(--n36-ink-dim);
font-size: 0.8rem;
}
.n36-main {
display: flex;
flex-direction: column;
gap: 0.85rem;
min-width: 0;
min-height: 0;
max-height: none;
height: auto;
align-self: stretch;
overflow: hidden;
position: relative;
}
.n36-board .n36-progress-wrap {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: 0.55rem 1rem;
align-items: center;
text-align: center;
margin: 0;
max-width: none;
background: var(--n36-panel);
border: 1px solid var(--n36-ink);
border-radius: 8px;
padding: 0.45rem 2.4rem 0.45rem 0.75rem;
box-shadow: none;
flex-shrink: 0;
position: relative;
overflow: visible;
}
.n36-board-menu {
position: absolute;
top: 50%;
right: 0.35rem;
z-index: 20;
transform: translateY(-50%);
}
.n36-board-menu-btn {
appearance: none;
display: grid;
place-content: center;
gap: 2px;
width: 1.75rem;
height: 1.75rem;
padding: 0;
border-radius: 6px;
border: 1px solid var(--n36-line);
background: transparent;
color: var(--n36-ink-dim);
cursor: pointer;
}
.n36-board-menu-btn span {
display: block;
width: 0.9rem;
height: 2px;
border-radius: 1px;
background: currentColor;
}
.n36-board-menu-btn:hover,
.n36-board-menu.is-open .n36-board-menu-btn {
color: var(--n36-accent);
border-color: rgba(138, 36, 36, 0.45);
background: rgba(138, 36, 36, 0.08);
}
.n36-board-menu-panel {
position: absolute;
top: calc(100% + 0.35rem);
right: 0;
min-width: 13rem;
max-height: min(70dvh, 22rem);
padding: 0.4rem;
border-radius: 10px;
border: 1px solid var(--n36-ink);
background: var(--n36-panel);
box-shadow: none;
display: flex;
flex-direction: column;
gap: 0.1rem;
overflow: auto;
text-align: left;
}
.n36-board-menu-panel[hidden] {
display: none !important;
}
.n36-board-menu-meta {
margin: 0 0 0.2rem;
padding: 0.4rem 0.6rem 0.5rem;
border-bottom: 1px solid var(--n36-line);
display: flex;
flex-direction: column;
gap: 0.12rem;
text-align: left;
}
.n36-board-menu-meta strong {
font-family: var(--n36-font-display);
font-size: 0.92rem;
color: var(--n36-ink);
}
.n36-board-menu-meta span {
font-size: 0.75rem;
color: var(--n36-ink-dim);
}
.n36-board-menu-item {
appearance: none;
display: block;
width: 100%;
text-align: left;
border: none;
background: transparent;
color: var(--n36-ink);
font: inherit;
font-size: 0.9rem;
font-weight: 600;
padding: 0.5rem 0.6rem;
border-radius: 6px;
cursor: pointer;
text-decoration: none;
box-sizing: border-box;
}
.n36-board-menu-item:hover {
background: rgba(138, 36, 36, 0.12);
color: var(--n36-accent);
}
.n36-board-menu-item.is-danger {
color: var(--n36-bad);
}
.n36-board-menu-item.is-host-sep {
margin-top: 0.35rem;
border-top: 1px solid var(--n36-line);
border-radius: 0;
padding-top: 0.65rem;
}
.n36-board-menu-item.is-danger:hover {
background: rgba(166, 30, 30, 0.1);
color: #7a1515;
}
.n36-board-menu-footer {
margin-top: auto;
padding-top: 0.35rem;
border-top: 1px solid var(--n36-line);
text-align: left;
}
.n36-board-menu-push {
margin: 0;
padding: 0.45rem 0.6rem 0.35rem;
text-align: left;
}
.n36-board-menu-push-label {
display: flex;
align-items: flex-start;
justify-content: flex-start;
gap: 0.45rem;
font-size: 0.88rem;
font-weight: 600;
line-height: 1.35;
color: var(--n36-ink);
cursor: pointer;
text-align: left;
}
.n36-board-menu-push-label input {
margin-top: 0.15rem;
flex-shrink: 0;
}
.n36-board-menu-push .n36-push-error {
margin: 0.35rem 0 0;
font-size: 0.75rem;
}
.n36-board-menu-host-vis {
margin-top: auto;
padding: 0.45rem 0.6rem 0.25rem;
border-top: 1px solid var(--n36-line);
display: flex;
flex-direction: column;
gap: 0.4rem;
text-align: left;
}
.n36-board-menu-host-vis + .n36-board-menu-footer {
margin-top: 0;
padding-top: 0.15rem;
border-top: none;
}
.n36-board .n36-status-progress {
padding-right: 0.75rem;
border-right: 1px solid var(--n36-line);
}
.n36-board .n36-center-treasures .n36-chip {
width: 1.55rem;
height: 1.55rem;
}
.n36-board .n36-effect {
padding: 0.15rem 0.35rem;
gap: 0.3rem;
}
.n36-board .n36-effect-die {
width: 1.2rem;
height: 1.2rem;
}
.n36-board .n36-effect-count {
min-width: 1.2rem;
width: 1.2rem;
height: 1.2rem;
padding: 0;
font-size: 0.72rem;
border-width: 2px;
border-radius: 5px;
flex-shrink: 0;
box-sizing: border-box;
}
.n36-board .n36-status-side {
text-align: left;
gap: 0.35rem;
}
.n36-board .n36-status-label {
margin: 0 0 0.2rem;
font-size: 0.65rem;
}
.n36-board .n36-status-progress .n36-status-label {
margin: 0 0 0.35rem;
font-size: 0.95rem;
letter-spacing: 0.1em;
color: var(--n36-ink);
}
.n36-board .n36-progress-track {
height: 10px;
}
.n36-board .n36-progress-value {
font-size: clamp(2.4rem, 5vw, 3.4rem);
}
.n36-board .n36-progress-max {
font-size: 0.4em;
padding-bottom: 0.15em;
}
.n36-board .n36-progress {
gap: 0.35rem;
}
@media (max-width: 720px) { .n36-board .n36-progress-wrap {
grid-template-columns: 1fr;
}
}
.n36-panel-split {
display: grid;
grid-template-columns: minmax(11.5rem, 0.9fr) minmax(0, 1.35fr);
align-items: stretch;
min-height: 0;
flex: 1 1 auto;
height: auto;
background: #ffffff;
overflow: hidden;
}
.n36-panel-split.has-extra-pending {
background: transparent;
box-shadow: inset 0 0 0 1px rgba(138, 36, 36, 0.28);
}
.n36-panel-split.is-bonus-turn {
background: transparent;
box-shadow: inset 0 0 0 1px rgba(138, 36, 36, 0.35);
animation: n36-bonus-pulse 2.2s ease-in-out infinite;
}
.n36-panel-hero {
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
gap: 0.85rem;
padding: 1rem 0;
border-right: 1px solid rgba(138, 36, 36, 0.22);
min-width: 0;
min-height: 0;
height: auto;
overflow: hidden;
box-sizing: border-box;
container-type: size;
}
.n36-panel-split.has-extra-pending .n36-panel-hero,
.n36-panel-split.is-bonus-turn .n36-panel-hero {
border-right-color: rgba(138, 36, 36, 0.28);
}
.n36-panel-hero-meta {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.4rem;
min-width: 0;
padding: 0 1.35rem;
flex: 0 0 auto;
}
.n36-panel-hero-name {
margin: 0;
font-family: var(--n36-font-display);
font-weight: 700;
font-size: clamp(1.15rem, 2.2vw, 1.45rem);
line-height: 1.15;
color: var(--n36-ink);
letter-spacing: 0.02em;
max-width: 100%;
min-width: 0;
overflow: hidden;
overflow-wrap: anywhere;
word-break: break-word;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
}
.n36-panel-hero-role {
margin: 0;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--n36-accent);
}
.n36-panel-hero .n36-turn-progress {
margin-top: 0.15rem;
width: 100%;
}
.n36-panel-hero-visual { --n36-hero-meta: 8.5rem;
position: relative;
flex: 0 0 auto;
width: min(100%, calc(100cqh - var(--n36-hero-meta)));
aspect-ratio: 1 / 1;
height: auto;
max-width: 100%;
align-self: center;
margin: 0;
overflow: hidden;
}
.n36-panel-hero-art {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border-radius: 0;
background:
linear-gradient(145deg, #c44a62 0%, #8a2424 55%, #4a1212 100%);
border: none;
border-top: 1px solid rgba(20, 17, 15, 0.14);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.18),
inset 0 -40px 50px rgba(20, 17, 15, 0.08);
}
.n36-panel-skill-btn {
appearance: none;
position: absolute;
left: 0.65rem;
right: 0.65rem;
bottom: 0.65rem;
z-index: 4;
margin: 0;
padding: 0.45rem 0.7rem;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.35);
background: rgba(20, 17, 15, 0.78);
color: #fff8ee;
font: inherit;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
backdrop-filter: blur(4px);
transition:
background 0.2s ease,
border-color 0.2s ease,
color 0.2s ease;
}
.n36-panel-skill-btn:hover,
.n36-panel-hero.is-skill-open .n36-panel-skill-btn {
background: rgba(138, 36, 36, 0.92);
border-color: rgba(20, 17, 15, 0.35);
color: #ffffff;
}
.n36-panel-skill-overlay {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: auto;
z-index: 3;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 0.4rem;
max-height: 72%;
padding: 1.35rem 0.9rem 3.15rem;
box-sizing: border-box;
background:
linear-gradient(
180deg,
rgba(20, 17, 15, 0) 0%,
rgba(20, 17, 15, 0.78) 28%,
rgba(8, 6, 4, 0.96) 100%
),
radial-gradient(ellipse 80% 50% at 50% 100%, rgba(138, 36, 36, 0.28), transparent 70%);
color: #ffffff;
overflow: auto;
animation: n36-skill-overlay-in 0.28s ease both;
}
.n36-panel-skill-overlay[hidden] {
display: none !important;
}
@keyframes n36-skill-overlay-in {
from {
opacity: 0;
transform: translateY(0.4rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.n36-panel-skill-overlay {
animation: none;
}
}
.n36-panel-skill-close {
appearance: none;
position: absolute;
top: 0.45rem;
right: 0.45rem;
width: 1.85rem;
height: 1.85rem;
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.4);
background: rgba(0, 0, 0, 0.35);
color: #ffffff;
font-size: 1.2rem;
line-height: 1;
cursor: pointer;
}
.n36-panel-skill-close:hover {
border-color: rgba(138, 36, 36, 0.55);
color: #e8c4c8;
}
.n36-panel-skill-kicker {
margin: 0;
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #ffffff;
}
.n36-panel-skill-name {
margin: 0;
font-family: var(--n36-font-display);
font-size: clamp(1.02rem, 2.3vw, 1.22rem);
font-weight: 700;
line-height: 1.2;
color: #ffffff;
}
.n36-panel-skill-text {
margin: 0;
font-size: 0.9rem;
line-height: 1.42;
color: #ffffff;
}
.n36-panel-hero[data-role='barbare'] .n36-panel-hero-art {
background: linear-gradient(145deg, #c44a62 0%, #8a2424 55%, #4a1212 100%);
}
.n36-panel-hero[data-role='mage'] .n36-panel-hero-art {
background: linear-gradient(145deg, #e8c4c8 0%, #8a2424 55%, #4a1212 100%);
}
.n36-panel-hero[data-role='pretresse'] .n36-panel-hero-art {
background: linear-gradient(145deg, #e8c4c8 0%, #8a2424 55%, #4a1212 100%);
}
.n36-panel-hero[data-role='paladin'] .n36-panel-hero-art {
background: linear-gradient(145deg, #c44a62 0%, #8a2424 55%, #4a1212 100%);
}
.n36-panel-hero[data-role='voleuse'] .n36-panel-hero-art {
background: linear-gradient(145deg, #e8c4c8 0%, #8a2424 55%, #4a1212 100%);
}
.n36-panel-hero[data-role='barde'] .n36-panel-hero-art {
background: linear-gradient(145deg, #e8c4c8 0%, #8a2424 55%, #4a1212 100%);
}
@keyframes n36-bonus-pulse {
0%,
100% {
box-shadow: inset 0 0 0 0 rgba(138, 36, 36, 0);
}
50% {
box-shadow: inset 0 0 0 1px rgba(138, 36, 36, 0.28), 0 0 18px 0 rgba(138, 36, 36, 0.2);
}
}
.n36-board .n36-action-panel {
max-width: none;
margin: 0;
width: 100%;
box-sizing: border-box;
overflow: hidden;
color: var(--n36-ink);
background-color: #ffffff;
background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/textures/stain.jpg);
background-position: right bottom;
background-repeat: no-repeat;
background-size: min(58%, 420px);
padding: 0;
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
height: auto;
}
.n36-board .n36-action-panel > .n36-panel-split,
.n36-board .n36-action-panel > .n36-panel-playarea {
flex: 1 1 auto;
min-height: 0;
background: transparent;
}
.n36-board .n36-panel-split {
background: transparent;
}
.n36-panel-playarea {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1.25rem;
padding: 1.5rem;
box-sizing: border-box;
min-width: 0;
min-height: 0;
height: auto;
overflow: auto;
background: transparent;
}
.n36-panel-playarea > .n36-dice-board,
.n36-panel-playarea > .n36-skill-card,
.n36-panel-playarea > .n36-actions,
.n36-panel-playarea > .n36-ambush-stage,
.n36-panel-playarea > .n36-backlash-stage,
.n36-panel-playarea > .n36-modal-card {
width: 100%;
margin: 0;
flex: 0 0 auto;
}
@media (max-width: 820px) { .n36-panel-split {
grid-template-columns: 1fr;
}
}
.n36-extra-turn-badge {
margin: 0.15rem 0 0;
padding: 0.28rem 0.55rem;
border-radius: 4px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #1a3f78;
background: #e4eefc;
border: 1px solid #3a6ab0;
}
.n36-extra-turn-badge.is-live {
color: #102038;
background: #d6e8ff;
border-color: #1a3f78;
animation: n36-sum-pop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.n36-extra-turn-dice-note {
margin: 0.45rem 0 0;
text-align: center;
font-size: 0.82rem;
font-weight: 700;
color: #1a3f78;
letter-spacing: 0.02em;
}
#n36-extra-turn-fx {
position: fixed;
inset: 0;
z-index: 9998;
pointer-events: none;
display: grid;
place-items: center;
}
#n36-bard-fx {
position: fixed;
inset: 0;
z-index: 9998;
pointer-events: none;
display: grid;
place-items: center;
}
#n36-cast-fx {
position: fixed;
inset: 0;
z-index: 9998;
pointer-events: none;
display: grid;
place-items: center;
}
#n36-riposte-fx {
position: fixed;
inset: 0;
z-index: 9998;
pointer-events: none;
display: grid;
place-items: center;
}
#n36-host-fx {
position: fixed;
inset: 0;
z-index: 9998;
pointer-events: none;
display: grid;
place-items: center;
}
.n36-host-toast {
max-width: 20rem;
padding: 1.05rem 1.25rem 1.15rem;
border-radius: 14px;
text-align: center;
color: var(--n36-ink);
opacity: 0;
transform: translateY(0.7rem) scale(0.94);
transition:
opacity 0.3s ease,
transform 0.4s cubic-bezier(0.2, 1.1, 0.3, 1);
}
.n36-host-toast.is-restart {
background: linear-gradient(165deg, rgba(70, 48, 28, 0.97), rgba(24, 16, 10, 0.98));
border: 1px solid rgba(138, 36, 36, 0.55);
box-shadow:
0 16px 36px rgba(0, 0, 0, 0.5),
0 0 28px rgba(201, 162, 39, 0.22);
}
.n36-host-toast.is-scores {
background: linear-gradient(165deg, rgba(48, 52, 62, 0.97), rgba(16, 18, 24, 0.98));
border: 1px solid rgba(180, 190, 210, 0.45);
box-shadow:
0 16px 36px rgba(0, 0, 0, 0.5),
0 0 24px rgba(140, 150, 180, 0.2);
}
.n36-host-toast.is-in {
opacity: 1;
transform: translateY(0) scale(1);
}
.n36-host-toast.is-out {
opacity: 0;
transform: translateY(-0.4rem) scale(0.97);
}
.n36-host-toast-kicker {
margin: 0 0 0.25rem;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 176, 136, 0.95);
}
.n36-host-toast.is-scores .n36-host-toast-kicker {
color: rgba(190, 200, 220, 0.9);
}
.n36-host-toast-title {
margin: 0 0 0.4rem;
font-family: var(--n36-font-display);
font-size: 1.35rem;
font-weight: 700;
line-height: 1.15;
color: #ffc4b0;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.n36-host-toast.is-scores .n36-host-toast-title {
color: #e8eef8;
}
.n36-host-toast-sub {
margin: 0;
font-size: 0.9rem;
line-height: 1.35;
color: #f0e2c0;
}
.n36-host-toast.is-scores .n36-host-toast-sub {
color: #c8d0dc;
}
.n36-riposte-toast {
max-width: 21rem;
padding: 1.05rem 1.2rem 1.15rem;
border-radius: 14px;
text-align: center;
color: var(--n36-ink);
background: linear-gradient(165deg, rgba(110, 42, 28, 0.97), rgba(28, 12, 10, 0.98));
border: 1px solid rgba(232, 116, 58, 0.65);
box-shadow:
0 16px 36px rgba(0, 0, 0, 0.5),
0 0 28px rgba(200, 70, 40, 0.32);
opacity: 0;
transform: translateY(0.7rem) scale(0.94);
transition:
opacity 0.3s ease,
transform 0.4s cubic-bezier(0.2, 1.1, 0.3, 1);
}
.n36-riposte-toast.is-in {
opacity: 1;
transform: translateY(0) scale(1);
}
.n36-riposte-toast.is-out {
opacity: 0;
transform: translateY(-0.4rem) scale(0.97);
}
.n36-riposte-toast-kicker {
margin: 0 0 0.25rem;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 176, 136, 0.95);
}
.n36-riposte-toast-title {
margin: 0 0 0.55rem;
font-family: var(--n36-font-display);
font-size: 1.35rem;
font-weight: 700;
color: #ffc4b0;
text-shadow: 0 2px 12px rgba(200, 60, 40, 0.4);
}
.n36-riposte-toast-dice {
display: flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
margin-bottom: 0.55rem;
}
.n36-riposte-toast-die {
width: 2.5rem;
height: 2.5rem;
border-radius: 8px;
display: grid;
place-items: center;
background: #f7f0e4;
border: 1px solid rgba(255, 255, 255, 0.35);
box-shadow: 0 5px 14px rgba(20, 17, 15, 0.12);
}
.n36-riposte-toast-die.is-from {
opacity: 0.5;
filter: grayscale(0.4);
}
.n36-riposte-toast-die.is-to {
animation: n36-sum-pop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both;
box-shadow:
0 0 0 2px rgba(232, 116, 58, 0.75),
0 6px 16px rgba(0, 0, 0, 0.4);
}
.n36-riposte-toast-die .n36-face-pips {
width: 78%;
height: 78%;
}
.n36-riposte-toast-arrow {
font-size: 1.2rem;
font-weight: 700;
color: #ffb088;
}
.n36-riposte-toast-sub {
margin: 0;
font-size: 0.9rem;
line-height: 1.35;
color: #ffd8c8;
overflow-wrap: anywhere;
word-break: break-word;
}
.n36-riposte-toast-treasure {
display: flex;
justify-content: center;
margin: 0 0 0.65rem;
}
.n36-riposte-toast.is-intro .n36-riposte-toast-title,
.n36-riposte-toast.is-pass .n36-riposte-toast-title {
margin-bottom: 0.45rem;
}
#n36-treasure-flip-fx {
position: fixed;
inset: 0;
z-index: 9998;
pointer-events: none;
display: grid;
place-items: center;
}
.n36-treasure-flip-toast {
max-width: 20rem;
padding: 1rem 1.2rem 1.15rem;
border-radius: 14px;
text-align: center;
color: var(--n36-ink);
background: linear-gradient(165deg, rgba(72, 52, 18, 0.97), rgba(28, 22, 12, 0.94));
border: 1px solid rgba(138, 36, 36, 0.55);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
opacity: 0;
transform: translateY(0.7rem) scale(0.94);
transition:
opacity 0.3s ease,
transform 0.4s cubic-bezier(0.2, 1.1, 0.3, 1);
}
.n36-treasure-flip-toast.is-in {
opacity: 1;
transform: translateY(0) scale(1);
}
.n36-treasure-flip-toast.is-out {
opacity: 0;
transform: translateY(-0.4rem) scale(0.98);
}
.n36-treasure-flip-toast-kicker {
margin: 0 0 0.2rem;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 200, 170, 0.95);
}
.n36-treasure-flip-toast-title {
margin: 0 0 0.65rem;
font-family: var(--n36-font-display);
font-size: 1.25rem;
font-weight: 700;
color: #ffc8a8;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.n36-treasure-flip-toast-dice {
display: flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
margin: 0 0 0.55rem;
}
.n36-treasure-flip-toast-die {
width: 2.6rem;
height: 2.6rem;
border-radius: 8px;
display: grid;
place-items: center;
background: #ffffff;
border: 2px solid var(--n36-ink);
}
.n36-treasure-flip-toast-die.is-from {
opacity: 0.55;
filter: grayscale(0.25);
}
.n36-treasure-flip-toast-die.is-to {
animation: n36-sum-pop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both;
box-shadow:
0 0 0 2px rgba(138, 36, 36, 0.75),
0 6px 16px rgba(0, 0, 0, 0.4);
}
.n36-treasure-flip-toast-die .n36-face-pips {
width: 78%;
height: 78%;
}
.n36-treasure-flip-toast-die .n36-pip.is-on {
background: var(--n36-ink);
box-shadow: none;
}
.n36-treasure-flip-toast-arrow {
font-size: 1.2rem;
font-weight: 700;
color: #ffd8c0;
}
.n36-treasure-flip-toast-sub {
margin: 0;
font-size: 0.9rem;
line-height: 1.35;
color: #f0e0c0;
}
.n36-final.is-treasure-flash,
.n36-sum-total.is-treasure-flash {
animation: n36-treasure-flash 0.85s ease;
}
@keyframes n36-treasure-flash {
0%,
100% {
transform: scale(1);
}
40% {
transform: scale(1.06);
color: var(--n36-accent);
}
}
.n36-treasure-use-btn {
display: flex !important;
align-items: center;
gap: 0.55rem;
width: 100%;
text-align: left;
padding: 0.5rem 0.65rem !important;
}
.n36-treasure-use-btn .n36-chip-treasure-use {
flex: 0 0 auto;
width: 1.75rem;
height: 1.75rem;
border-width: 1.5px;
}
.n36-treasure-use-section {
display: flex;
flex-direction: column;
gap: 0.35rem;
width: 100%;
}
.n36-treasure-use-title {
margin: 0;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--n36-accent);
text-align: center;
}
.n36-treasure-use-list {
display: flex;
flex-direction: column;
gap: 0.35rem;
width: 100%;
}
.n36-treasure-use-chip {
flex: 0 0 auto;
width: 2.1rem;
height: 2.1rem;
border-radius: 7px;
display: grid;
place-items: center;
background: #ffffff;
border: 2px solid var(--n36-ink);
box-shadow: none;
}
.n36-treasure-use-chip .n36-face-pips {
width: 78%;
height: 78%;
}
.n36-treasure-use-chip .n36-pip.is-on {
background: var(--n36-ink);
box-shadow: none;
}
.n36-treasure-use-copy {
display: flex;
flex-direction: column;
gap: 0.1rem;
min-width: 0;
}
.n36-treasure-use-copy strong {
font-size: 0.95rem;
color: var(--n36-ink);
}
.n36-treasure-use-copy small {
font-size: 0.78rem;
color: var(--n36-ink-dim);
line-height: 1.3;
}
.n36-treasure-pick {
display: flex;
flex-direction: column;
gap: 0.65rem;
padding: 0.65rem 0.7rem;
border: 1px solid rgba(138, 36, 36, 0.28);
border-radius: 10px;
background: rgba(138, 36, 36, 0.06);
}
.n36-treasure-pick-head {
display: flex;
align-items: center;
gap: 0.65rem;
}
.n36-treasure-pick-opts {
justify-content: flex-start;
}
.n36-treasure-pick-cancel {
align-self: flex-start;
font-size: 0.85rem;
opacity: 0.85;
}
.n36-cast-toast {
max-width: 20rem;
padding: 1rem 1.2rem 1.15rem;
border-radius: 14px;
text-align: center;
color: var(--n36-ink);
opacity: 0;
transform: translateY(0.7rem) scale(0.94);
transition:
opacity 0.3s ease,
transform 0.4s cubic-bezier(0.2, 1.1, 0.3, 1);
}
.n36-cast-toast.is-bless {
background: linear-gradient(165deg, rgba(42, 78, 120, 0.97), rgba(14, 24, 40, 0.98));
border: 1px solid rgba(150, 200, 255, 0.6);
box-shadow:
0 16px 36px rgba(0, 0, 0, 0.5),
0 0 28px rgba(100, 160, 230, 0.3);
}
.n36-cast-toast.is-curse {
background: linear-gradient(165deg, rgba(110, 36, 28, 0.97), rgba(28, 12, 10, 0.98));
border: 1px solid rgba(232, 116, 58, 0.65);
box-shadow:
0 16px 36px rgba(0, 0, 0, 0.5),
0 0 28px rgba(200, 60, 40, 0.32);
}
.n36-cast-toast.is-in {
opacity: 1;
transform: translateY(0) scale(1);
}
.n36-cast-toast.is-out {
opacity: 0;
transform: translateY(-0.4rem) scale(0.97);
}
.n36-cast-toast-kicker {
margin: 0 0 0.3rem;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.n36-cast-toast.is-bless .n36-cast-toast-kicker {
color: rgba(170, 210, 255, 0.92);
}
.n36-cast-toast.is-curse .n36-cast-toast-kicker {
color: rgba(255, 170, 140, 0.92);
}
.n36-cast-toast-title {
margin: 0 0 0.55rem;
font-family: var(--n36-font-display);
font-size: 1.4rem;
font-weight: 700;
line-height: 1.15;
}
.n36-cast-toast.is-bless .n36-cast-toast-title {
color: #e8c4c8;
text-shadow: 0 2px 12px rgba(100, 160, 230, 0.4);
}
.n36-cast-toast.is-curse .n36-cast-toast-title {
color: #ffc4b0;
text-shadow: 0 2px 12px rgba(200, 60, 40, 0.4);
}
.n36-cast-toast-die {
width: 2.6rem;
height: 2.6rem;
margin: 0 auto 0.55rem;
border-radius: 8px;
display: grid;
place-items: center;
background: #f7f0e4;
border: 1px solid rgba(255, 255, 255, 0.35);
box-shadow: 0 6px 16px rgba(20, 17, 15, 0.12);
}
.n36-cast-toast-die .n36-face-pips {
width: 78%;
height: 78%;
}
.n36-cast-toast-sub {
margin: 0;
font-size: 0.9rem;
line-height: 1.35;
overflow-wrap: anywhere;
word-break: break-word;
}
.n36-cast-toast.is-bless .n36-cast-toast-sub {
color: #d6e8ff;
}
.n36-cast-toast.is-curse .n36-cast-toast-sub {
color: #ffd8c8;
}
.n36-effect.is-cast-flash {
animation: n36-cast-flash 0.85s ease;
}
@keyframes n36-cast-flash {
0%,
100% {
transform: scale(1);
box-shadow: none;
}
35% {
transform: scale(1.08);
box-shadow: 0 0 0 2px rgba(138, 36, 36, 0.55), 0 0 18px rgba(138, 36, 36, 0.35);
}
}
.n36-bard-toast {
max-width: 20rem;
padding: 1rem 1.2rem 1.1rem;
border-radius: 14px;
text-align: center;
color: var(--n36-ink);
background:
linear-gradient(165deg, rgba(110, 78, 22, 0.97), rgba(36, 24, 10, 0.98));
border: 1px solid rgba(138, 36, 36, 0.6);
box-shadow:
0 16px 36px rgba(0, 0, 0, 0.5),
0 0 28px rgba(201, 162, 39, 0.28);
opacity: 0;
transform: translateY(0.7rem) scale(0.94);
transition:
opacity 0.3s ease,
transform 0.4s cubic-bezier(0.2, 1.1, 0.3, 1);
}
.n36-bard-toast.is-bonus {
border-color: rgba(255, 220, 120, 0.75);
box-shadow:
0 18px 40px rgba(0, 0, 0, 0.55),
0 0 36px rgba(138, 36, 36, 0.4);
}
.n36-bard-toast.is-in {
opacity: 1;
transform: translateY(0) scale(1);
}
.n36-bard-toast.is-out {
opacity: 0;
transform: translateY(-0.4rem) scale(0.97);
}
.n36-bard-toast-kicker {
margin: 0 0 0.3rem;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 220, 140, 0.9);
}
.n36-bard-toast-title {
margin: 0 0 0.35rem;
font-family: var(--n36-font-display);
font-size: 1.35rem;
font-weight: 700;
line-height: 1.15;
color: #ffc8a0;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.n36-bard-toast-sub {
margin: 0;
font-size: 0.9rem;
color: #f0e2c0;
line-height: 1.35;
overflow-wrap: anywhere;
word-break: break-word;
}
.n36-extra-turn-toast {
padding: 1.15rem 1.35rem 1.25rem;
border-radius: 14px;
text-align: center;
color: #e8f1ff;
background:
linear-gradient(165deg, rgba(40, 70, 120, 0.96), rgba(18, 28, 48, 0.97));
border: 1px solid rgba(160, 200, 255, 0.55);
box-shadow:
0 18px 40px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(20, 17, 15, 0.12),
0 0 32px rgba(100, 160, 240, 0.35);
opacity: 0;
transform: translateY(0.8rem) scale(0.92);
transition:
opacity 0.35s ease,
transform 0.45s cubic-bezier(0.2, 1.1, 0.3, 1);
}
.n36-extra-turn-toast.is-start {
background:
linear-gradient(165deg, rgba(70, 120, 200, 0.97), rgba(24, 40, 72, 0.98));
border-color: rgba(200, 225, 255, 0.7);
box-shadow:
0 20px 48px rgba(0, 0, 0, 0.55),
0 0 48px rgba(130, 180, 255, 0.45);
}
.n36-extra-turn-toast.is-in {
opacity: 1;
transform: translateY(0) scale(1);
}
.n36-extra-turn-toast.is-out {
opacity: 0;
transform: translateY(-0.5rem) scale(0.96);
}
.n36-extra-turn-kicker {
margin: 0 0 0.35rem;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #9ec0f0;
}
.n36-extra-turn-title {
margin: 0 0 0.4rem;
font-family: var(--n36-font-display);
font-size: 1.55rem;
font-weight: 700;
line-height: 1.15;
color: #fff;
text-shadow: 0 2px 12px rgba(80, 140, 220, 0.45);
}
.n36-extra-turn-sub {
margin: 0;
font-size: 0.92rem;
color: #c8dcff;
line-height: 1.35;
overflow-wrap: anywhere;
word-break: break-word;
}
.n36-board .n36-modal-card {
max-width: min(28rem, 100%);
margin: 0 auto;
box-sizing: border-box;
overflow-wrap: anywhere;
word-break: break-word;
} .n36-board .n36-action-panel .n36-win-card,
.n36-board .n36-action-panel .n36-session-end-card,
.n36-board .n36-action-panel .n36-modal-card {
border: none;
background: transparent;
box-shadow: none;
padding-left: 0;
padding-right: 0;
overflow: visible;
}
.n36-board .n36-action-panel .n36-win-card::before,
.n36-board .n36-action-panel .n36-win-card::after,
.n36-board .n36-action-panel .n36-session-end-card::before,
.n36-board .n36-action-panel .n36-session-end-card::after,
.n36-board .n36-action-panel .n36-modal-card::before,
.n36-board .n36-action-panel .n36-modal-card::after {
display: none;
}
.n36-sidebar-rail {
overflow: hidden;
gap: 0.75rem;
justify-content: center;
}
.n36-rail-section {
display: flex;
flex-direction: column;
justify-content: flex-start;
min-height: 0;
min-width: 0;
}
.n36-board.has-help.has-log .n36-help-section {
flex: 0 1 42%;
max-height: 42%;
padding-bottom: 0.65rem;
border-bottom: 1px solid var(--n36-line);
}
.n36-board.has-help.has-log .n36-log-section {
flex: 1 1 58%;
}
.n36-board.has-help:not(.has-log) .n36-help-section,
.n36-board.has-log:not(.has-help) .n36-log-section {
flex: 1 1 auto;
}
.n36-log-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
flex-shrink: 0;
}
.n36-log-head .n36-sidebar-title {
margin: 0;
}
.n36-log-close {
appearance: none;
background: transparent;
border: 1px solid var(--n36-line);
color: var(--n36-ink);
width: 2rem;
height: 2rem;
border-radius: 6px;
cursor: pointer;
font-size: 1.25rem;
line-height: 1;
}
.n36-log-close:hover {
border-color: var(--n36-accent);
color: var(--n36-accent);
}
.n36-log-list {
list-style: none;
padding: 0;
margin: 0;
overflow: auto;
flex: 1;
min-height: 0;
font-size: 0.88rem;
color: var(--n36-ink-dim);
}
.n36-log-list li {
padding: 0.4rem 0;
border-bottom: 1px solid var(--n36-line);
line-height: 1.35;
}
.n36-log-role {
font-weight: 700;
color: var(--n36-accent);
}
.n36-log-who {
font-weight: 600;
color: var(--n36-ink);
}  .n36-create,
.n36-join,
.n36-home-public,
.n36-lobby section,
.n36-action-panel,
.n36-modal-card,
.n36-sidebar,
.n36-win-card {
position: relative;
box-shadow: none;
background: #ffffff;
border: 1px solid var(--n36-ink);
} .n36-board .n36-action-panel {
background-color: #ffffff;
background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/textures/stain.jpg);
background-position: right bottom;
background-repeat: no-repeat;
background-size: min(58%, 420px);
}
.n36-create::before,
.n36-join::before,
.n36-home-card::before,
.n36-home-public::before,
.n36-action-panel::before,
.n36-modal-card::before,
.n36-win-card::before {
content: "";
position: absolute;
top: 0.55rem;
left: 0.55rem;
width: 0.85rem;
height: 0.85rem;
border-top: 1.5px solid var(--n36-accent);
border-left: 1.5px solid var(--n36-accent);
pointer-events: none;
opacity: 0.7;
}
.n36-create::after,
.n36-join::after,
.n36-home-card::after,
.n36-home-public::after,
.n36-action-panel::after,
.n36-modal-card::after,
.n36-win-card::after {
content: "";
position: absolute;
bottom: 0.55rem;
right: 0.55rem;
width: 0.85rem;
height: 0.85rem;
border-bottom: 1.5px solid var(--n36-accent);
border-right: 1.5px solid var(--n36-accent);
pointer-events: none;
opacity: 0.7;
}
.n36-brand-mark {
display: block;
width: min(7.5rem, 28vw);
aspect-ratio: 1 / 1;
height: auto;
margin: 0 auto 0.55rem;
border-radius: 10px;
object-fit: cover;
box-shadow: none;
border: 1px solid var(--n36-ink);
} .n36-home {
display: flex;
align-items: flex-start;
justify-content: center;
min-height: 0;
padding: 0 !important;
box-sizing: border-box;
}
body.n36-body .n36-home {
min-height: 100dvh;
align-items: flex-start;
} .n36-shell.n36-setup,
.n36-shell.n36-lobby {
display: flex;
align-items: flex-start;
justify-content: center;
min-height: 0;
padding: max(1.25rem, env(safe-area-inset-top))
max(1rem, env(safe-area-inset-right))
max(1.5rem, env(safe-area-inset-bottom))
max(1rem, env(safe-area-inset-left));
box-sizing: border-box;
overflow: auto;
}
body.n36-body .n36-shell.n36-setup,
body.n36-body .n36-shell.n36-lobby {
min-height: 100dvh;
}
.n36-shell.n36-lobby:has(.n36-lobby-actions) {
padding-bottom: calc(7.5rem + env(safe-area-inset-bottom));
}
.n36-has-cookie-banner .n36-shell.n36-lobby:has(.n36-lobby-actions) {
padding-bottom: calc(11.25rem + env(safe-area-inset-bottom));
}
.n36-setup > .n36-home-layout,
.n36-lobby > .n36-home-layout {
margin-block: 0;
} .n36-shell.n36-board {
display: flex;
flex-direction: column;
height: 100dvh;
max-height: 100dvh;
min-height: 0;
box-sizing: border-box;
padding: 0.75rem clamp(1rem, 3vw, 2rem);
overflow: hidden;
}
.n36-home-layout {
position: relative;
z-index: 1;
width: min(1120px, 100%);
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
grid-template-areas: "hero panel";
gap: clamp(1.25rem, 3vw, 2.75rem);
align-items: start;
padding: 0;
margin: 0;
}
.n36-home-brand {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
min-width: 0;
margin: 0 0 0.35rem;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
.n36-home-brand .n36-brand,
.n36-home-brand .n36-brand-home,
.n36-home-brand .n36-home-title {
box-shadow: none !important;
text-shadow: none;
background: transparent !important;
border: none !important;
}
.n36-home-hero {
grid-area: hero;
display: flex;
align-items: flex-start;
justify-content: center;
align-self: start;
min-width: 0;
min-height: 0;
}
.n36-home-art {
display: block;
width: 100%;
max-width: min(100%, 36rem);
max-height: min(78dvh, 680px);
aspect-ratio: 1 / 1;
height: auto;
object-fit: contain;
border: none;
border-radius: 0;
background: transparent;
}
.n36-home-panel {
grid-area: panel;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.85rem;
min-width: 0;
width: 100%;
max-width: 24rem;
justify-self: stretch;
}
.n36-home-card {
position: relative;
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
margin: 0;
padding: 1rem 1.1rem;
border: 1px solid var(--n36-ink);
border-radius: var(--n36-radius);
background: #ffffff;
box-sizing: border-box;
box-shadow: none;
}
.n36-home .n36-home-card,
.n36-setup .n36-home-card {
width: 100%;
max-width: 100%;
margin: 0;
}
.n36-home .n36-create,
.n36-home .n36-join,
.n36-home .n36-home-create,
.n36-home .n36-home-public,
.n36-home .n36-home-info,
.n36-setup .n36-create,
.n36-setup .n36-join,
.n36-setup .n36-home-info,
.n36-setup .n36-players-list,
.n36-setup .n36-invite {
width: 100%;
max-width: none;
margin: 0;
}
.n36-setup .n36-inline-form,
.n36-setup > .n36-home-layout .n36-home-panel > .n36-btn-primary,
.n36-setup > .n36-home-layout .n36-home-panel form .n36-btn-primary,
.n36-setup .n36-wait,
.n36-setup .n36-twitch {
max-width: none;
width: 100%;
margin: 0;
}
.n36-setup .n36-lobby-actions .n36-btn-primary,
.n36-setup .n36-lobby-actions .n36-lobby-cancel,
.n36-setup .n36-lobby-actions #n36-start {
width: auto;
min-width: 12rem;
max-width: 100%;
margin: 0;
padding-inline: 1.35rem;
}
.n36-setup .n36-twitch {
text-align: left;
}
.n36-setup .n36-invite {
border: 1px solid var(--n36-ink);
}
.n36-home .n36-join h2,
.n36-home .n36-home-public-title,
.n36-setup .n36-players-list h2,
.n36-setup .n36-create h2 {
margin: 0 0 0.75rem;
font-family: var(--n36-font-display);
font-size: 1.15rem;
font-weight: 900;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--n36-accent);
}
.n36-home .n36-error,
.n36-setup .n36-error {
margin: 0;
text-align: left;
}
@media (max-width: 960px) {
.n36-home-layout {
width: 100%;
max-width: 26rem;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 0.55rem;
padding: 0.75rem 1rem max(0.85rem, env(safe-area-inset-bottom));
align-items: stretch;
box-sizing: border-box;
}
.n36-setup > .n36-home-layout,
.n36-lobby > .n36-home-layout {
margin-block: auto;
margin-inline: auto;
padding-top: 0;
padding-bottom: 0;
}
.n36-home-panel {
order: 1;
max-width: none;
width: 100%;
gap: 0.55rem;
box-sizing: border-box;
}
.n36-home-hero {
order: 2;
min-height: 0;
align-self: center;
}
.n36-home-brand {
align-items: center;
text-align: center;
margin-bottom: 0.15rem;
}
.n36-brand-home {
text-align: center;
}
.n36-home-brand .n36-home-title {
font-size: clamp(1.35rem, 6.5vw, 1.7rem);
}
.n36-home-brand .n36-eyebrow {
margin-top: 0.2rem;
letter-spacing: 0.01em;
font-size: 0.78rem;
text-transform: none;
color: var(--n36-ink);
opacity: 1;
}
.n36-home-art {
width: min(14rem, 72vw);
max-width: 14rem;
max-height: none;
border-radius: 0;
}
.n36-home-panel > .n36-home-extra-links,
.n36-setup .n36-home-panel > .n36-home-extra-links {
align-self: stretch;
width: 100%;
}
.n36-home-panel .n36-tutorial-open-btn,
.n36-setup .n36-home-panel .n36-tutorial-open-btn {
align-self: stretch;
width: 100%;
min-height: 44px;
box-sizing: border-box;
}
.n36-home .n36-create,
.n36-home .n36-join,
.n36-home .n36-home-card,
.n36-home .n36-home-public,
.n36-home .n36-home-info,
.n36-setup .n36-create,
.n36-setup .n36-join,
.n36-setup .n36-home-card,
.n36-setup .n36-home-public,
.n36-setup .n36-home-info,
.n36-setup .n36-players-list,
.n36-setup .n36-invite {
padding: 0.7rem 0.75rem;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.n36-home .n36-create label,
.n36-home .n36-join label,
.n36-setup .n36-create label,
.n36-setup .n36-join label {
margin-bottom: 0.5rem;
font-size: 0.9rem;
}
.n36-home .n36-create input,
.n36-home .n36-join input,
.n36-setup .n36-create input,
.n36-setup .n36-join input {
margin-top: 0.25rem;
padding: 0.55rem 0.65rem;
}
.n36-home .n36-join h2,
.n36-home .n36-home-public-title,
.n36-setup .n36-players-list h2,
.n36-setup .n36-create h2 {
margin: 0 0 0.5rem;
font-size: 1rem;
}
.n36-home .n36-mode-fieldset {
margin: 0.15rem 0 0.35rem;
padding: 0.45rem 0.55rem;
}
.n36-home .n36-mode-fieldset .n36-radio {
margin: 0.2rem 0;
white-space: normal;
min-height: 40px;
font-size: 0.88rem;
}
.n36-home,
.n36-shell.n36-setup,
.n36-shell.n36-lobby {
align-items: flex-start;
overflow: visible;
}
body.n36-body .n36-home,
body.n36-body .n36-shell.n36-setup,
body.n36-body .n36-shell.n36-lobby {
min-height: 100dvh;
overflow: auto;
}
.n36-home .n36-btn,
.n36-setup .n36-btn,
.n36-lobby .n36-btn {
min-height: 44px;
width: 100%;
}
.n36-lobby-actions .n36-btn {
width: auto;
}
.n36-setup .n36-inline-form .n36-btn,
.n36-lobby .n36-inline-form .n36-btn {
width: auto;
flex: 0 0 auto;
min-width: 5.5rem;
}
.n36-setup .n36-inline-form,
.n36-lobby .n36-inline-form {
display: flex;
flex-direction: row;
align-items: stretch;
gap: 0.5rem;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
.n36-setup .n36-inline-form input,
.n36-lobby .n36-inline-form input {
flex: 1 1 0;
min-width: 0;
width: auto;
min-height: 44px;
}
.n36-mode-fieldset .n36-radio {
white-space: normal;
min-height: 44px;
} .n36-create::before,
.n36-create::after,
.n36-join::before,
.n36-join::after,
.n36-home-card::before,
.n36-home-card::after,
.n36-home-public::before,
.n36-home-public::after,
.n36-action-panel::before,
.n36-action-panel::after,
.n36-modal-card::before,
.n36-modal-card::after,
.n36-win-card::before,
.n36-win-card::after,
.n36-session-end-card::before,
.n36-session-end-card::after,
.n36-tutorial-card::before,
.n36-tutorial-card::after,
.n36-lobby section::before,
.n36-lobby section::after,
.n36-setup .n36-players-list::before,
.n36-setup .n36-players-list::after,
.n36-setup .n36-invite::before,
.n36-setup .n36-invite::after {
content: none;
display: none;
}
}
@media (max-width: 960px) and (max-height: 720px) {
.n36-home-layout {
gap: 0.4rem;
padding: 0.55rem 0.7rem max(0.7rem, env(safe-area-inset-bottom));
}
.n36-setup > .n36-home-layout,
.n36-lobby > .n36-home-layout {
padding-top: 0;
padding-bottom: 0;
}
.n36-home-art {
width: min(10rem, 58vw);
max-width: 10rem;
}
.n36-home-panel {
gap: 0.4rem;
}
.n36-home .n36-create,
.n36-home .n36-join,
.n36-home .n36-home-card,
.n36-setup .n36-create,
.n36-setup .n36-join,
.n36-setup .n36-home-card {
padding: 0.55rem 0.65rem;
}
}
.n36-progress-emblem {
display: none !important;
}
.n36-status-progress {
position: relative;
}
.n36-progress-track {
background: var(--n36-bg2);
border: 1px solid var(--n36-line-strong);
} .n36-seat-art {
border-radius: 8px;
aspect-ratio: 1 / 1;
background-color: #ffffff !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
border: 1px solid var(--n36-ink);
box-shadow: none;
}
.n36-seat[data-role='barbare'] .n36-seat-art {
background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/roles/barbare.jpg) !important;
}
.n36-seat[data-role='mage'] .n36-seat-art {
background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/roles/mage.jpg) !important;
}
.n36-seat[data-role='pretresse'] .n36-seat-art {
background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/roles/pretresse.jpg) !important;
}
.n36-seat[data-role='paladin'] .n36-seat-art {
background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/roles/paladin.jpg) !important;
}
.n36-seat[data-role='voleuse'] .n36-seat-art {
background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/roles/voleuse.jpg) !important;
}
.n36-seat[data-role='barde'] .n36-seat-art {
background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/roles/barde.jpg) !important;
}
.n36-seat[data-role='barbare'],
.n36-seat[data-role='mage'],
.n36-seat[data-role='pretresse'],
.n36-seat[data-role='paladin'],
.n36-seat[data-role='voleuse'],
.n36-seat[data-role='barde'] {
border-left-color: var(--n36-accent);
} .n36-panel-hero-visual {
display: block;
background: transparent;
}
.n36-panel-hero-art {
inset: 0 !important;
width: 100% !important;
height: 100% !important;
border-radius: 0 !important;
border: none !important;
border-top: 1px solid var(--n36-line) !important;
background-color: #ffffff !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
box-shadow: none !important;
}
.n36-panel-hero[data-role='barbare'] .n36-panel-hero-art {
background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/roles/barbare.jpg) !important;
}
.n36-panel-hero[data-role='mage'] .n36-panel-hero-art {
background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/roles/mage.jpg) !important;
}
.n36-panel-hero[data-role='pretresse'] .n36-panel-hero-art {
background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/roles/pretresse.jpg) !important;
}
.n36-panel-hero[data-role='paladin'] .n36-panel-hero-art {
background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/roles/paladin.jpg) !important;
}
.n36-panel-hero[data-role='voleuse'] .n36-panel-hero-art {
background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/roles/voleuse.jpg) !important;
}
.n36-panel-hero[data-role='barde'] .n36-panel-hero-art {
background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/roles/barde.jpg) !important;
} .n36-focus-fx-art {
border-radius: 12px !important;
aspect-ratio: 1 / 1;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
border: 2px solid var(--n36-ink) !important;
}
.n36-focus-fx-caption {
color: var(--n36-ink) !important;
text-shadow: none !important;
background: #ffffff !important;
border: 1px solid var(--n36-ink) !important;
}
.n36-focus-fx-art[data-role='barbare'] { background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/roles/barbare.jpg); }
.n36-focus-fx-art[data-role='mage'] { background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/roles/mage.jpg); }
.n36-focus-fx-art[data-role='pretresse'] { background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/roles/pretresse.jpg); }
.n36-focus-fx-art[data-role='paladin'] { background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/roles/paladin.jpg); }
.n36-focus-fx-art[data-role='voleuse'] { background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/roles/voleuse.jpg); }
.n36-focus-fx-art[data-role='barde'] { background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/roles/barde.jpg); } .n36-ov-brand {
color: #f0d0d4;
font-weight: 900;
}
.n36-ov-progress {
color: #fff;
}
.n36-ov-phase,
.n36-ov-banner,
.n36-overlay-wait {
color: #f0d0d4;
} .n36-create input,
.n36-join input,
.n36-inline-form input,
.n36-invite input {
background: #faf8f6;
color: var(--n36-ink);
border-color: var(--n36-line-strong);
}
.n36-create input:focus,
.n36-join input:focus,
.n36-inline-form input:focus,
.n36-invite input:focus {
outline: 2px solid rgba(138, 36, 36, 0.35);
outline-offset: 1px;
border-color: var(--n36-accent);
} .n36-board-menu-btn {
background: var(--n36-panel);
border-color: var(--n36-line-strong);
}
.n36-board-menu-btn span {
background: var(--n36-ink);
} .n36-consequence,
.n36-turn-banner,
.n36-die-pick-hint,
.n36-rule-toggle,
.n36-handoff,
.n36-seat-sheet {
display: none;
} .n36-panel-play-scroll,
.n36-panel-play-dock {
display: contents;
}
.n36-skill-launch {
display: none;
}
.n36-skill-drawer-close {
display: none;
}
.n36-rule-fold .n36-rule-body {
display: block;
margin: 0.35rem 0 0.55rem;
} #n36-focus-fx.is-handoff {
position: fixed;
inset: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100vw;
width: 100dvw;
height: 100vh;
height: 100dvh;
min-width: 100vw;
min-width: 100dvw;
min-height: 100vh;
min-height: 100dvh;
margin: 0;
padding: 0;
pointer-events: auto;
z-index: 2147483000;
background: var(--n36-bg0);
overflow: hidden;
}
#n36-focus-fx.is-handoff .n36-handoff-panel {
position: absolute;
inset: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0;
width: 100%;
height: 100%;
min-height: 100%;
margin: 0;
background: var(--n36-bg0);
border: none;
border-radius: 0;
box-shadow: none;
padding: max(1.5rem, env(safe-area-inset-top)) 1.5rem
max(1.75rem, env(safe-area-inset-bottom));
text-align: center;
box-sizing: border-box;
will-change: transform, opacity;
}
#n36-focus-fx.is-handoff .n36-handoff-panel.is-in {
animation: n36-handoff-slide-in 0.55s cubic-bezier(0.33, 0.12, 0.25, 1) forwards;
}
#n36-focus-fx.is-handoff .n36-handoff-panel.is-out {
animation: n36-handoff-slide-out 0.45s cubic-bezier(0.33, 0.12, 0.25, 1) forwards;
}
@keyframes n36-handoff-slide-in {
0% {
transform: translateX(-115vw);
opacity: 0.85;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
@keyframes n36-handoff-slide-out {
0% {
transform: translateX(0);
opacity: 1;
}
100% {
transform: translateX(115vw);
opacity: 0.85;
}
}
@media (prefers-reduced-motion: reduce) {
#n36-focus-fx.is-handoff .n36-handoff-panel.is-in,
#n36-focus-fx.is-handoff .n36-handoff-panel.is-out {
animation-duration: 0.2s;
}
}
.n36-handoff-kicker {
margin: 0 0 1rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--n36-ink-dim);
}
.n36-handoff-art {
width: 100%;
max-width: min(100%, 22rem);
height: auto;
aspect-ratio: 1 / 1;
margin: 0 auto 1.1rem;
border-radius: 0;
border: none;
background-color: #fff;
background-size: cover;
background-position: center;
flex-shrink: 1;
}
.n36-handoff-art[data-role='barbare'] { background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/roles/barbare.jpg); }
.n36-handoff-art[data-role='mage'] { background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/roles/mage.jpg); }
.n36-handoff-art[data-role='pretresse'] { background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/roles/pretresse.jpg); }
.n36-handoff-art[data-role='paladin'] { background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/roles/paladin.jpg); }
.n36-handoff-art[data-role='voleuse'] { background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/roles/voleuse.jpg); }
.n36-handoff-art[data-role='barde'] { background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/roles/barde.jpg); }
.n36-handoff-who {
margin: 0 0 0.3rem;
font-size: clamp(1.45rem, 6vw, 1.85rem);
font-family: var(--n36-font-display);
font-weight: 700;
line-height: 1.2;
color: var(--n36-ink);
max-width: min(100%, 22rem);
overflow-wrap: anywhere;
word-break: break-word;
}
.n36-handoff-who strong {
display: inline;
}
.n36-handoff-role {
margin: 0 0 0.75rem;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--n36-accent);
}
.n36-handoff-hint {
margin: 0 0 1.35rem;
color: var(--n36-ink-dim);
font-size: 0.95rem;
max-width: 18rem;
}
#n36-focus-fx.is-handoff .n36-btn-primary {
width: min(100%, 18rem);
margin-top: 0;
white-space: normal;
line-height: 1.25;
}
#n36-focus-fx.is-handoff .n36-handoff-panel.is-auto .n36-handoff-role {
margin-bottom: 0;
}
@media (max-width: 960px) {
.n36-html:has(.n36-board),
.n36-body:has(.n36-board),
#n36-root:has(.n36-board) {
height: 100%;
max-height: 100dvh;
min-height: 0;
overflow: hidden;
}
.n36-shell.n36-board {
height: 100dvh;
max-height: 100dvh;
min-height: 0;
padding: max(0.4rem, env(safe-area-inset-top)) max(0.5rem, env(safe-area-inset-right))
max(0.35rem, env(safe-area-inset-bottom)) max(0.5rem, env(safe-area-inset-left));
overflow: hidden;
box-sizing: border-box;
}
.n36-layout,
.n36-board.is-rail-closed .n36-layout {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: minmax(0, 1fr) auto;
grid-template-areas:
"main"
"players";
gap: 0.45rem;
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
width: 100%;
}
.n36-sidebar-players {
grid-area: players;
order: 2;
padding: 0.15rem 0;
min-height: 0;
max-height: none;
height: auto;
overflow: hidden;
border: none;
border-radius: 0;
background: transparent;
}
.n36-sidebar-players .n36-sidebar-title {
display: none;
}
.n36-sidebar-roles-btn {
display: none;
}
.n36-sidebar-players::before,
.n36-sidebar-players::after {
display: none;
}
.n36-main {
grid-area: main;
order: 1;
gap: 0.4rem;
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
.n36-board .n36-sidebar-rail {
position: fixed;
inset: 0;
z-index: 60;
display: none;
grid-template-columns: unset;
width: auto;
max-width: none;
margin: 0;
border-radius: 0;
border: none;
background: rgba(8, 6, 4, 0.55);
padding: max(0.75rem, env(safe-area-inset-top)) 0.75rem max(0.75rem, env(safe-area-inset-bottom));
overflow: auto;
}
.n36-board.is-rail-open .n36-sidebar-rail:not(.is-collapsed) {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-end;
}
.n36-board .n36-sidebar-rail .n36-rail-section {
background: #fff;
border: 1px solid var(--n36-ink);
border-radius: 14px 14px 0 0;
max-height: min(72dvh, 36rem);
overflow: auto;
padding: 0.85rem;
} .n36-board .n36-progress-wrap {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr);
gap: 0.12rem 0.4rem;
align-items: center;
padding: 0.22rem 2.1rem 0.22rem 0.4rem;
border-radius: 8px;
flex-shrink: 0;
}
.n36-board .n36-status-progress {
padding-right: 0.45rem;
border-right: 1px solid var(--n36-line);
}
.n36-board .n36-progress {
gap: 0.2rem;
}
.n36-board .n36-progress-track {
height: 7px;
}
.n36-board .n36-progress-value {
font-size: 1.85rem;
line-height: 1;
}
.n36-board .n36-progress-max {
font-size: 0.72em;
padding-bottom: 0.02em;
font-weight: 800;
color: var(--n36-ink);
}
.n36-board .n36-status-progress .n36-status-label {
margin: 0 0 0.08rem;
font-size: 0.62rem;
letter-spacing: 0.08em;
}
.n36-board .n36-status-side .n36-status-label {
font-size: 0.48rem;
margin-bottom: 0.06rem;
letter-spacing: 0.04em;
opacity: 0.8;
}
.n36-board .n36-status-side {
gap: 0.12rem;
text-align: left;
}
.n36-board .n36-status-block {
padding: 0;
}
.n36-center-treasures,
.n36-effects-row {
justify-content: flex-start;
flex-wrap: wrap;
gap: 0.15rem;
min-height: 0;
}
.n36-board .n36-center-treasures .n36-chip {
width: 1.15rem;
height: 1.15rem;
border-width: 1px;
border-radius: 4px;
}
.n36-board .n36-effect {
padding: 0.08rem 0.22rem;
gap: 0.18rem;
font-size: 0.68rem;
}
.n36-board .n36-effect-name {
font-size: 0.55rem;
}
.n36-board .n36-effect-die {
width: 0.95rem;
height: 0.95rem;
border-width: 1px;
border-radius: 3px;
}
.n36-board .n36-effect-count {
min-width: 0.95rem;
width: 0.95rem;
height: 0.95rem;
padding: 0;
font-size: 0.58rem;
border-width: 1px;
border-radius: 3px;
line-height: 1;
}
.n36-board .n36-status-side .n36-muted {
font-size: 0.65rem;
}
.n36-turn-banner {
display: block;
margin: 0;
padding: 0.35rem 0.65rem;
border-radius: 6px;
font-size: 0.82rem;
font-weight: 700;
text-align: center;
flex-shrink: 0;
}
.n36-turn-banner.is-mine {
color: #fff;
background: var(--n36-accent);
}
.n36-turn-banner.is-wait {
color: var(--n36-ink-dim);
background: var(--n36-bg2);
border: 1px solid var(--n36-line);
min-width: 0;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} .n36-board .n36-action-panel {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
border-radius: 10px;
background-size: min(70%, 280px);
}
.n36-board .n36-action-panel > .n36-panel-split,
.n36-board .n36-action-panel > .n36-panel-playarea {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
.n36-panel-split {
grid-template-columns: 1fr;
grid-template-rows: auto minmax(0, 1fr);
overflow: hidden;
}
.n36-panel-hero {
flex-direction: row;
align-items: center;
gap: 0.55rem;
border-right: none;
border-bottom: 1px solid rgba(138, 36, 36, 0.22);
padding: 0.45rem 0.75rem;
flex: 0 0 auto; container-type: normal;
overflow: hidden;
min-height: 0;
height: auto;
}
.n36-panel-hero-meta {
padding: 0;
flex: 1 1 auto;
gap: 0.18rem;
min-width: 0;
align-self: center;
}
.n36-panel-hero-name {
font-size: 1.05rem;
line-height: 1.15;
}
.n36-panel-hero-role {
font-size: 0.68rem;
letter-spacing: 0.06em;
}
.n36-panel-hero-visual {
width: 3rem !important;
min-width: 3rem;
max-width: 3rem;
height: 3rem !important;
max-height: 3rem !important;
aspect-ratio: 1 / 1;
margin: 0;
order: -1;
flex: 0 0 3rem !important;
align-self: center;
border-radius: 7px;
overflow: hidden;
position: relative;
}
.n36-panel-hero-art {
border-radius: 7px !important;
border: none !important;
border-top: none !important;
} .n36-panel-skill-btn,
.n36-panel-skill-overlay {
display: none !important;
}
.n36-panel-hero.is-skill-open .n36-panel-hero-visual {
width: 3rem !important;
max-width: 3rem !important;
height: 3rem !important;
min-height: 0;
order: -1;
aspect-ratio: 1 / 1;
} .n36-panel-hero .n36-turn-progress {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: nowrap;
width: 100%;
margin-top: 0.2rem;
gap: 0;
}
.n36-panel-hero .n36-turn-step {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.22rem;
padding-right: 0.65rem;
min-width: 0;
}
.n36-panel-hero .n36-turn-step:not(:last-child)::after {
display: block;
content: '>';
width: auto;
height: auto;
background: none;
right: 0.08rem;
color: var(--n36-ink-dim);
font-size: 0.58rem;
font-weight: 600;
line-height: 1;
}
.n36-panel-hero .n36-turn-step:last-child {
padding-right: 0;
}
.n36-panel-hero .n36-turn-step-dot {
width: 0.42rem;
height: 0.42rem;
}
.n36-panel-hero .n36-turn-step-label {
font-size: 0.58rem;
letter-spacing: 0.03em;
line-height: 1.1;
}
.n36-extra-turn-badge {
font-size: 0.62rem;
padding: 0.18rem 0.4rem;
margin: 0.2rem 0 0;
}
.n36-panel-playarea {
justify-content: flex-start;
align-items: stretch;
gap: 0;
padding: 0;
overflow: hidden;
min-height: 0;
display: flex;
flex-direction: column;
}
.n36-panel-play-scroll {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
gap: 0.4rem;
flex: 1 1 auto;
min-height: 0;
min-width: 0;
max-width: 100%;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 0.65rem 0.6rem 0.35rem;
box-sizing: border-box;
}
.n36-panel-play-dock {
display: block;
flex: 0 0 auto;
min-width: 0;
max-width: 100%;
overflow-x: hidden;
box-sizing: border-box;
padding: 0.4rem 0.6rem max(0.5rem, env(safe-area-inset-bottom));
border-top: 1px solid var(--n36-line);
background: rgba(255, 255, 255, 0.94);
}
.n36-panel-play-dock:empty {
display: none;
}
.n36-panel-playarea > .n36-dice-board,
.n36-panel-playarea > .n36-skill-card,
.n36-panel-playarea > .n36-actions,
.n36-panel-play-scroll > .n36-dice-board,
.n36-panel-play-scroll > .n36-skill-card,
.n36-panel-play-scroll > .n36-skill-launch,
.n36-panel-play-scroll > .n36-ambush-stage,
.n36-panel-play-scroll > .n36-backlash-stage,
.n36-panel-play-scroll > .n36-consequence,
.n36-panel-play-scroll > .n36-riposte-result,
.n36-panel-play-dock > .n36-actions {
width: 100%;
max-width: 100%;
min-width: 0;
margin: 0;
flex: 0 0 auto;
box-sizing: border-box;
}
.n36-board .n36-dice-board .n36-final {
display: none;
}
.n36-extra-turn-dice-note,
.n36-curse-dice-note {
font-size: 0.72rem;
margin: 0.2rem 0 0;
} .n36-panel-play-scroll:has(.n36-dice-board.is-awaiting-roll) {
overflow: hidden;
container-type: size;
container-name: n36-await-roll;
justify-content: center;
padding: 0.45rem 0.55rem;
} .n36-panel-play-scroll:has(.n36-dice-board.is-awaiting-roll) > .n36-skill-card,
.n36-panel-play-scroll:has(.n36-dice-board.is-awaiting-roll) > .n36-skill-launch,
.n36-panel-play-scroll:has(.n36-dice-board.is-awaiting-roll) > .n36-consequence:empty {
display: none;
}
.n36-panel-play-scroll:has(.n36-dice-board.is-awaiting-roll) > .n36-dice-board.is-awaiting-roll {
flex: 1 1 auto;
min-height: 0;
width: 100%;
height: 100%;
max-height: 100%;
overflow: hidden;
display: grid;
place-items: center;
padding: 0;
gap: 0;
}
.n36-role-showcase {
display: block; width: min(100%, calc(100dvh - 16rem));
max-width: 100%;
max-height: 100%;
aspect-ratio: 1 / 1;
height: auto;
margin: 0;
padding: 0;
box-sizing: border-box;
pointer-events: none;
}
@supports (width: 1cqb) {
.n36-role-showcase {
width: min(100cqi, 100cqb);
}
}
.n36-role-showcase-art {
display: block;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
aspect-ratio: auto;
border-radius: 6px;
border: none;
background-color: #fff;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
box-shadow: none;
}
.n36-role-showcase[data-role='barbare'] .n36-role-showcase-art {
background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/roles/barbare.jpg);
}
.n36-role-showcase[data-role='mage'] .n36-role-showcase-art {
background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/roles/mage.jpg);
}
.n36-role-showcase[data-role='pretresse'] .n36-role-showcase-art {
background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/roles/pretresse.jpg);
}
.n36-role-showcase[data-role='paladin'] .n36-role-showcase-art {
background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/roles/paladin.jpg);
}
.n36-role-showcase[data-role='voleuse'] .n36-role-showcase-art {
background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/roles/voleuse.jpg);
}
.n36-role-showcase[data-role='barde'] .n36-role-showcase-art {
background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/roles/barde.jpg);
}
.n36-skill-launch {
display: block;
width: 100%;
}
.n36-skill-drawer-close {
display: inline-flex;
align-items: center;
justify-content: center;
}
.n36-skill-launch-btn {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.1rem;
text-align: left;
padding: 0.55rem 0.75rem;
min-height: 44px;
}
.n36-skill-launch-kicker {
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--n36-accent);
}
.n36-skill-launch-name {
font-size: 0.88rem;
font-weight: 700;
color: var(--n36-ink);
}
.n36-skill-card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.5rem;
}
.n36-skill-card-head .n36-skill-kicker {
margin: 0;
}
.n36-skill-drawer-close {
appearance: none;
border: 1px solid var(--n36-line-strong);
background: #fff;
width: 1.85rem;
height: 1.85rem;
border-radius: 6px;
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
flex-shrink: 0;
}
.n36-skill-card.is-drawer {
padding: 0.65rem 0.75rem;
}
.n36-rest-launch {
width: 100%;
}
.n36-consequence {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.25rem;
margin: 0;
}
.n36-consequence-hint {
display: block;
text-align: center;
margin: 0.15rem 0 0.1rem;
}
.n36-consequence-prompt {
margin: 0;
font-size: 0.88rem;
font-weight: 600;
color: var(--n36-ink-dim);
line-height: 1.3;
}
.n36-consequence-item {
display: inline-block;
padding: 0.25rem 0.45rem;
border-radius: 6px;
background: rgba(20, 17, 15, 0.05);
border: 1px solid var(--n36-line);
font-size: 0.8rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.n36-consequence-item.is-bad {
color: var(--n36-bad);
background: rgba(166, 30, 30, 0.08);
border-color: rgba(166, 30, 30, 0.35);
}
.n36-consequence-item.is-win {
color: var(--n36-good);
background: rgba(47, 107, 58, 0.1);
border-color: rgba(47, 107, 58, 0.35);
}
.n36-die-pick-hint {
display: block;
font-size: 0.72rem;
font-weight: 700;
margin-top: 0.2rem;
color: var(--n36-ink-dim);
}
.n36-die-pick-btn.is-blocked .n36-die-pick-hint {
color: var(--n36-bad);
}
.n36-rule-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
appearance: none;
border: 1px solid var(--n36-line-strong);
background: transparent;
color: var(--n36-accent);
font: inherit;
font-size: 0.78rem;
font-weight: 700;
padding: 0.35rem 0.55rem;
border-radius: 6px;
cursor: pointer;
min-height: 36px;
margin: 0.25rem 0;
}
.n36-rule-fold:not(.is-open) .n36-rule-body {
display: none;
}
.n36-rule-fold.is-open .n36-rule-body {
display: block;
}
.n36-board .n36-btn,
.n36-board .n36-btn-option,
.n36-board .n36-btn-primary,
.n36-board .n36-btn-main {
min-height: 38px;
padding: 0.45rem 0.85rem;
font-size: 0.88rem;
}
.n36-board .n36-bard-use-btn,
.n36-board .n36-treasure-offer-btn {
min-height: auto;
padding: 0.26rem 0.42rem;
font-size: 0.72rem;
line-height: 1.18;
}
.n36-board .n36-treasure-offer-btn {
gap: 0.3rem;
}
.n36-board .n36-treasure-offer-btn .n36-chip-treasure-offer {
width: 1.15rem;
height: 1.15rem;
}
.n36-board .n36-btn-main {
padding: 0.5rem 1rem;
font-size: 0.92rem;
}
.n36-board .n36-btn-primary {
margin-top: 0.35rem;
}
.n36-board .n36-action-panel .n36-btn-primary,
.n36-board .n36-action-panel .n36-btn-main {
width: 100%;
min-width: 0;
}
.n36-panel-play-dock .n36-btn-primary,
.n36-panel-play-dock .n36-btn-main {
margin-top: 0;
}
.n36-turn-start .n36-btn-primary {
width: 100%;
min-width: 0;
}
.n36-trap-warning {
max-width: 100%;
padding: 0.45rem 0.55rem 0.5rem;
}
.n36-trap-warning-text {
font-size: 0.78rem;
}
.n36-choice,
.n36-riposte-result,
.n36-monster-actions {
max-width: 100%;
min-width: 0;
width: 100%;
box-sizing: border-box;
overflow-x: hidden;
}
.n36-keep-choice,
.n36-keep-choice .n36-die-pick-opts {
overflow: visible;
}
.n36-panel-play-dock:has(.n36-keep-choice) {
overflow-x: visible;
}
.n36-rest-alt,
.n36-rest-card,
.n36-skill-card,
.n36-ambush-stage,
.n36-backlash-stage,
.n36-options,
.n36-treasure-phase,
.n36-dice-board {
max-width: 100%;
min-width: 0;
width: 100%;
box-sizing: border-box;
overflow-x: hidden;
}
.n36-dice-board:not(.is-awaiting-roll) {
overflow: visible;
}
.n36-ambush-stage,
.n36-backlash-stage {
padding: 0.75rem 0.65rem 0.85rem;
margin-left: 0;
margin-right: 0;
gap: 0.55rem;
}
.n36-ambush-ghosts {
gap: 0.65rem;
max-width: 100%;
flex-wrap: wrap;
justify-content: center;
}
.n36-die-ghost {
width: 52px;
height: 52px;
}
.n36-ambush-rule,
.n36-backlash-stage-rule {
max-width: 100%;
max-height: none;
overflow: visible;
}
.n36-dice-row {
flex-wrap: wrap;
justify-content: center;
gap: 0.55rem;
max-width: 100%;
}
.n36-die-slot {
min-width: 0;
max-width: 100%;
}
.n36-die-tag {
max-width: 100%;
text-align: center;
overflow-wrap: anywhere;
white-space: normal;
}
.n36-sum-eq {
width: 100%;
max-width: 100%;
padding: 0.5rem 0.45rem;
gap: 0.35rem 0.45rem;
box-sizing: border-box;
}
.n36-sum-term,
.n36-sum-total {
min-width: 0;
}
.n36-sum-op {
margin-bottom: 0.85rem;
font-size: 1.35rem;
}
.n36-skill-card.is-cursed {
overflow: visible;
padding-top: 1.15rem;
margin-top: 0.5rem;
}
.n36-skill-curse-badge {
right: 0.5rem;
}
.n36-panel-play-scroll:has(.n36-skill-card.is-cursed) {
padding-top: 0.85rem;
}
.n36-skill-target-label {
overflow-wrap: anywhere;
}
.n36-options,
.n36-treasure-phase,
.n36-monster-actions {
gap: 0.55rem;
}
.n36-treasure-use-title {
font-size: 0.68rem;
letter-spacing: 0.05em;
}
.n36-bard-use-btn,
.n36-treasure-offer-btn {
min-height: auto;
padding: 0.26rem 0.42rem !important;
font-size: 0.72rem;
line-height: 1.18;
}
.n36-treasure-offer-btn {
gap: 0.3rem;
}
.n36-treasure-offer-btn .n36-chip-treasure-offer {
width: 1.15rem;
height: 1.15rem;
}
.n36-treasure-use-section,
.n36-treasure-use-list {
gap: 0.28rem;
}
.n36-treasure-use-btn {
gap: 0.4rem;
padding: 0.32rem 0.42rem !important;
align-items: center;
}
.n36-treasure-use-btn .n36-chip-treasure-use {
width: 1.45rem;
height: 1.45rem;
border-width: 1.5px;
}
.n36-treasure-use-btn .n36-chip-treasure-use .n36-face-pips {
width: 68%;
height: 68%;
}
.n36-treasure-use-copy small {
font-size: 0.72rem;
line-height: 1.28;
}
.n36-die-pick-opts {
width: 100%;
max-width: 100%;
flex-wrap: nowrap;
gap: 0.35rem;
box-sizing: border-box;
}
.n36-keep-choice .n36-die-pick-opts {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
gap: 0.35rem;
margin-left: 0;
margin-right: 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.n36-keep-choice .n36-die-pick-opts .n36-die-pick-btn {
flex: 1 1 0;
width: 0;
min-width: 0;
max-width: none;
margin: 0;
}
.n36-bard-card .n36-die-pick-opts .n36-die-pick-btn,
.n36-die-pick-opts .n36-die-pick-btn {
flex: 1 1 0;
width: 100%;
min-width: 0;
max-width: none;
}
.n36-keep-choice .n36-die-pick-btn {
width: 100%;
min-height: 44px;
box-sizing: border-box;
} .n36-panel-play-scroll:has(.n36-dice-board:not(.is-awaiting-roll)) {
justify-content: flex-start;
}
.n36-panel-play-scroll:has(.n36-dice-board:not(.is-awaiting-roll))::before,
.n36-panel-play-scroll:has(.n36-dice-board:not(.is-awaiting-roll))::after {
content: "";
display: block;
flex: 1 1 0;
min-height: 0;
width: 100%;
pointer-events: none;
}
.n36-panel-play-scroll:has(.n36-dice-board:not(.is-awaiting-roll)) .n36-dice-board {
overflow: visible;
flex-shrink: 0;
}
.n36-panel-play-scroll:has(.n36-dice-board:not(.is-awaiting-roll)) .n36-dice-row {
overflow: visible;
padding: 0.4rem 0 0.35rem;
}
.n36-panel-play-scroll:has(.n36-dice-board:not(.is-awaiting-roll)) .n36-die-slot,
.n36-panel-play-scroll:has(.n36-dice-board:not(.is-awaiting-roll)) .n36-d6,
.n36-panel-play-scroll:has(.n36-dice-board:not(.is-awaiting-roll)) .n36-d6-scene {
overflow: visible;
}
.n36-consequence-item {
max-width: 100%;
overflow-wrap: anywhere;
white-space: normal;
}
.n36-riposte-result {
max-width: 100%;
padding: 0.65rem 0.55rem 0.75rem;
}
.n36-skill-card {
padding: 0.55rem 0.7rem 0.65rem;
}
.n36-skill-card .n36-skill-name {
margin: 0 0 0.4rem;
font-size: 1.02rem;
}
.n36-skill-card .n36-btn-skill-use {
width: 100%;
margin: 0.15rem 0 0.35rem;
padding: 0.5rem 0.85rem;
font-size: 0.9rem;
}
.n36-skill-card .n36-rule-fold {
margin-top: 0.1rem;
}
.n36-skill-card .n36-rule-toggle {
width: 100%;
margin: 0.15rem 0 0;
}
.n36-ambush-stage .n36-dice-board,
.n36-backlash-stage .n36-dice-board {
width: 100%;
max-width: 100%;
min-width: 0;
}
.n36-ambush-rule {
font-size: 0.82rem;
}
.n36-board.is-waiting .n36-skill-card:not(.is-used):not(.is-cursed),
.n36-board.is-waiting .n36-rest-alt {
opacity: 0.55;
}
.n36-board.is-waiting .n36-wait {
font-size: 1.05rem;
padding: 0.35rem 0.5rem;
} .n36-board .n36-seats {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 0.15rem;
margin: 0;
padding: 0;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
justify-content: flex-start;
flex: 0 0 auto;
}
.n36-board .n36-seat {
display: block;
flex: 0 0 auto;
width: auto;
min-width: 3.1rem;
max-width: min(5.2rem, 22vw);
padding: 0.08rem 0.12rem;
border: none;
border-left-width: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.n36-board .n36-seat.is-active,
.n36-board .n36-seat.is-deciding {
border: none;
border-left-width: 0;
background: transparent;
box-shadow: none;
}
.n36-board .n36-seat.is-active .n36-seat-art,
.n36-board .n36-seat.is-deciding .n36-seat-art {
box-shadow: 0 0 0 1.5px var(--n36-accent);
}
.n36-board .n36-seat.is-deciding .n36-seat-art {
box-shadow: 0 0 0 1.5px var(--n36-accent-2);
}
.n36-seat-open {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.12rem;
width: 100%;
padding: 0;
border: 0;
background: transparent;
}
.n36-board .n36-seat .n36-seat-art {
width: 1.75rem;
height: 1.75rem;
border-radius: 5px;
position: relative;
overflow: hidden;
} .n36-board .n36-seat .n36-tag-out {
display: none;
}
.n36-board .n36-seat.is-out .n36-seat-art {
opacity: 0.65;
filter: grayscale(0.75) brightness(0.9);
}
.n36-board .n36-seat.is-out .n36-seat-art::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 140%;
height: 2px;
background: var(--n36-accent);
transform: translate(-50%, -50%) rotate(-42deg);
pointer-events: none;
z-index: 2;
box-shadow: 0 0 0 0.5px rgba(255, 248, 238, 0.55);
}
.n36-board .n36-seat.is-out .n36-seat-name {
text-decoration: line-through;
opacity: 0.7;
}
.n36-board .n36-seat .n36-seat-body {
width: 100%;
align-items: center;
gap: 0;
}
.n36-board .n36-seat .n36-seat-head {
position: relative;
justify-content: center;
width: 100%;
gap: 0.1rem;
order: 1;
}
.n36-board .n36-seat .n36-seat-name {
font-size: 0.58rem;
text-align: center;
max-width: 100%;
line-height: 1.1;
}
.n36-board .n36-seat .n36-seat-meta-row,
.n36-board .n36-seat .n36-seat-stats,
.n36-board .n36-seat .n36-seat-px,
.n36-board .n36-seat .n36-seat-empty {
display: none;
}
.n36-board .n36-seat .n36-seat-role {
display: none;
}
.n36-board .n36-seat .n36-tag {
position: absolute;
top: -0.15rem;
right: -0.2rem;
font-size: 0.4rem;
padding: 0.04rem 0.14rem;
line-height: 1.1;
z-index: 1;
} .n36-board .n36-seat .n36-tag:not(.n36-tag-decide) {
display: none;
}
.n36-board .n36-seat .n36-seat-treasures {
justify-content: center;
min-height: 0;
margin-top: 0.22rem;
gap: 0.22rem;
order: 2;
}
.n36-board .n36-seat .n36-chip-sm {
width: 0.95rem;
height: 0.95rem;
transform: none;
border-width: 1px;
border-radius: 3px;
}
.n36-board .n36-seat.is-self .n36-seat-art {
box-shadow: 0 0 0 1.5px rgba(138, 36, 36, 0.45);
}
.n36-board .n36-seat.is-self.is-active .n36-seat-art {
box-shadow: 0 0 0 1.5px var(--n36-accent);
} .n36-board .n36-seat .n36-seat-stat.is-rest-ready {
display: none;
}
.n36-board .n36-seat .n36-seat-stat.is-rest-ready::after {
content: none;
display: none;
}
.n36-board .n36-seat .n36-seat-stat.is-rest-used .n36-seat-stat-label {
position: static;
display: inline-block;
width: auto;
height: auto;
margin: 0.06rem auto 0;
padding: 0;
overflow: visible;
clip: auto;
white-space: nowrap;
border: 0;
font-size: 0.48rem;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.15;
text-transform: none;
text-align: center;
color: var(--n36-ink-dim);
text-decoration: line-through;
opacity: 0.75;
}
.n36-board .n36-seat .n36-seat-stat.is-rest-used::after {
content: none;
display: none;
}
.n36-board .n36-seat .n36-seat-stats {
display: block;
order: 3;
margin-top: 0;
}
.n36-board .n36-seat .n36-seat-stats:has(.is-rest-ready):not(:has(.is-rest-used)) {
display: none;
}
.n36-board .n36-seat .n36-seat-stat {
background: transparent;
border: 0;
padding: 0;
}
.n36-board .n36-seat .n36-seat-stat-label,
.n36-board .n36-seat .n36-seat-stat strong {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
} #n36-elim-fx.is-mobile-elim {
z-index: 2147482900;
pointer-events: auto;
display: flex;
align-items: center;
justify-content: center;
padding: max(1rem, env(safe-area-inset-top)) 1.15rem max(1.25rem, env(safe-area-inset-bottom));
box-sizing: border-box;
background: rgba(10, 5, 4, 0.94);
}
#n36-elim-fx.is-mobile-elim:not(:empty) {
background: rgba(10, 5, 4, 0.94);
}
#n36-elim-fx.is-mobile-elim .n36-elim-toast.is-mobile {
width: 100%;
min-width: 0;
max-width: 22rem;
padding: 1.55rem 1.25rem 1.35rem;
border-radius: 18px;
}
.n36-win-toast .n36-win-title {
font-size: clamp(1.75rem, 9vw, 2.1rem);
}
.n36-win-toast .n36-win-name {
font-size: clamp(1rem, 4.5vw, 1.15rem);
}
#n36-elim-fx.is-mobile-elim .n36-elim-title {
font-size: clamp(1.85rem, 9vw, 2.35rem);
}
#n36-elim-fx.is-mobile-elim .n36-elim-name {
font-size: 1.22rem;
}
#n36-elim-fx.is-mobile-elim .n36-elim-toast.is-traquenard .n36-elim-dice {
margin: 0.35rem 0 0.85rem;
}
#n36-elim-fx.is-mobile-elim .n36-elim-sub {
font-size: 0.92rem;
line-height: 1.4;
}
#n36-elim-fx.is-mobile-elim .n36-elim-math {
font-size: 0.86rem;
} #n36-focus-fx.is-handoff {
position: fixed;
inset: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100vw;
width: 100dvw;
height: 100vh;
height: 100dvh;
min-width: 100vw;
min-width: 100dvw;
min-height: 100vh;
min-height: 100dvh;
margin: 0;
padding: 0;
pointer-events: auto;
z-index: 2147483000;
background: var(--n36-bg0);
overflow: hidden;
}
#n36-focus-fx.is-handoff .n36-handoff-panel {
position: absolute;
inset: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0;
width: 100%;
height: 100%;
min-height: 100%;
margin: 0;
background: var(--n36-bg0);
border: none;
border-radius: 0;
box-shadow: none;
padding: max(1.5rem, env(safe-area-inset-top)) 1.5rem
max(1.75rem, env(safe-area-inset-bottom));
text-align: center;
box-sizing: border-box;
will-change: transform, opacity;
}
#n36-focus-fx.is-handoff .n36-handoff-panel.is-in {
animation: n36-handoff-slide-in 0.55s cubic-bezier(0.33, 0.12, 0.25, 1) forwards;
}
#n36-focus-fx.is-handoff .n36-handoff-panel.is-out {
animation: n36-handoff-slide-out 0.45s cubic-bezier(0.33, 0.12, 0.25, 1) forwards;
}
@keyframes n36-handoff-slide-in {
0% {
transform: translateX(-115vw);
opacity: 0.85;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
@keyframes n36-handoff-slide-out {
0% {
transform: translateX(0);
opacity: 1;
}
100% {
transform: translateX(115vw);
opacity: 0.85;
}
}
@media (prefers-reduced-motion: reduce) {
#n36-focus-fx.is-handoff .n36-handoff-panel.is-in,
#n36-focus-fx.is-handoff .n36-handoff-panel.is-out {
animation-duration: 0.2s;
}
}
.n36-handoff-kicker {
margin: 0 0 1rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--n36-ink-dim);
}
.n36-handoff-art {
width: 100%;
max-width: min(100%, 22rem);
height: auto;
aspect-ratio: 1 / 1;
margin: 0 auto 1.1rem;
border-radius: 0;
border: none;
background-color: #fff;
background-size: cover;
background-position: center;
flex-shrink: 1;
}
.n36-handoff-art[data-role='barbare'] { background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/roles/barbare.jpg); }
.n36-handoff-art[data-role='mage'] { background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/roles/mage.jpg); }
.n36-handoff-art[data-role='pretresse'] { background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/roles/pretresse.jpg); }
.n36-handoff-art[data-role='paladin'] { background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/roles/paladin.jpg); }
.n36-handoff-art[data-role='voleuse'] { background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/roles/voleuse.jpg); }
.n36-handoff-art[data-role='barde'] { background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/roles/barde.jpg); }
.n36-handoff-who {
margin: 0 0 0.3rem;
font-size: clamp(1.45rem, 6vw, 1.85rem);
font-family: var(--n36-font-display);
font-weight: 700;
line-height: 1.2;
color: var(--n36-ink);
max-width: min(100%, 22rem);
overflow-wrap: anywhere;
word-break: break-word;
}
.n36-handoff-who strong {
display: inline;
}
.n36-handoff-role {
margin: 0 0 0.75rem;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--n36-accent);
}
.n36-handoff-hint {
margin: 0 0 1.35rem;
color: var(--n36-ink-dim);
font-size: 0.95rem;
max-width: 18rem;
}
#n36-focus-fx.is-handoff .n36-btn-primary {
width: min(100%, 18rem);
margin-top: 0;
white-space: normal;
line-height: 1.25;
}
#n36-focus-fx.is-handoff .n36-handoff-panel.is-auto .n36-handoff-role {
margin-bottom: 0;
} .n36-handoff {
display: none;
} .n36-seat-sheet {
display: block;
position: fixed;
inset: 0;
z-index: 75;
}
.n36-seat-sheet-backdrop {
position: absolute;
inset: 0;
border: 0;
background: rgba(8, 6, 4, 0.55);
cursor: pointer;
}
.n36-seat-sheet-card {
position: absolute;
left: 0;
right: 0;
bottom: 0;
max-height: min(78dvh, 34rem);
overflow: auto;
background: #fff;
border: 1px solid var(--n36-ink);
border-bottom: none;
border-radius: 16px 16px 0 0;
padding: 0.55rem 1rem max(1.1rem, env(safe-area-inset-bottom));
box-sizing: border-box;
}
.n36-seat-sheet-handle {
width: 2.5rem;
height: 0.28rem;
border-radius: 99px;
background: rgba(20, 17, 15, 0.2);
margin: 0.15rem auto 0.75rem;
}
.n36-seat-sheet-head {
display: grid;
grid-template-columns: 3.4rem minmax(0, 1fr) auto;
gap: 0.75rem;
align-items: start;
}
.n36-seat-sheet-art {
width: 3.4rem;
height: 3.4rem;
border-radius: 10px;
border: 1px solid var(--n36-ink);
background-size: cover;
background-position: center;
}
.n36-seat-sheet-art[data-role='barbare'] { background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/roles/barbare.jpg); }
.n36-seat-sheet-art[data-role='mage'] { background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/roles/mage.jpg); }
.n36-seat-sheet-art[data-role='pretresse'] { background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/roles/pretresse.jpg); }
.n36-seat-sheet-art[data-role='paladin'] { background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/roles/paladin.jpg); }
.n36-seat-sheet-art[data-role='voleuse'] { background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/roles/voleuse.jpg); }
.n36-seat-sheet-art[data-role='barde'] { background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/roles/barde.jpg); }
.n36-seat-sheet-name {
margin: 0;
font-size: 1.1rem;
font-weight: 700;
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
}
.n36-seat-sheet-name em {
font-style: normal;
color: var(--n36-accent);
font-size: 0.85em;
}
.n36-seat-sheet-role {
margin: 0.15rem 0 0;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--n36-accent);
}
.n36-seat-sheet-px {
margin: 0.25rem 0 0;
font-size: 0.78rem;
color: var(--n36-ink-dim);
}
.n36-seat-sheet-close {
appearance: none;
border: 1px solid var(--n36-line-strong);
background: #fff;
width: 2.2rem;
height: 2.2rem;
border-radius: 8px;
font-size: 1.25rem;
line-height: 1;
cursor: pointer;
}
.n36-seat-sheet-skill-name {
margin: 0.85rem 0 0.25rem;
font-weight: 700;
color: var(--n36-accent);
}
.n36-seat-sheet-skill-text {
margin: 0 0 0.85rem;
font-size: 0.9rem;
color: var(--n36-ink-dim);
line-height: 1.4;
}
.n36-dice-row {
gap: 0.75rem;
}
.n36-die-slot {
gap: 0.28rem;
}
.n36-die-tag,
.n36-sum-label {
font-size: 0.55rem;
letter-spacing: 0.04em;
}
.n36-d6-lg .n36-d6-scene {
width: 52px;
height: 52px;
}
.n36-d6-md .n36-d6-scene {
width: 42px;
height: 42px;
} .n36-skill-target .n36-d6-md,
.n36-skill-target .n36-d6-md .n36-d6-scene,
.n36-skill-target .n36-chip {
width: 40px;
height: 40px;
}
.n36-skill-target .n36-d6-md .n36-d6-face-1 { transform: rotateY(0deg) translateZ(20px); }
.n36-skill-target .n36-d6-md .n36-d6-face-2 { transform: rotateY(90deg) translateZ(20px); }
.n36-skill-target .n36-d6-md .n36-d6-face-3 { transform: rotateX(90deg) translateZ(20px); }
.n36-skill-target .n36-d6-md .n36-d6-face-4 { transform: rotateX(-90deg) translateZ(20px); }
.n36-skill-target .n36-d6-md .n36-d6-face-5 { transform: rotateY(-90deg) translateZ(20px); }
.n36-skill-target .n36-d6-md .n36-d6-face-6 { transform: rotateY(180deg) translateZ(20px); }
.n36-d6-lg .n36-d6-face,
.n36-d6-md .n36-d6-face {
border-width: 1.5px;
border-radius: 8px;
}
.n36-d6-lg .n36-d6-face-1 { transform: rotateY(0deg) translateZ(26px); }
.n36-d6-lg .n36-d6-face-2 { transform: rotateY(90deg) translateZ(26px); }
.n36-d6-lg .n36-d6-face-3 { transform: rotateX(90deg) translateZ(26px); }
.n36-d6-lg .n36-d6-face-4 { transform: rotateX(-90deg) translateZ(26px); }
.n36-d6-lg .n36-d6-face-5 { transform: rotateY(-90deg) translateZ(26px); }
.n36-d6-lg .n36-d6-face-6 { transform: rotateY(180deg) translateZ(26px); }
.n36-d6-md .n36-d6-face-1 { transform: rotateY(0deg) translateZ(21px); }
.n36-d6-md .n36-d6-face-2 { transform: rotateY(90deg) translateZ(21px); }
.n36-d6-md .n36-d6-face-3 { transform: rotateX(90deg) translateZ(21px); }
.n36-d6-md .n36-d6-face-4 { transform: rotateX(-90deg) translateZ(21px); }
.n36-d6-md .n36-d6-face-5 { transform: rotateY(-90deg) translateZ(21px); }
.n36-d6-md .n36-d6-face-6 { transform: rotateY(180deg) translateZ(21px); }
.n36-win-card,
.n36-modal-card {
max-width: none;
margin: 0;
} .n36-board .n36-action-panel > .n36-panel-playarea:has(.n36-win-card),
.n36-board .n36-action-panel > .n36-panel-playarea:has(.n36-session-end-card),
.n36-board .n36-action-panel > .n36-panel-playarea:has(.n36-modal-card) {
overflow: hidden;
padding: 0;
align-items: stretch;
}
.n36-win-card,
.n36-session-end-card,
.n36-board .n36-modal-card {
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding: 0.35rem 0 0.25rem;
overflow: visible;
}
.n36-panel-playarea:has(.n36-win-card) .n36-panel-play-scroll,
.n36-panel-playarea:has(.n36-session-end-card) .n36-panel-play-scroll,
.n36-panel-playarea:has(.n36-modal-card) .n36-panel-play-scroll {
justify-content: flex-start; padding-top: 1rem;
overflow-x: hidden;
}
.n36-panel-playarea:has(.n36-win-card) .n36-panel-play-dock .n36-actions,
.n36-panel-playarea:has(.n36-modal-card) .n36-panel-play-dock .n36-actions {
display: flex;
flex-direction: column;
gap: 0.35rem;
width: 100%;
}
.n36-panel-playarea:has(.n36-win-card) .n36-panel-play-dock .n36-btn,
.n36-panel-playarea:has(.n36-win-card) .n36-panel-play-dock .n36-btn-primary,
.n36-panel-playarea:has(.n36-modal-card) .n36-panel-play-dock .n36-btn,
.n36-panel-playarea:has(.n36-modal-card) .n36-panel-play-dock .n36-btn-primary {
width: 100%;
margin: 0;
min-width: 0;
}
.n36-win-hero {
width: 3.6rem;
height: 3.6rem;
margin: 0.15rem auto 0.5rem;
flex-shrink: 0;
}
.n36-win-hero-ring {
box-shadow:
0 0 0 4px rgba(138, 36, 36, 0.08),
0 0 14px rgba(138, 36, 36, 0.28);
}
.n36-win-card.is-celebrating .n36-win-hero-ring {
animation: none;
}
.n36-win-hero-score {
font-size: 1.3rem;
}
.n36-win-hero-score small {
font-size: 0.62rem;
}
.n36-win-card-kicker {
font-size: 0.65rem;
}
.n36-win-card-title {
font-size: 1.4rem !important;
}
.n36-win-card-name,
.n36-champion {
font-size: 1.05rem;
margin: 0 0 0.55rem;
}
.n36-champion {
font-size: 1.25rem;
}
.n36-awards,
.n36-awards-final {
width: 100%;
max-width: 100%;
margin: 0 0 0.7rem;
box-sizing: border-box;
}
.n36-awards-label {
margin: 0 0 0.35rem;
font-size: 0.62rem;
}
.n36-awards-list {
width: 100%;
box-sizing: border-box;
padding: 0.2rem;
gap: 0.22rem;
border-radius: 8px;
background: rgba(20, 17, 15, 0.04);
border: 1px solid var(--n36-line);
box-shadow: none;
}
.n36-awards-list li {
grid-template-columns: minmax(0, 1fr) auto auto;
gap: 0.3rem 0.35rem;
padding: 0.38rem 0.45rem;
min-width: 0;
box-sizing: border-box;
}
.n36-awards-final .n36-awards-list li {
grid-template-columns: 1.25rem minmax(0, 1fr) auto;
}
.n36-awards-name {
font-size: 0.88rem;
}
.n36-awards-name em {
font-size: 0.58rem;
}
.n36-awards-gain {
min-width: 2.1rem;
padding: 0.12rem 0.3rem;
font-size: 0.82rem;
}
.n36-awards-total {
min-width: 0;
font-size: 0.88rem;
}
.n36-awards-final .n36-awards-total {
min-width: 0;
}
.n36-awards-total small {
font-size: 0.55rem;
}
}
@media (max-width: 960px) and (orientation: landscape) and (max-height: 480px) {
.n36-board .n36-progress-wrap {
padding: 0.25rem 2.2rem 0.25rem 0.45rem;
}
.n36-board .n36-progress-value {
font-size: 1.2rem;
}
.n36-panel-hero {
padding: 0.35rem 0.55rem;
}
.n36-panel-hero-visual {
width: 2.8rem !important;
min-width: 2.8rem;
max-width: 2.8rem;
height: 2.8rem !important;
}
.n36-panel-playarea {
padding: 0.4rem 0.55rem;
gap: 0.4rem;
}
.n36-sidebar-players {
padding: 0.1rem 0;
}
.n36-board .n36-seat {
min-width: 3rem;
max-width: 3.5rem;
padding: 0.1rem 0.12rem;
}
.n36-board .n36-seat .n36-seat-art {
width: 1.75rem;
height: 1.75rem;
}
.n36-d6-lg .n36-d6-scene {
width: 44px;
height: 44px;
}
.n36-d6-lg .n36-d6-face-1 { transform: rotateY(0deg) translateZ(22px); }
.n36-d6-lg .n36-d6-face-2 { transform: rotateY(90deg) translateZ(22px); }
.n36-d6-lg .n36-d6-face-3 { transform: rotateX(90deg) translateZ(22px); }
.n36-d6-lg .n36-d6-face-4 { transform: rotateX(-90deg) translateZ(22px); }
.n36-d6-lg .n36-d6-face-5 { transform: rotateY(-90deg) translateZ(22px); }
.n36-d6-lg .n36-d6-face-6 { transform: rotateY(180deg) translateZ(22px); }
} #n36-tutorial-host {
position: fixed;
inset: 0;
z-index: 12000;
pointer-events: none;
overflow: hidden;
max-width: 100%;
}
#n36-tutorial-host:not([hidden]) {
pointer-events: auto;
}
#n36-tutorial-host[hidden] {
display: none !important;
}
body.n36-tutorial-open {
overflow: hidden;
}
.n36-tutorial-overlay {
position: fixed;
inset: 0;
z-index: 12001;
display: flex;
align-items: center;
justify-content: center;
padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right))
max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
box-sizing: border-box;
width: 100%;
max-width: 100%;
overflow-x: hidden;
overflow-y: auto;
animation: n36-sum-in 0.28s ease-out;
}
.n36-tutorial-backdrop {
position: absolute;
inset: 0;
margin: 0;
padding: 0;
border: 0;
background: rgba(20, 17, 15, 0.55);
cursor: pointer;
appearance: none;
}
.n36-tutorial-card {
position: relative;
z-index: 1;
flex: 0 1 34rem;
width: 100%;
max-width: 100%;
max-height: min(96dvh, 42rem);
overflow-x: hidden;
overflow-y: auto;
padding: 1.1rem 1.15rem 1rem;
border-radius: var(--n36-radius);
border: 1px solid var(--n36-ink);
background-color: #ffffff;
background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/textures/stain.jpg);
background-position: right bottom;
background-repeat: no-repeat;
background-size: min(55%, 280px);
color: var(--n36-ink);
box-sizing: border-box;
box-shadow: 0 18px 40px rgba(20, 17, 15, 0.22);
animation: n36-sum-pop 0.4s cubic-bezier(0.2, 1.2, 0.3, 1);
}
@media (min-width: 961px) {
.n36-tutorial-card {
flex: 0 1 50rem;
max-width: min(52rem, 92vw);
max-height: min(92dvh, 58rem);
padding: 1.55rem 1.7rem 1.25rem;
}
.n36-tutorial-title {
font-size: clamp(1.65rem, 2.4vw, 2.15rem);
}
.n36-tutorial-subtitle {
font-size: 1.02rem;
line-height: 1.45;
}
.n36-tutorial-intro {
font-size: 1.08rem;
line-height: 1.5;
}
.n36-tutorial-caption {
font-size: 1.05rem;
line-height: 1.5;
min-height: 5.5rem;
max-height: 14rem;
}
.n36-tutorial-stage {
height: 11rem;
min-height: 11rem;
max-height: 11rem;
margin-bottom: 0.55rem;
}
.n36-tutorial-stage:has(.is-competence) {
height: 11rem;
min-height: 11rem;
max-height: 11rem;
}
.n36-tutorial-stage:has(.is-repos) {
height: 12.5rem;
min-height: 12.5rem;
max-height: 12.5rem;
}
.n36-tutorial-stage:has(.is-tresor) {
height: 11.25rem;
min-height: 11.25rem;
max-height: 11.25rem;
}
.n36-tutorial-kicker {
font-size: 0.78rem;
}
}
.n36-tutorial-card::before,
.n36-tutorial-card::after {
content: "";
position: absolute;
width: 0.85rem;
height: 0.85rem;
pointer-events: none;
opacity: 0.7;
}
.n36-tutorial-card::before {
top: 0.55rem;
left: 0.55rem;
border-top: 1.5px solid var(--n36-accent);
border-left: 1.5px solid var(--n36-accent);
}
.n36-tutorial-card::after {
right: 0.55rem;
bottom: 0.55rem;
border-right: 1.5px solid var(--n36-accent);
border-bottom: 1.5px solid var(--n36-accent);
}
.n36-tutorial-close {
position: absolute;
top: 0.55rem;
right: 0.55rem;
z-index: 2;
width: 2.25rem;
height: 2.25rem;
margin: 0;
padding: 0;
border: 1px solid var(--n36-line);
border-radius: 6px;
background: #fff;
color: var(--n36-ink);
font-size: 1.35rem;
line-height: 1;
cursor: pointer;
}
.n36-tutorial-close:hover {
border-color: var(--n36-ink);
background: var(--n36-bg2);
}
.n36-tutorial-kicker {
margin: 0 0 0.2rem;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--n36-ink-dim);
}
.n36-tutorial-title {
margin: 0 0 0.35rem;
font-family: var(--n36-font-display);
font-size: clamp(1.2rem, 4vw, 1.6rem);
font-weight: 900;
letter-spacing: 0.02em;
color: var(--n36-ink);
padding-right: 2rem;
}
.n36-tutorial-subtitle {
margin: 0 0 1.15rem;
color: var(--n36-ink-dim);
font-size: 0.88rem;
line-height: 1.35;
}
.n36-tutorial-intro {
margin: 0 0 0.85rem;
text-align: left;
font-size: 0.92rem;
line-height: 1.45;
font-style: italic;
color: var(--n36-ink);
}
.n36-tutorial-idle {
text-align: center;
padding: 0.75rem 0.25rem 0.35rem;
}
.n36-tutorial-idle .n36-btn-primary {
width: auto;
min-width: 10rem;
min-height: 44px;
margin-top: 0.35rem;
}
.n36-tutorial-dots {
display: flex;
justify-content: center;
gap: 0.15rem;
margin: 0.1rem 0 0.3rem;
}
.n36-tutorial-dot {
position: relative;
width: 2.75rem;
height: 2.75rem;
padding: 0;
border: none;
border-radius: 50%;
background: transparent;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.n36-tutorial-dot::after {
content: '';
width: 0.55rem;
height: 0.55rem;
border: 1px solid var(--n36-ink);
border-radius: 50%;
background: transparent;
box-sizing: border-box;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.n36-tutorial-dot.is-active::after {
background: var(--n36-accent);
border-color: var(--n36-accent);
transform: scale(1.1);
}
.n36-tutorial-playhead {
display: grid;
grid-template-rows: auto auto auto minmax(7rem, auto) minmax(0, 1fr) auto;
min-height: 0;
}
.n36-tutorial-stage {
position: relative;
height: 7rem;
min-height: 7rem;
max-height: 7rem;
width: 100%;
max-width: 100%;
display: grid;
place-items: center;
margin: 0 0 0.4rem;
padding: 0.3rem 0.4rem;
border-radius: 10px;
border: 1px dashed var(--n36-line-strong);
background: rgba(243, 241, 239, 0.65);
overflow: hidden;
box-sizing: border-box;
opacity: 1;
transition: opacity 0.15s ease;
}
.n36-tutorial-stage.is-leaving,
.n36-tutorial-stage.is-entering {
opacity: 0;
}
.n36-tutorial-scene {
width: 100%;
max-width: 100%;
min-width: 0;
height: 100%;
max-height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.25rem;
box-sizing: border-box;
}
.n36-tutorial-stage:has(.is-competence) {
height: 7rem;
min-height: 7rem;
max-height: 7rem;
}
.n36-tutorial-stage:has(.is-repos) {
height: 8.25rem;
min-height: 8.25rem;
max-height: 8.25rem;
}
.n36-tutorial-stage:has(.is-tresor) {
height: 7.25rem;
min-height: 7.25rem;
max-height: 7.25rem;
}
.n36-tutorial-progress {
width: min(100%, 14rem);
}
.n36-tutorial-progress .n36-progress {
gap: 0.12rem;
}
.n36-tutorial-progress .n36-status-label {
font-size: 0.6rem;
margin-bottom: 0.1rem;
}
.n36-tutorial-progress .n36-progress-track {
height: 8px;
}
.n36-tutorial-progress .n36-progress-value {
font-size: 1.2rem;
line-height: 1;
gap: 0.1em;
}
.n36-tutorial-progress .n36-progress-max {
font-size: 0.5em;
padding-bottom: 0.08em;
}
.n36-tutorial-progress .n36-progress-fill {
transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.n36-tutorial-scene.is-principe {
flex-direction: row;
align-items: center;
justify-content: center;
gap: 0.45rem;
}
.n36-tutorial-scene.is-principe .n36-tutorial-dice {
gap: 0.5rem;
flex-shrink: 0;
}
.n36-tutorial-scene.is-principe .n36-tutorial-progress {
flex: 1 1 6.5rem;
width: auto;
min-width: 0;
max-width: 9.5rem;
}
.n36-tutorial-progress.is-overshoot .n36-progress-fill {
background: var(--n36-bad);
}
.n36-tutorial-progress.is-overshoot .n36-progress-value {
color: var(--n36-bad);
animation: n36-tutorial-shake 0.45s ease;
}
.n36-tutorial-progress.is-win .n36-progress-fill {
background: var(--n36-good);
}
.n36-tutorial-target-hint {
margin: 0;
font-size: 0.9rem;
color: var(--n36-ink-dim);
}
.n36-tutorial-dice {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 0.85rem;
flex-wrap: wrap;
}
.n36-tutorial-die-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
}
.n36-tutorial-die-label {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--n36-ink-dim);
min-height: 0.95rem;
line-height: 0.95rem;
opacity: 0;
transition: opacity 0.25s ease;
}
.n36-tutorial-scene.is-resolved .n36-tutorial-die-label {
opacity: 1;
}
.n36-tutorial-overshoot {
margin: 0;
font-weight: 700;
color: var(--n36-bad);
animation: n36-sum-pop 0.35s cubic-bezier(0.2, 1.2, 0.3, 1);
}
.n36-tutorial-center-treasures {
display: flex;
gap: 0.55rem;
justify-content: center;
flex-wrap: wrap;
min-height: 2.5rem;
}
.n36-tutorial-skill-fallback {
margin: 0;
font-weight: 700;
color: var(--n36-accent);
}
.n36-tutorial-rest-mark {
display: flex;
align-items: center;
justify-content: center;
gap: 0.2rem;
min-height: 2rem;
}
.n36-tutorial-rest-mark .n36-d6-md .n36-d6-scene {
width: 32px;
height: 32px;
}
.n36-tutorial-rest-mark .n36-d6-md .n36-d6-face-1 { transform: rotateY(0deg) translateZ(16px); }
.n36-tutorial-rest-mark .n36-d6-md .n36-d6-face-2 { transform: rotateY(90deg) translateZ(16px); }
.n36-tutorial-rest-mark .n36-d6-md .n36-d6-face-3 { transform: rotateX(90deg) translateZ(16px); }
.n36-tutorial-rest-mark .n36-d6-md .n36-d6-face-4 { transform: rotateX(-90deg) translateZ(16px); }
.n36-tutorial-rest-mark .n36-d6-md .n36-d6-face-5 { transform: rotateY(-90deg) translateZ(16px); }
.n36-tutorial-rest-mark .n36-d6-md .n36-d6-face-6 { transform: rotateY(180deg) translateZ(16px); }
.n36-tutorial-chip-wrap {
transition: transform 0.7s cubic-bezier(0.2, 1.1, 0.3, 1), opacity 0.35s ease;
}
.n36-tutorial-chip-wrap.is-highlight {
transform: scale(1.12);
outline: 2px solid var(--n36-accent);
outline-offset: 3px;
border-radius: 8px;
}
.n36-tutorial-chip-wrap.is-flying {
transform: translateY(3.2rem) scale(0.9);
opacity: 0.2;
}
.n36-tutorial-chip-wrap.is-taken {
opacity: 0;
pointer-events: none;
}
.n36-tutorial-result-row {
display: flex;
align-items: center;
gap: 0.65rem;
}
.n36-tutorial-result-label {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--n36-ink-dim);
}
.n36-tutorial-player-slot {
display: flex;
align-items: center;
gap: 0.55rem;
min-height: 2.5rem;
padding: 0.35rem 0.65rem;
border-radius: 8px;
border: 1px solid var(--n36-line);
background: #fff;
}
.n36-tutorial-player-label {
font-size: 0.8rem;
font-weight: 700;
}
.n36-tutorial-player-treasures {
display: flex;
gap: 0.25rem;
min-width: 2rem;
min-height: 1.75rem;
}
.n36-tutorial-player-treasures.is-received {
animation: n36-sum-pop 0.4s cubic-bezier(0.2, 1.2, 0.3, 1);
}
.n36-tutorial-burst {
position: absolute;
width: 6rem;
height: 6rem;
border-radius: 50%;
background: radial-gradient(circle, rgba(47, 107, 58, 0.35), transparent 70%);
opacity: 0;
pointer-events: none;
}
.n36-tutorial-scene.is-burst .n36-tutorial-burst {
animation: n36-tutorial-burst 0.9s ease-out;
}
.n36-tutorial-win-banner {
margin: 0;
font-family: var(--n36-font-display);
font-size: 1.35rem;
font-weight: 900;
color: var(--n36-good);
}
.n36-tutorial-scene.is-victoire {
position: relative;
gap: 0;
}
.n36-tutorial-win {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 0.55rem;
width: 100%;
max-width: 15rem;
padding: 0;
box-sizing: border-box;
}
.n36-tutorial-win-hero {
position: relative;
display: grid;
place-items: center;
width: 2.75rem;
height: 2.75rem;
flex-shrink: 0;
}
.n36-tutorial-win-body {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 0.2rem;
min-width: 0;
}
.n36-tutorial-win-ring {
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid rgba(47, 107, 58, 0.55);
box-shadow:
0 0 0 4px rgba(47, 107, 58, 0.08),
0 0 16px rgba(47, 107, 58, 0.28);
}
.n36-tutorial-scene.is-victoire.is-celebrating .n36-tutorial-win-ring {
animation: n36-tutorial-win-ring 1.4s ease-out;
}
.n36-tutorial-win-score {
position: relative;
z-index: 1;
font-family: var(--n36-font-display);
font-size: 1rem;
font-weight: 900;
line-height: 1;
color: var(--n36-good);
}
.n36-tutorial-win-score small {
display: block;
margin-top: 0.05rem;
font-size: 0.52rem;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--n36-ink-dim);
}
.n36-tutorial-win-title {
margin: 0;
font-family: var(--n36-font-display);
font-size: 0.88rem;
font-weight: 900;
letter-spacing: 0.04em;
color: var(--n36-good);
}
.n36-tutorial-scene.is-victoire .n36-tutorial-burst {
width: 4.5rem;
height: 4.5rem;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
@keyframes n36-tutorial-win-ring {
0% {
transform: scale(0.82);
opacity: 0.35;
}
55% {
transform: scale(1.08);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.n36-tutorial-caption {
margin: 0 0 0.35rem;
min-height: 4.5rem;
max-height: 9rem;
overflow-y: auto;
overflow-x: hidden;
text-align: left;
font-size: 0.84rem;
line-height: 1.35;
color: var(--n36-ink);
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
}
.n36-tutorial-caption p {
margin: 0 0 0.38rem;
}
.n36-tutorial-caption p:last-child {
margin-bottom: 0;
}
.n36-tutorial-caption strong {
color: var(--n36-accent);
}
.n36-tutorial-lead {
margin-top: 0.15rem !important;
font-weight: 700;
font-style: normal;
color: var(--n36-ink);
}
.n36-tutorial-progress.is-win .n36-progress-value .is-victory-label {
font-family: var(--n36-font-display);
font-size: 0.78rem;
font-weight: 900;
letter-spacing: 0.04em;
color: var(--n36-good);
}
.n36-tutorial-rhythm {
width: min(100%, 16rem);
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.22rem;
}
.n36-tutorial-scene.is-rythme {
gap: 0;
}
.n36-tutorial-stage:has(.is-rythme) {
height: 9.5rem;
min-height: 9.5rem;
max-height: 9.5rem;
}
@media (min-width: 961px) {
.n36-tutorial-kicker {
font-size: 0.78rem;
}
.n36-tutorial-title {
font-size: clamp(1.65rem, 2.4vw, 2.15rem);
}
.n36-tutorial-subtitle {
font-size: 1.02rem;
line-height: 1.45;
}
.n36-tutorial-intro {
font-size: 1.08rem;
line-height: 1.5;
}
.n36-tutorial-caption {
font-size: 1.05rem;
line-height: 1.5;
min-height: 5.5rem;
max-height: 14rem;
}
.n36-tutorial-stage {
height: 11rem;
min-height: 11rem;
max-height: 11rem;
margin-bottom: 0.55rem;
}
.n36-tutorial-stage:has(.is-competence) {
height: 11rem;
min-height: 11rem;
max-height: 11rem;
}
.n36-tutorial-stage:has(.is-repos) {
height: 12.5rem;
min-height: 12.5rem;
max-height: 12.5rem;
}
.n36-tutorial-stage:has(.is-tresor) {
height: 11.25rem;
min-height: 11.25rem;
max-height: 11.25rem;
}
.n36-tutorial-stage:has(.is-rythme) {
height: 13.5rem;
min-height: 13.5rem;
max-height: 13.5rem;
}
}
.n36-tutorial-scene.is-rythme .n36-tutorial-progress {
width: 100%;
max-width: none;
}
.n36-tutorial-rhythm-progress {
position: relative;
}
.n36-tutorial-win-zone-wrap {
position: absolute;
left: 0;
right: 0;
top: 1.05rem;
height: 8px;
pointer-events: none;
}
.n36-tutorial-win-zone {
position: absolute;
top: 0;
height: 100%;
border-radius: 4px;
background: rgba(47, 107, 58, 0.14);
border: 1px dashed rgba(47, 107, 58, 0.5);
opacity: 0;
transform: scaleX(0.6);
transform-origin: left center;
transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.2, 1.1, 0.3, 1);
box-sizing: border-box;
}
.n36-tutorial-win-zone-label {
position: absolute;
top: 0.62rem;
right: 0;
font-size: 0.52rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--n36-good);
opacity: 0;
transform: translateY(0.2rem);
transition: opacity 0.35s ease 0.1s, transform 0.35s ease 0.1s;
}
.n36-tutorial-scene.is-rythme.is-highlight-ready .n36-tutorial-win-zone,
.n36-tutorial-scene.is-rythme.is-highlight-ready .n36-tutorial-win-zone-label {
opacity: 1;
transform: none;
}
.n36-tutorial-scene.is-rythme.is-highlight-ready .n36-tutorial-win-zone {
transform-origin: left center;
}
.n36-tutorial-scene.is-rythme.is-zone-pulse .n36-tutorial-win-zone {
animation: n36-tutorial-win-zone-pulse 0.75s ease-out;
}
.n36-tutorial-scene.is-rythme.is-zone-blink .n36-tutorial-win-zone,
.n36-tutorial-scene.is-rythme.is-zone-blink .n36-tutorial-win-zone-label {
animation: n36-tutorial-win-zone-blink 1.1s ease-in-out infinite;
}
@keyframes n36-tutorial-win-zone-blink {
0%,
100% {
opacity: 1;
background: rgba(47, 107, 58, 0.16);
box-shadow: 0 0 0 0 rgba(47, 107, 58, 0.15);
}
50% {
opacity: 0.35;
background: rgba(47, 107, 58, 0.38);
box-shadow: 0 0 0 3px rgba(47, 107, 58, 0.28);
}
}
@keyframes n36-tutorial-win-zone-pulse {
0% {
box-shadow: 0 0 0 0 rgba(47, 107, 58, 0.35);
}
55% {
box-shadow: 0 0 0 4px rgba(47, 107, 58, 0.22);
background: rgba(47, 107, 58, 0.22);
}
100% {
box-shadow: 0 0 0 0 rgba(47, 107, 58, 0);
}
}
.n36-tutorial-rhythm-kicker {
margin: 0.08rem 0 0.12rem;
min-height: 0.85rem;
text-align: center;
font-size: 0.58rem;
font-weight: 600;
line-height: 1.25;
color: var(--n36-ink-dim);
}
.n36-tutorial-rhythm-kicker.is-visible,
.n36-tutorial-scene.is-rythme.is-kicker-visible .n36-tutorial-rhythm-kicker {
opacity: 1;
transform: none;
}
.n36-tutorial-rhythm-kicker strong {
color: var(--n36-good);
}
.n36-tutorial-turn-order-wrap {
position: relative;
margin-top: 0.05rem;
}
.n36-tutorial-rhythm-die.is-floating {
position: absolute;
top: 0;
left: 50%;
z-index: 2;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 0.2rem;
height: 2rem;
transform: translateX(-50%);
transition: left 0.3s cubic-bezier(0.2, 1.1, 0.3, 1);
pointer-events: none;
}
.n36-tutorial-rhythm-die.is-floating.is-pulse .n36-d6 {
animation: n36-tutorial-rhythm-die-pulse 1.1s ease-in-out infinite;
}
.n36-tutorial-rhythm-die .n36-d6.is-open-chance .n36-d6-cube {
animation: n36-tutorial-rhythm-die-spin 2.6s linear infinite;
transform-style: preserve-3d;
}
@keyframes n36-tutorial-rhythm-die-spin {
from {
transform: rotateX(0deg) rotateY(0deg);
}
to {
transform: rotateX(360deg) rotateY(540deg);
}
}
@keyframes n36-tutorial-rhythm-die-pulse {
0%,
100% {
transform: scale(1);
filter: drop-shadow(0 0 0 rgba(47, 107, 58, 0));
}
50% {
transform: scale(1.14);
filter: drop-shadow(0 0 5px rgba(47, 107, 58, 0.35));
}
}
.n36-tutorial-rhythm-die {
display: inline-flex;
align-items: center;
gap: 0.15rem;
flex-shrink: 0;
}
.n36-tutorial-rhythm-die .n36-d6-md .n36-d6-scene {
width: 28px;
height: 28px;
}
.n36-tutorial-rhythm-die .n36-d6-md .n36-d6-face-1 { transform: rotateY(0deg) translateZ(14px); }
.n36-tutorial-rhythm-die .n36-d6-md .n36-d6-face-2 { transform: rotateY(90deg) translateZ(14px); }
.n36-tutorial-rhythm-die .n36-d6-md .n36-d6-face-3 { transform: rotateX(90deg) translateZ(14px); }
.n36-tutorial-rhythm-die .n36-d6-md .n36-d6-face-4 { transform: rotateX(-90deg) translateZ(14px); }
.n36-tutorial-rhythm-die .n36-d6-md .n36-d6-face-5 { transform: rotateY(-90deg) translateZ(14px); }
.n36-tutorial-rhythm-die .n36-d6-md .n36-d6-face-6 { transform: rotateY(180deg) translateZ(14px); }
.n36-tutorial-rhythm-add {
flex-shrink: 0;
font-size: 0.58rem;
font-weight: 800;
line-height: 1;
color: var(--n36-accent);
padding: 0.1rem 0.28rem;
border-radius: 4px;
border: 1px solid var(--n36-line-strong);
background: #fff;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}
.n36-tutorial-rhythm-add:empty {
display: none;
}
.n36-tutorial-turn-order {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 0.1rem;
margin-top: 2.15rem;
}
.n36-tutorial-turn-player.is-ghost {
display: flex;
opacity: 0.28;
}
.n36-tutorial-turn-ellipsis {
display: inline-flex;
align-self: center;
margin-top: 0.12rem;
font-size: 0.58rem;
font-weight: 700;
line-height: 1rem;
color: var(--n36-ink-dim);
opacity: 0.35;
}
.n36-tutorial-turn-player.is-ghost .n36-tutorial-turn-letter {
border-color: var(--n36-ink-dim);
color: var(--n36-ink-dim);
background: rgba(243, 241, 239, 0.85);
}
.n36-tutorial-turn-player {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
min-width: 1.55rem;
opacity: 0.55;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.n36-tutorial-turn-letter {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1rem;
height: 1rem;
border-radius: 50%;
border: 1px solid var(--n36-ink);
background: #fff;
font-size: 0.5rem;
font-weight: 700;
line-height: 1;
color: var(--n36-ink);
transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.n36-tutorial-turn-status {
font-size: 0.42rem;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--n36-ink-dim);
text-align: center;
line-height: 1.1;
max-width: 2.75rem;
min-height: 0.9rem;
opacity: 0;
transition: opacity 0.25s ease;
}
.n36-tutorial-turn-player.is-active {
opacity: 1;
transform: scale(1.06);
}
.n36-tutorial-turn-player.is-active .n36-tutorial-turn-letter {
border-color: var(--n36-accent);
color: var(--n36-accent);
background: rgba(138, 36, 36, 0.08);
box-shadow: 0 0 0 2px rgba(138, 36, 36, 0.14);
}
.n36-tutorial-turn-player.is-past {
opacity: 0.38;
}
.n36-tutorial-turn-player.is-past .n36-tutorial-turn-status,
.n36-tutorial-turn-player.is-ready .n36-tutorial-turn-status,
.n36-tutorial-turn-player.is-winner .n36-tutorial-turn-status {
opacity: 1;
}
.n36-tutorial-turn-player.is-past .n36-tutorial-turn-letter {
border-color: var(--n36-ink-dim);
color: var(--n36-ink-dim);
}
.n36-tutorial-turn-player.is-ready {
opacity: 1;
transform: scale(1.04);
}
.n36-tutorial-turn-player.is-ready .n36-tutorial-turn-letter {
border-color: var(--n36-good);
color: var(--n36-good);
background: rgba(47, 107, 58, 0.1);
box-shadow: 0 0 0 2px rgba(47, 107, 58, 0.14);
animation: n36-tutorial-turn-ready 1.1s ease-in-out infinite;
}
.n36-tutorial-turn-player.is-ready .n36-tutorial-turn-status {
color: var(--n36-good);
}
.n36-tutorial-turn-player.is-winner {
opacity: 1;
transform: scale(1.05);
}
.n36-tutorial-turn-player.is-winner .n36-tutorial-turn-letter {
border-color: var(--n36-good);
color: #fff;
background: var(--n36-good);
box-shadow: 0 0 0 2px rgba(47, 107, 58, 0.2);
}
.n36-tutorial-turn-player.is-winner .n36-tutorial-turn-status {
color: var(--n36-good);
}
.n36-tutorial-scene.is-rythme.is-win .n36-tutorial-progress { }
@keyframes n36-tutorial-turn-hit {
0% {
transform: scale(1);
}
45% {
transform: scale(1.18);
}
100% {
transform: scale(1);
}
}
@keyframes n36-tutorial-turn-ready {
0%,
100% {
box-shadow: 0 0 0 2px rgba(47, 107, 58, 0.14);
}
50% {
box-shadow: 0 0 0 4px rgba(47, 107, 58, 0.24);
}
}
.n36-tutorial-feature {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.35rem;
width: 100%;
padding: 0.15rem;
box-sizing: border-box;
}
.n36-tutorial-feature-art {
position: relative;
width: 6.5rem;
height: 6.5rem;
}
.n36-tutorial-role-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
border: 1px solid var(--n36-ink);
border-radius: 6px;
background: #fff;
opacity: 0;
transform: scale(0.92);
transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.2, 1.1, 0.3, 1);
}
.n36-tutorial-role-img.is-active {
opacity: 1;
transform: scale(1);
}
.n36-tutorial-feature-kicker,
.n36-tutorial-rest-title {
margin: 0;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--n36-accent);
}
.n36-tutorial-feature.is-treasure .n36-tutorial-feature-kicker {
max-width: 14rem;
line-height: 1.25;
text-align: center;
text-transform: none;
letter-spacing: 0.02em;
}
.n36-tutorial-rest-title {
font-family: var(--n36-font-display);
font-size: 0.88rem;
letter-spacing: 0.04em;
}
.n36-tutorial-rest-copy {
margin: 0;
max-width: 14rem;
font-size: 0.68rem;
line-height: 1.28;
text-align: center;
color: var(--n36-ink);
}
.n36-tutorial-feature.is-rest {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: auto auto auto;
align-items: center;
column-gap: 0.45rem;
row-gap: 0.18rem;
width: 100%;
max-width: 16rem;
gap: 0.18rem 0.45rem;
padding: 0.1rem 0.15rem;
}
.n36-tutorial-feature.is-rest .n36-tutorial-rest-title {
grid-column: 1 / -1;
justify-self: center;
}
.n36-tutorial-feature.is-rest .n36-tutorial-rest-mark {
grid-column: 1;
grid-row: 2;
min-height: 0;
align-self: center;
}
.n36-tutorial-feature.is-rest .n36-tutorial-rest-copy {
grid-column: 2;
grid-row: 2;
max-width: none;
text-align: left;
align-self: center;
}
.n36-tutorial-feature.is-rest .n36-tutorial-feature-kicker {
grid-column: 1 / -1;
grid-row: 3;
justify-self: center;
text-transform: none;
letter-spacing: 0.04em;
}
.n36-tutorial-feature.is-rest.is-active {
animation: n36-sum-pop 0.4s cubic-bezier(0.2, 1.2, 0.3, 1);
}
.n36-tutorial-feature.is-rest.is-ambush .n36-tutorial-rest-mark .n36-d6 {
animation: n36-d6-bounce 0.75s ease-out;
}
.n36-tutorial-chip-wrap.is-pulse {
animation: n36-sum-pop 0.55s cubic-bezier(0.2, 1.2, 0.3, 1);
}
.n36-tutorial-footnote-slot {
min-height: 0.95rem;
margin: 0 0 0.3rem;
text-align: left;
font-size: 0.78rem;
color: var(--n36-ink-dim);
font-style: italic;
line-height: 1.3;
}
.n36-tutorial-footnote {
margin: 0 0 0.85rem;
text-align: center;
font-size: 0.85rem;
color: var(--n36-ink-dim);
font-style: italic;
}
.n36-tutorial-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.4rem;
}
.n36-tutorial-actions .n36-btn {
min-height: 44px;
min-width: 0;
flex: 1 1 6.5rem;
}
.n36-tutorial-actions .n36-btn-primary {
width: auto;
margin-top: 0;
}
.n36-home-panel > .n36-home-extra-links,
.n36-setup .n36-home-panel > .n36-home-extra-links {
display: flex;
flex-wrap: wrap;
gap: 0.35rem 0.75rem;
align-self: flex-start;
width: auto;
margin: 0 0 0.15rem;
}
.n36-home-panel .n36-tutorial-open-btn,
.n36-setup .n36-home-panel .n36-tutorial-open-btn {
align-self: flex-start;
width: auto;
margin: 0;
}
.n36-tutorial-open-btn.is-seen {
position: relative;
}
.n36-tutorial-open-btn.is-seen::after {
content: '';
position: absolute;
top: 0.12rem;
right: 0.12rem;
width: 0.42rem;
height: 0.42rem;
border-radius: 50%;
background: var(--n36-good);
border: 1px solid #fff;
box-shadow: 0 0 0 1px rgba(47, 107, 58, 0.35);
pointer-events: none;
}
@keyframes n36-tutorial-shake {
0%,
100% {
transform: translateX(0);
}
25% {
transform: translateX(-3px);
}
75% {
transform: translateX(3px);
}
}
@keyframes n36-tutorial-burst {
0% {
opacity: 0;
transform: scale(0.4);
}
40% {
opacity: 1;
transform: scale(1.15);
}
100% {
opacity: 0;
transform: scale(1.6);
}
}
@media (max-width: 640px) {
.n36-tutorial-overlay {
padding: max(0.5rem, env(safe-area-inset-top)) max(0.5rem, env(safe-area-inset-right))
max(0.5rem, env(safe-area-inset-bottom)) max(0.5rem, env(safe-area-inset-left));
}
.n36-tutorial-card {
width: 100%;
max-width: 100%;
max-height: min(96dvh, 100%);
padding: 0.85rem 0.75rem 0.8rem;
border-radius: 10px;
}
.n36-tutorial-title {
font-size: 1.2rem;
padding-right: 2.25rem;
}
.n36-tutorial-intro {
font-size: 0.86rem;
line-height: 1.42;
margin-bottom: 0.75rem;
}
.n36-tutorial-subtitle {
font-size: 0.82rem;
margin-bottom: 1rem;
}
.n36-tutorial-stage {
height: 6.5rem;
min-height: 6.5rem;
max-height: 6.5rem;
padding: 0.25rem 0.35rem;
}
.n36-tutorial-stage:has(.is-competence) {
height: 6.25rem;
min-height: 6.25rem;
max-height: 6.25rem;
}
.n36-tutorial-stage:has(.is-repos) {
height: 8.5rem;
min-height: 8.5rem;
max-height: 8.5rem;
}
.n36-tutorial-stage:has(.is-tresor) {
height: 7rem;
min-height: 7rem;
max-height: 7rem;
}
.n36-tutorial-stage:has(.is-rythme) {
height: 9.25rem;
min-height: 9.25rem;
max-height: 9.25rem;
}
.n36-tutorial-turn-player {
min-width: 1.4rem;
}
.n36-tutorial-turn-status {
font-size: 0.38rem;
max-width: 2.35rem;
min-height: 0.8rem;
}
.n36-tutorial-rhythm-kicker {
font-size: 0.54rem;
margin-bottom: 0.08rem;
}
.n36-tutorial-turn-order-wrap {
margin-top: 0;
}
.n36-tutorial-turn-order {
margin-top: 2rem;
}
.n36-tutorial-rhythm-die.is-floating {
height: 1.85rem;
}
.n36-tutorial-rhythm-add {
font-size: 0.52rem;
padding: 0.08rem 0.22rem;
}
.n36-tutorial-rhythm-die .n36-d6-md .n36-d6-scene {
width: 24px;
height: 24px;
}
.n36-tutorial-rhythm-die .n36-d6-md .n36-d6-face-1 { transform: rotateY(0deg) translateZ(12px); }
.n36-tutorial-rhythm-die .n36-d6-md .n36-d6-face-2 { transform: rotateY(90deg) translateZ(12px); }
.n36-tutorial-rhythm-die .n36-d6-md .n36-d6-face-3 { transform: rotateX(90deg) translateZ(12px); }
.n36-tutorial-rhythm-die .n36-d6-md .n36-d6-face-4 { transform: rotateX(-90deg) translateZ(12px); }
.n36-tutorial-rhythm-die .n36-d6-md .n36-d6-face-5 { transform: rotateY(-90deg) translateZ(12px); }
.n36-tutorial-rhythm-die .n36-d6-md .n36-d6-face-6 { transform: rotateY(180deg) translateZ(12px); }
.n36-tutorial-stage:has(.is-victoire) {
height: 6.5rem;
min-height: 6.5rem;
max-height: 6.5rem;
}
.n36-tutorial-feature {
gap: 0.18rem;
padding: 0;
}
.n36-tutorial-feature-art {
width: 5.5rem;
height: 5.5rem;
}
.n36-tutorial-feature.is-treasure .n36-tutorial-feature-kicker {
font-size: 0.62rem;
line-height: 1.2;
max-width: 11.75rem;
}
.n36-tutorial-feature.is-rest {
max-width: 100%;
column-gap: 0.35rem;
row-gap: 0.14rem;
}
.n36-tutorial-feature.is-rest .n36-tutorial-rest-title {
font-size: 0.8rem;
}
.n36-tutorial-feature.is-rest .n36-tutorial-rest-copy {
font-size: 0.62rem;
line-height: 1.24;
}
.n36-tutorial-feature.is-rest .n36-tutorial-rest-mark {
min-height: 0;
}
.n36-tutorial-feature.is-rest .n36-tutorial-rest-mark .n36-d6-md .n36-d6-scene {
width: 28px;
height: 28px;
}
.n36-tutorial-feature.is-rest .n36-tutorial-rest-mark .n36-d6-md .n36-d6-face-1 { transform: rotateY(0deg) translateZ(14px); }
.n36-tutorial-feature.is-rest .n36-tutorial-rest-mark .n36-d6-md .n36-d6-face-2 { transform: rotateY(90deg) translateZ(14px); }
.n36-tutorial-feature.is-rest .n36-tutorial-rest-mark .n36-d6-md .n36-d6-face-3 { transform: rotateX(90deg) translateZ(14px); }
.n36-tutorial-feature.is-rest .n36-tutorial-rest-mark .n36-d6-md .n36-d6-face-4 { transform: rotateX(-90deg) translateZ(14px); }
.n36-tutorial-feature.is-rest .n36-tutorial-rest-mark .n36-d6-md .n36-d6-face-5 { transform: rotateY(-90deg) translateZ(14px); }
.n36-tutorial-feature.is-rest .n36-tutorial-rest-mark .n36-d6-md .n36-d6-face-6 { transform: rotateY(180deg) translateZ(14px); }
.n36-tutorial-feature.is-rest .n36-tutorial-feature-kicker {
font-size: 0.58rem;
}
.n36-tutorial-center-treasures {
gap: 0.4rem;
min-height: 2.15rem;
}
.n36-tutorial-caption {
min-height: 4rem;
max-height: 8.5rem;
font-size: 0.8rem;
line-height: 1.32;
}
.n36-tutorial-caption p {
margin-bottom: 0.32rem;
}
.n36-tutorial-progress.is-win .n36-progress-value .is-victory-label {
font-size: 0.76rem;
}
.n36-tutorial-actions .n36-btn {
min-height: 42px;
flex: 1 1 5.5rem;
}
}
@media (prefers-reduced-motion: reduce) {
.n36-tutorial-overlay,
.n36-tutorial-card,
.n36-tutorial-stage,
.n36-tutorial-progress .n36-progress-fill,
.n36-tutorial-chip-wrap,
.n36-tutorial-player-treasures.is-received,
.n36-tutorial-overshoot,
.n36-tutorial-scene.is-burst .n36-tutorial-burst,
.n36-tutorial-scene.is-victoire.is-celebrating .n36-tutorial-win-ring,
.n36-tutorial-scene.is-rythme.is-zone-pulse .n36-tutorial-win-zone,
.n36-tutorial-scene.is-rythme.is-zone-blink .n36-tutorial-win-zone,
.n36-tutorial-scene.is-rythme.is-zone-blink .n36-tutorial-win-zone-label,
.n36-tutorial-rhythm-die.is-floating,
.n36-tutorial-rhythm-die.is-floating.is-pulse .n36-d6,
.n36-tutorial-rhythm-die .n36-d6.is-open-chance .n36-d6-cube,
.n36-tutorial-turn-player.is-ready .n36-tutorial-turn-letter,
.n36-tutorial-role-img {
animation: none !important;
transition: none !important;
}
.n36-tutorial-stage.is-leaving,
.n36-tutorial-stage.is-entering {
opacity: 1 !important;
}
.n36-tutorial-scene.is-rythme.is-highlight-ready .n36-tutorial-win-zone {
transform: none !important;
opacity: 1 !important;
}
.n36-tutorial-scene.is-rythme.is-zone-blink .n36-tutorial-win-zone,
.n36-tutorial-scene.is-rythme.is-zone-blink .n36-tutorial-win-zone-label {
opacity: 1 !important;
}
.n36-tutorial-rhythm-kicker,
.n36-tutorial-rhythm-kicker.is-visible,
.n36-tutorial-scene.is-rythme.is-kicker-visible .n36-tutorial-rhythm-kicker {
opacity: 1 !important;
transform: none !important;
}
} .n36-check {
display: flex;
align-items: flex-start;
gap: 0.45rem;
margin: 0.35rem 0 0.55rem;
font-size: 0.88rem;
font-weight: 600;
line-height: 1.35;
color: var(--n36-ink);
cursor: pointer;
}
.n36-check input[type='checkbox'] {
appearance: auto;
width: 1.05rem;
height: 1.05rem;
margin: 0.12rem 0 0;
flex: 0 0 1.05rem;
accent-color: var(--n36-accent);
}
.n36-create-public {
padding: 0.35rem 0 0.15rem;
}
.n36-home-create {
transition:
padding 0.35s ease,
border-color 0.35s ease,
background 0.35s ease,
box-shadow 0.35s ease;
}
.n36-home-create.is-open {
animation: n36-home-create-shell-in 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.n36-home-create-panel {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
overflow: hidden;
pointer-events: none;
transition:
grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.32s ease;
}
.n36-home-create.is-open .n36-home-create-panel {
grid-template-rows: 1fr;
opacity: 1;
pointer-events: auto;
}
.n36-home-create-panel > .n36-create {
min-height: 0;
overflow: hidden;
}
.n36-home-create.is-collapsed {
padding: 0;
border: none;
background: transparent;
}
.n36-home-create.is-collapsed::before,
.n36-home-create.is-collapsed::after {
display: none;
}
.n36-home-create-toggle {
display: block;
width: 100%;
box-sizing: border-box;
text-align: center;
min-height: 44px;
padding: 0.55rem 1rem;
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.n36-home-create-toggle.is-close {
margin: 0 0 0.65rem;
border-style: dashed;
background: rgba(243, 241, 239, 0.85);
color: var(--n36-ink-dim);
font-size: 0.88rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
animation: n36-home-create-close-in 0.32s ease 0.06s both;
}
.n36-home-create-toggle.is-close:hover:not(:disabled) {
border-color: var(--n36-ink);
color: var(--n36-ink);
background: #fff;
}
.n36-home-create.is-open .n36-home-create-panel .n36-create {
width: 100%;
max-width: none;
margin: 0;
padding: 0;
border: none;
background: transparent;
box-shadow: none;
}
.n36-home-create.is-open .n36-home-create-panel .n36-create::before,
.n36-home-create.is-open .n36-home-create-panel .n36-create::after {
display: none;
}
@keyframes n36-home-create-shell-in {
from {
opacity: 0.72;
transform: translateY(-0.4rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes n36-home-create-close-in {
from {
opacity: 0;
transform: translateY(-0.2rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.n36-home-create,
.n36-home-create-panel,
.n36-home-create.is-open,
.n36-home-create-toggle.is-close {
animation: none !important;
transition: none !important;
}
}
.n36-home-public.n36-home-card {
border-left-width: 3px;
border-left-color: var(--n36-accent);
background:
linear-gradient(135deg, rgba(138, 36, 36, 0.1) 0%, transparent 52%),
linear-gradient(180deg, #fffaf8 0%, #ffffff 100%);
box-shadow: 0 6px 22px rgba(138, 36, 36, 0.08);
}
.n36-home-public-kicker {
margin: 0 0 0.25rem;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--n36-accent);
}
.n36-home-public-title {
margin: 0 0 0.35rem;
font-family: var(--n36-font-display);
font-size: 1.05rem;
font-weight: 900;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--n36-ink);
line-height: 1.15;
}
.n36-home-public-text {
margin: 0 0 0.7rem;
font-size: 0.88rem;
line-height: 1.4;
color: var(--n36-ink-dim);
}
.n36-btn-public-catalog {
display: block;
width: 100%;
box-sizing: border-box;
text-align: center;
text-decoration: none;
min-height: 44px;
padding: 0.55rem 1rem;
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.n36-home-info.n36-home-card {
border-color: var(--n36-line-strong);
background: rgba(20, 17, 15, 0.03);
}
.n36-home-info-title {
margin: 0 0 0.35rem;
font-family: var(--n36-font-display);
font-size: 0.92rem;
font-weight: 900;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--n36-ink-dim);
line-height: 1.15;
}
.n36-home-info-text {
margin: 0;
font-size: 0.88rem;
line-height: 1.45;
color: var(--n36-ink);
}
.n36-public-toggle {
width: 100%;
padding: 0.65rem 0.75rem;
border: 1px solid var(--n36-line-strong);
border-radius: 8px;
background: rgba(138, 36, 36, 0.04);
box-sizing: border-box;
}
.n36-public-hint {
margin: 0.35rem 0 0;
font-size: 0.78rem;
line-height: 1.35;
color: var(--n36-ink-dim);
}
.n36-privacy-hint {
margin: 0.5rem 0 0;
font-size: 0.74rem;
line-height: 1.4;
color: var(--n36-ink-dim);
}
.n36-shell.n36-public-catalog {
align-items: center;
justify-content: flex-start;
padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right))
max(0.85rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
}
.n36-public-layout {
width: 100%;
max-width: 32rem;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.n36-public-head {
text-align: center;
}
.n36-public-panel {
padding: 0.85rem 0.9rem 0.95rem;
border: 1px solid var(--n36-ink);
border-radius: 10px;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 8px 28px rgba(20, 17, 15, 0.08);
}
.n36-public-top {
margin-bottom: 0.75rem;
}
.n36-public-top .n36-btn-public-create {
margin-top: 0;
}
.n36-public-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.n36-public-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.65rem;
padding: 0.65rem 0.7rem;
border: 1px solid var(--n36-line);
border-radius: 8px;
background: #fff;
min-width: 0;
}
.n36-public-item-main {
min-width: 0;
flex: 1 1 auto;
}
.n36-public-host {
margin: 0 0 0.2rem;
font-weight: 700;
color: var(--n36-ink);
}
.n36-public-meta,
.n36-public-spots,
.n36-public-stake {
margin: 0;
font-size: 0.84rem;
line-height: 1.35;
color: var(--n36-ink-dim);
}
.n36-public-item .n36-btn {
flex: 0 0 auto;
white-space: nowrap;
min-height: 40px;
width: auto;
margin-top: 0;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.n36-public-empty {
margin: 0;
text-align: center;
color: var(--n36-ink-dim);
font-weight: 600;
padding: 1rem 0.5rem;
}
.n36-public-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.65rem;
margin-top: 0.85rem;
padding-top: 0.65rem;
border-top: 1px solid var(--n36-line);
}
.n36-public-foot .n36-btn {
flex: 0 0 auto;
min-height: 40px;
}
.n36-public-create {
margin-top: 0.85rem;
padding: 0.85rem 0.9rem 0.95rem;
border: 1px solid var(--n36-accent);
border-left: 3px solid var(--n36-accent);
border-radius: 8px;
background:
linear-gradient(135deg, rgba(138, 36, 36, 0.1) 0%, transparent 52%),
linear-gradient(180deg, #fff8f5 0%, #ffffff 100%);
box-sizing: border-box;
}
.n36-public-create-kicker {
margin: 0 0 0.2rem;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--n36-accent);
}
.n36-public-create-title {
margin: 0 0 0.35rem;
font-family: var(--n36-font-display);
font-size: 1rem;
font-weight: 900;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--n36-ink);
line-height: 1.15;
}
.n36-public-create-text {
margin: 0 0 0.7rem;
font-size: 0.86rem;
line-height: 1.4;
color: var(--n36-ink-dim);
}
.n36-btn-public-create {
display: block;
width: 100%;
min-height: 44px;
box-sizing: border-box;
text-align: center;
text-decoration: none;
}
@media (max-width: 960px) {
.n36-public-item {
flex-direction: column;
align-items: stretch;
}
.n36-public-item .n36-btn {
width: 100%;
min-height: 44px;
}
.n36-public-foot {
flex-direction: column;
align-items: stretch;
}
.n36-public-foot .n36-btn {
width: 100%;
min-height: 44px;
}
} .n36-shell.n36-access-block {
display: flex;
align-items: flex-start;
justify-content: center;
min-height: 0;
padding: max(1.25rem, env(safe-area-inset-top))
max(1rem, env(safe-area-inset-right))
max(1.5rem, env(safe-area-inset-bottom))
max(1rem, env(safe-area-inset-left)) !important;
box-sizing: border-box;
overflow: auto;
}
body.n36-body .n36-shell.n36-access-block {
min-height: 100dvh;
}
.n36-access-block > .n36-home-layout {
margin-block: 0;
}
.n36-access-block .n36-home-panel {
justify-content: center;
}
.n36-access-block-card {
border-left-width: 3px;
border-left-color: var(--n36-accent);
background:
linear-gradient(135deg, rgba(138, 36, 36, 0.1) 0%, transparent 52%),
linear-gradient(180deg, #fffaf8 0%, #ffffff 100%);
box-shadow: 0 6px 22px rgba(138, 36, 36, 0.08);
overflow: hidden;
min-width: 0;
}
.n36-access-block-kicker {
margin: 0 0 0.35rem;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--n36-accent);
}
.n36-access-block-title {
margin: 0 0 0.55rem;
font-family: var(--n36-font-display);
font-size: 1.2rem;
font-weight: 900;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--n36-ink);
line-height: 1.15;
}
.n36-access-block-text {
margin: 0 0 0.45rem;
font-size: 0.95rem;
line-height: 1.45;
color: var(--n36-ink);
}
.n36-access-block-hint {
margin: 0 0 0.85rem;
font-size: 0.88rem;
line-height: 1.4;
color: var(--n36-ink-dim);
}
.n36-access-block-actions {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.55rem;
margin-top: 0.85rem;
}
.n36-access-block-actions .n36-btn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
box-sizing: border-box;
margin-top: 0;
text-align: center;
text-decoration: none;
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.2;
min-height: 2.75rem;
padding: 0.55rem 1rem;
}
.n36-access-block-actions .n36-access-block-public,
.n36-access-block-actions .n36-access-block-public:hover:not(:disabled) {
min-height: 2.35rem;
padding: 0.38rem 1rem;
text-decoration: none;
}
.n36-access-block-actions .n36-game-home-link {
align-self: center;
margin-top: 0.15rem;
width: auto;
}
.n36-access-block.is-session .n36-access-block-card {
border-left-color: #b45309;
}
.n36-access-block.is-gone .n36-access-block-card,
.n36-access-block.is-ended .n36-access-block-card {
border-left-color: var(--n36-ink-dim);
}
.n36-max-roles,
.n36-role-slots-self,
.n36-px-scope {
margin: 0.65rem 0 0.35rem;
}
.n36-lobby-roles-setting {
width: 100%;
margin: 0 0 0.4rem;
padding: 0;
border: none;
background: none;
box-sizing: border-box;
}
.n36-lobby-roles-setting label {
flex-direction: column;
align-items: stretch;
gap: 0.3rem;
}
.n36-lobby-roles-setting .n36-public-hint {
margin: 0.25rem 0 0;
}
.n36-px-scope-title {
margin: 0 0 0.45rem;
font-size: 0.88rem;
font-weight: 600;
}
.n36-px-scope .n36-radio {
display: flex;
align-items: flex-start;
gap: 0.5rem;
margin: 0.35rem 0;
font-size: 0.84rem;
line-height: 1.35;
font-weight: 400;
cursor: pointer;
}
.n36-px-scope .n36-radio input {
margin-top: 0.2rem;
flex-shrink: 0;
}
.n36-awards-scope {
font-size: 0.82em;
font-weight: 500;
color: var(--n36-ink-dim, #6b6560);
}
.n36-max-roles label,
.n36-role-slots-self label {
display: flex;
flex-direction: column;
gap: 0.35rem;
font-size: 0.88rem;
font-weight: 600;
}
.n36-max-roles select,
.n36-role-slots-self select,
.n36-create select[name='role_slots'] {
width: 100%;
min-height: 42px;
box-sizing: border-box;
}
.n36-max-roles.n36-lobby-roles-setting select {
width: 100%;
min-height: 0;
height: 2rem;
padding: 0.15rem 0.5rem;
font-size: 0.88rem;
line-height: 1.2;
box-sizing: border-box;
}
@media (max-width: 960px) {
.n36-access-block > .n36-home-layout {
margin-block: auto;
padding-top: 0;
padding-bottom: 0;
}
}
@media (max-width: 720px) {
.n36-access-block .n36-home-layout {
gap: 0.75rem;
}
.n36-access-block-title {
font-size: 1.05rem;
}
}
.n36-tag-absent {
background: rgba(107, 101, 96, 0.2);
color: var(--n36-ink-dim, #6b6560);
}
.n36-seat.is-active .n36-tag-absent {
background: rgba(200, 80, 40, 0.2);
color: #c85028;
}
.n36-recovery-code code {
font-family: ui-monospace, monospace;
letter-spacing: 0.08em;
}
.n36-players-recovery {
margin-top: 0.7rem;
padding-top: 0.7rem;
border-top: 1px solid var(--n36-line);
}
.n36-players-list .n36-recovery-code > p {
margin: 0;
}
.n36-players-list .n36-lobby-host-tools {
margin-top: 0.4rem;
}
.n36-recovery-hint {
margin-top: 0.35rem;
}
.n36-lobby-host-tools {
margin: 0;
text-align: left;
}
.n36-recovery-codes-overlay {
position: fixed;
inset: 0;
z-index: 2147482000;
display: flex;
align-items: center;
justify-content: center;
padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
box-sizing: border-box;
}
.n36-party-links-overlay {
position: fixed;
inset: 0;
z-index: 2147482000;
display: flex;
align-items: center;
justify-content: center;
padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
box-sizing: border-box;
}
.n36-party-links-backdrop {
position: absolute;
inset: 0;
border: 0;
margin: 0;
padding: 0;
background: rgba(8, 6, 4, 0.55);
cursor: pointer;
}
.n36-party-links-card {
position: relative;
z-index: 1;
width: min(100%, 24rem);
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.n36-party-links-card h2 {
margin: 0;
text-align: center;
}
.n36-party-links-actions {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.n36-party-links-actions .n36-btn {
width: 100%;
justify-content: center;
}
.n36-party-links-close {
margin-top: 0.25rem;
}
.n36-recovery-codes-backdrop {
position: absolute;
inset: 0;
border: 0;
margin: 0;
padding: 0;
background: rgba(8, 6, 4, 0.55);
cursor: pointer;
}
.n36-recovery-codes-card {
position: relative;
z-index: 1;
width: min(100%, 28rem);
max-height: min(88dvh, 36rem);
overflow: auto;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.n36-recovery-codes-card h2 {
margin: 0;
text-align: center;
}
.n36-recovery-codes-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.n36-recovery-codes-item {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.5rem 0.75rem;
align-items: center;
padding: 0.55rem 0.65rem;
border: 1px solid var(--n36-line, rgba(20, 17, 15, 0.14));
border-radius: 6px;
background: #fff;
}
.n36-recovery-codes-name {
min-width: 0;
font-weight: 600;
}
.n36-recovery-codes-code {
display: inline-flex;
align-items: center;
gap: 0.45rem;
justify-self: end;
}
.n36-recovery-codes-value {
font-family: ui-monospace, monospace;
letter-spacing: 0.08em;
font-size: 0.92rem;
}
.n36-recovery-hint {
margin-top: 0.35rem;
}
.n36-recovery-codes-close {
align-self: center;
width: auto;
min-width: 8.5rem;
max-width: 100%;
}
.n36-my-recovery-code {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.45rem 0.65rem;
margin: 0;
}
.n36-home-info .n36-private-join {
margin: 0.75rem 0 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
max-width: none;
display: flex;
flex-direction: column;
gap: 0;
}
.n36-home-info .n36-private-join label {
margin-bottom: 0.65rem;
}
.n36-private-join-btn {
width: auto;
align-self: flex-start;
margin-top: 0.15rem;
}
.n36-optional-label {
font-weight: 400;
font-size: 0.82em;
color: var(--n36-ink-dim);
}
.n36-spectator-banner {
position: relative;
z-index: 3;
margin: 0;
padding: 0.45rem 0.75rem;
text-align: center;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--n36-ink-dim);
background: rgba(20, 17, 15, 0.06);
border-bottom: 1px solid var(--n36-line, rgba(20, 17, 15, 0.14));
}
.n36-shell.n36-board.is-spectator .n36-panel-play-dock,
.n36-shell.n36-board.is-spectator .n36-panel-skill-btn,
.n36-shell.n36-board.is-spectator .n36-actions {
display: none !important;
} .n36-home .n36-access-block-card .n36-reclaim-form,
.n36-access-block .n36-reclaim-form {
display: block;
box-sizing: border-box;
width: 100%;
max-width: 100%;
min-width: 0;
margin: 0.9rem 0 1.15rem;
padding: 0.9rem 0.85rem 1rem;
background: #ffffff;
border: 1px solid var(--n36-line-strong, rgba(20, 17, 15, 0.28));
border-radius: var(--n36-radius, 12px);
box-shadow: none;
}
.n36-home .n36-access-block-card .n36-reclaim-form::before,
.n36-home .n36-access-block-card .n36-reclaim-form::after,
.n36-access-block .n36-reclaim-form::before,
.n36-access-block .n36-reclaim-form::after {
content: none;
display: none;
}
.n36-access-block .n36-reclaim-form h3 {
margin: 0 0 0.65rem;
font-family: var(--n36-font-body);
font-size: 1rem;
font-weight: 700;
letter-spacing: 0;
text-transform: none;
color: var(--n36-ink);
}
.n36-access-block .n36-reclaim-form .n36-btn {
width: 100%;
margin-top: 0.7rem;
}
.n36-access-block .n36-reclaim-form + .n36-access-block-hint {
margin-top: 0;
}
.n36-session-ttl,
.n36-push-toggle {
margin-top: 0.75rem;
}
.n36-push-error {
margin-top: 0.45rem;
}
.n36-ios-install-prompt .n36-btn {
margin-top: 0.35rem;
}
#n36-ios-install-host {
position: fixed;
inset: 0;
z-index: 12050;
pointer-events: none;
}
#n36-ios-install-host:not([hidden]) {
pointer-events: auto;
}
#n36-ios-install-host[hidden] {
display: none !important;
}
#n36-recovery-codes-host[hidden],
#n36-party-links-host[hidden],
#n36-roles-list-host[hidden],
#n36-effect-help-host[hidden] {
display: none !important;
}
body.n36-ios-install-open {
overflow: hidden;
}
body.n36-recovery-codes-open,
body.n36-party-links-open,
body.n36-roles-list-open {
overflow: hidden;
}
.n36-ios-install-overlay {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right))
max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
box-sizing: border-box;
}
.n36-ios-install-backdrop {
position: absolute;
inset: 0;
margin: 0;
padding: 0;
border: 0;
background: rgba(20, 17, 15, 0.55);
cursor: pointer;
}
.n36-ios-install-card {
position: relative;
z-index: 1;
width: min(100%, 24rem);
max-height: min(90vh, 32rem);
overflow: auto;
padding: 1rem 1.1rem;
}
.n36-ios-install-card h2 {
margin: 0 0 0.5rem;
font-size: 1.05rem;
}
.n36-ios-install-lead {
margin: 0 0 0.75rem;
font-size: 0.88rem;
line-height: 1.45;
}
.n36-ios-install-steps {
margin: 0 0 0.75rem;
padding-left: 1.15rem;
font-size: 0.86rem;
line-height: 1.45;
}
.n36-ios-install-steps li + li {
margin-top: 0.35rem;
}
.n36-ios-share-icon {
display: inline-block;
font-weight: 700;
}
.n36-ios-install-actions {
display: flex;
flex-direction: column;
gap: 0.45rem;
margin-top: 0.75rem;
}
.n36-ios-install-actions .n36-btn {
width: 100%;
margin-top: 0;
text-align: center;
text-decoration: none;
box-sizing: border-box;
}
.n36-create-ttl select,
.n36-session-ttl select {
width: 100%;
min-height: 42px;
box-sizing: border-box;
}
.n36-legal-footer {
margin: 1rem 0 0;
text-align: center;
font-size: 0.78rem;
}
.n36-legal-sep {
color: var(--n36-ink-dim);
margin: 0 0.2rem;
}
.n36-privacy-body {
margin: 0;
min-height: 100vh;
background: var(--n36-bg0, #ffffff);
color: var(--n36-ink, #14110f);
}
.n36-privacy-shell {
display: flex;
align-items: flex-start;
justify-content: center;
min-height: 100vh;
padding-top: clamp(1.25rem, 4vw, 2.5rem);
padding-bottom: clamp(2rem, 5vw, 3rem);
}
.n36-privacy-layout {
width: min(100%, 44rem);
margin: 0 auto;
}
.n36-privacy-hero {
margin-bottom: 1rem;
padding: clamp(1.1rem, 3vw, 1.6rem) clamp(1rem, 3vw, 1.5rem);
text-align: center;
border: 1px solid var(--n36-line, rgba(20, 17, 15, 0.14));
border-radius: var(--n36-radius, 12px);
background: var(--n36-panel, #ffffff);
}
.n36-privacy-hero .n36-eyebrow {
margin: 0 0 0.45rem;
font-size: 0.68rem;
letter-spacing: 0.18em;
}
.n36-privacy-title {
margin: 0;
font-family: var(--n36-font-display, "Alegreya", Georgia, serif);
font-size: clamp(1.65rem, 4.5vw, 2.15rem);
font-weight: 900;
line-height: 1.08;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--n36-ink, #14110f);
}
.n36-privacy-lead {
margin: 0.65rem auto 0;
max-width: 34rem;
color: var(--n36-ink-dim, #5a524e);
line-height: 1.45;
font-size: 0.92rem;
}
.n36-privacy-content {
padding: clamp(1rem, 3vw, 1.35rem) clamp(1rem, 3vw, 1.5rem);
border: 1px solid var(--n36-line, rgba(20, 17, 15, 0.14));
border-radius: var(--n36-radius, 12px);
background: var(--n36-panel, #ffffff);
line-height: 1.6;
font-size: 0.9rem;
color: var(--n36-ink, #14110f);
}
.n36-privacy-content > :first-child {
margin-top: 0;
}
.n36-privacy-content > :last-child {
margin-bottom: 0;
}
.n36-privacy-content h2 {
margin: 1.5rem 0 0.55rem;
padding-bottom: 0.35rem;
border-bottom: 1px solid var(--n36-line, rgba(20, 17, 15, 0.14));
font-family: var(--n36-font-body, "Rubik", sans-serif);
font-size: 0.98rem;
font-weight: 700;
letter-spacing: 0.01em;
color: var(--n36-accent, #8a2424);
}
.n36-privacy-content h2:first-child {
margin-top: 0;
}
.n36-privacy-content p {
margin: 0.55rem 0;
}
.n36-privacy-content ul {
margin: 0.45rem 0 0.85rem;
padding-left: 1.15rem;
}
.n36-privacy-content li + li {
margin-top: 0.25rem;
}
.n36-privacy-content a {
color: var(--n36-accent, #8a2424);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 0.12em;
}
.n36-privacy-content a:hover {
color: var(--n36-accent-2, #c44a62);
}
.n36-privacy-content code {
padding: 0.08em 0.35em;
border-radius: 4px;
background: var(--n36-bg2, #f3f1ef);
font-size: 0.86em;
}
.n36-privacy-content em {
color: var(--n36-ink-dim, #5a524e);
font-size: 0.88rem;
}
.n36-privacy-footer {
margin-top: 1.25rem;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
background: transparent;
}
.n36-privacy-back {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.5rem;
padding: 0.55rem 1.35rem;
border: 1px solid var(--n36-accent, #8a2424);
border-radius: 6px;
background: var(--n36-accent, #8a2424);
color: #ffffff;
font-family: var(--n36-font-body, "Rubik", sans-serif);
font-size: 0.9rem;
font-weight: 700;
line-height: 1.2;
text-align: center;
text-decoration: none;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.n36-privacy-back:hover,
.n36-privacy-back:focus {
background: #a32e2e;
border-color: #a32e2e;
color: #ffffff;
}
.n36-cookie-banner {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 10050;
padding: 0.42rem max(0.75rem, env(safe-area-inset-right)) calc(0.42rem + env(safe-area-inset-bottom))
max(0.75rem, env(safe-area-inset-left));
border-top: 1px solid var(--n36-line, rgba(20, 17, 15, 0.14));
border-radius: 0;
background: rgba(255, 255, 255, 0.97);
box-shadow: 0 -6px 24px rgba(20, 17, 15, 0.08);
backdrop-filter: blur(8px);
}
.n36-cookie-banner__inner {
max-width: 40rem;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
text-align: center;
}
.n36-cookie-banner__text {
margin: 0;
font-size: 0.72rem;
line-height: 1.35;
color: var(--n36-ink-dim, #5a524e);
}
.n36-cookie-banner__text a {
color: var(--n36-accent, #8a2424);
font-weight: 600;
text-decoration: underline !important;
text-underline-offset: 0.1em;
}
.n36-cookie-banner__text a:hover,
.n36-cookie-banner__text a:focus {
text-decoration: underline !important;
}
.n36-cookie-banner__accept {
min-height: 30px;
padding: 0.28rem 0.85rem;
font-size: 0.74rem;
line-height: 1.2;
}
.n36-has-cookie-banner .n36-shell {
padding-bottom: 3.75rem;
}
.n36-has-cookie-banner.n36-html .n36-privacy-shell {
padding-bottom: calc(3.75rem + env(safe-area-inset-bottom));
}
.n36-html .cky-btn-revisit-wrapper,
.n36-html .cky-btn-revisit,
.n36-html .cky-consent-container,
.n36-html .cky-overlay,
.n36-html .cky-modal,
.n36-html #ckyPreferenceCenter,
html:has(#n36-root) .cky-btn-revisit-wrapper,
html:has(#n36-root) .cky-btn-revisit,
html:has(#n36-root) .cky-consent-container,
html:has(#n36-root) .cky-overlay,
html:has(#n36-root) .cky-modal,
html:has(#n36-root) #ckyPreferenceCenter {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
#n36-roles-list-host:not([hidden]) {
pointer-events: auto;
}
.n36-roles-list-overlay {
position: fixed;
inset: 0;
z-index: 2147482000;
display: flex;
align-items: center;
justify-content: center;
padding: max(0.85rem, env(safe-area-inset-top)) max(0.85rem, env(safe-area-inset-right))
max(0.85rem, env(safe-area-inset-bottom)) max(0.85rem, env(safe-area-inset-left));
box-sizing: border-box;
}
.n36-roles-list-backdrop {
position: absolute;
inset: 0;
border: 0;
margin: 0;
padding: 0;
background: rgba(8, 6, 4, 0.55);
cursor: pointer;
}
.n36-roles-list-card {
position: relative;
z-index: 1;
width: min(100%, 58rem);
max-width: min(100%, 58rem);
max-height: min(90dvh, 52rem);
overflow: auto;
display: flex;
flex-direction: column;
gap: 0.85rem;
padding: 1.15rem 1.2rem 1rem;
}
.n36-roles-list-card h2 {
margin: 0;
text-align: center;
font-family: var(--n36-font-display);
font-size: clamp(1.35rem, 2.4vw, 1.7rem);
}
.n36-roles-list-intro {
margin: -0.15rem 0 0.15rem;
font-size: 0.88rem;
line-height: 1.45;
color: var(--n36-ink-dim);
}
.n36-roles-list-grid {
display: flex;
flex-direction: column;
gap: 1.15rem;
}
.n36-roles-list-class {
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.n36-roles-list-class-head {
margin: 0;
}
.n36-roles-list-class-name {
margin: 0;
font-family: var(--n36-font-display);
font-size: 1.05rem;
font-weight: 900;
line-height: 1.2;
}
.n36-roles-list-class-tagline {
margin: 0.1rem 0 0;
font-size: 0.82rem;
line-height: 1.35;
color: var(--n36-ink-dim);
}
.n36-roles-list-class-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0.85rem;
}
.n36-roles-item {
display: grid;
grid-template-columns: 5.5rem minmax(0, 1fr);
gap: 0.75rem 0.85rem;
align-items: start;
padding: 0.7rem 0.75rem;
border: 1px solid var(--n36-line);
border-radius: 10px;
background: rgba(255, 255, 255, 0.72);
}
.n36-roles-list-art {
width: 5.5rem;
height: 5.5rem;
border-radius: 8px;
background-color: #eee;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.n36-roles-list-art[data-role='barbare'] { background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/roles/barbare.jpg); }
.n36-roles-list-art[data-role='mage'] { background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/roles/mage.jpg); }
.n36-roles-list-art[data-role='pretresse'] { background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/roles/pretresse.jpg); }
.n36-roles-list-art[data-role='paladin'] { background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/roles/paladin.jpg); }
.n36-roles-list-art[data-role='voleuse'] { background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/roles/voleuse.jpg); }
.n36-roles-list-art[data-role='barde'] { background-image: url(//www.guillaumelehericey.fr/wp-content/plugins/niveau-36/assets/img/roles/barde.jpg); }
.n36-roles-list-body {
min-width: 0;
}
.n36-roles-list-group {
margin: 0 0 0.15rem;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--n36-accent);
}
.n36-roles-list-name {
margin: 0 0 0.3rem;
font-family: var(--n36-font-display);
font-size: 1.2rem;
font-weight: 900;
line-height: 1.15;
}
.n36-roles-list-flavor {
margin: 0 0 0.45rem;
font-size: 0.88rem;
line-height: 1.4;
font-style: italic;
color: var(--n36-ink);
}
.n36-roles-list-skill {
margin: 0 0 0.25rem;
font-family: var(--n36-font-display);
font-size: 0.98rem;
font-weight: 700;
color: var(--n36-accent);
}
.n36-roles-list-text {
margin: 0;
font-size: 0.82rem;
line-height: 1.4;
color: var(--n36-ink-dim);
}
.n36-roles-list-close {
align-self: center;
min-width: 8rem;
}
@media (min-width: 720px) {
.n36-roles-list-class-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 640px) {
.n36-roles-item {
grid-template-columns: 4.25rem minmax(0, 1fr);
padding: 0.55rem 0.6rem;
}
.n36-roles-list-art {
width: 4.25rem;
height: 5.5rem;
}
}