.nbk-page { --nbk-mint: #a8edcf; --nbk-border: #2c4148; --nbk-muted: #9db2b7; --nbk-width: clamp(300px, calc(100dvh - 420px), 520px); width: 100%; max-width: var(--nbk-width); margin: auto; color: #eaf3ef; }
.content-page:has(.nbk-page) { padding-top: 25px; padding-bottom: 30px; }
.nbk-page [hidden] { display: none !important; }
.nbk-page button { font: inherit; cursor: pointer; touch-action: manipulation; }
.nbk-page button:focus-visible, .nbk-page a:focus-visible, .nbk-page summary:focus-visible { outline: 2px solid #d9ffc8; outline-offset: 4px; }
.nbk-heading { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 23px; }
.nbk-heading h1 { margin: 0; font-size: clamp(30px, calc(var(--nbk-width) * .085), 44px); font-weight: 750; line-height: 1; letter-spacing: -1.6px; }
.nbk-heading em { font-family: Georgia, serif; color: var(--nbk-mint); font-weight: 400; }
.nbk-heading h1 > span { color: #f3c18e; font-size: 26px; margin-left: 12px; vertical-align: top; display: inline-block; transform: rotate(12deg); }
.nbk-heading > a { font-size: 11px; color: #b6c7c5; text-decoration: none; white-space: nowrap; }
.nbk-heading > a:hover { color: var(--nbk-mint); }
.nbk-layout { display: grid; grid-template-columns: minmax(0, 1fr); }
.nbk-game { min-width: 0; }
.nbk-hud { display: grid; grid-template-columns: 1.2fr .8fr 1fr 40px; align-items: center; gap: 10px; padding: 16px 20px 15px; border: 1px solid var(--nbk-border); border-radius: 16px 16px 0 0; background: #17292e; }
.nbk-hud > div { min-width: 0; }
.nbk-hud > div > span { display: block; font-size: 9px; color: #a3babb; letter-spacing: 1.6px; margin-bottom: 5px; }
.nbk-hud strong { display: block; font-size: 23px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.nbk-hud .nbk-score strong { font-size: 30px; color: #b9f3d8; }
.nbk-hud > div:nth-child(3) strong { color: #eed1a5; }
.nbk-hud i { font-style: normal; font-size: 13px; color: #e6c691; }
.nbk-sound { display: grid; place-items: center; width: 40px; height: 44px; border: 0; border-radius: 9px; color: #9eb5b7; background: #ffffff05; }
.nbk-sound:hover { color: #d4f9e8; background: #ffffff0b; }
.nbk-sound .nbk-sound-on, .nbk-sound[aria-pressed="true"] .nbk-sound-off { display: none; }
.nbk-sound[aria-pressed="true"] .nbk-sound-on { display: block; }
.nbk-sound[aria-pressed="true"] { color: var(--nbk-mint); }
.nbk-field-shell { padding: 0 13px 9px; background: linear-gradient(155deg, #12232c, #14272d 75%); border: 1px solid var(--nbk-border); border-top: 0; border-radius: 0 0 16px 16px; }
.nbk-field-caption { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 2px; min-height: 32px; color: #8fa9ad; font-size: 10px; letter-spacing: 1px; }
.nbk-field-caption > span:last-child { text-align: right; color: #a9cebd; }
.nbk-field-wrap { position: relative; isolation: isolate; }
.nbk-board { display: grid; grid-template-rows: repeat(8, minmax(0, 1fr)); gap: 4px; width: 100%; aspect-ratio: 1; padding: 7px; border: 1px solid #39505b; border-radius: 10px; background: #0b1922; outline: none; touch-action: none; user-select: none; -webkit-user-select: none; }
.nbk-board.keyboard-preview:focus-visible { outline: 2px solid var(--nbk-mint); outline-offset: 4px; }
.nbk-row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; min-height: 0; }
.nbk-cell { min-width: 0; position: relative; border-radius: 5px; background: #182c37; box-shadow: inset 0 1px 0 #ffffff04; }
.nbk-cell:nth-child(2n) { background: #192e39; }
.nbk-cell::before { content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0; background: linear-gradient(140deg, #ffffff30, #ffffff00 62%), var(--block-color, #a8edcf); box-shadow: inset 0 1.5px 0 #ffffff60, inset 0 -3px 0 #0003, inset 0 0 0 1px #ffffff13, 0 2px 3px #0003; }
.nbk-cell.filled::before { opacity: 1; }
.nbk-cell::after { content: ''; position: absolute; inset: 5px 7px auto; height: 2px; border-radius: 8px; background: #ffffff33; opacity: 0; }
.nbk-cell.filled::after { opacity: 1; }
.nbk-cell.preview { background: color-mix(in srgb, var(--preview-color) 25%, #182c37); box-shadow: inset 0 0 0 1.5px var(--preview-color); }
.nbk-cell.preview::before { background: linear-gradient(140deg, #ffffff30, #ffffff00 62%), var(--preview-color); opacity: .35; }
.nbk-cell.preview-line { background: #9fe9c334; box-shadow: inset 0 0 0 1px #b8f9d099; }
.nbk-cell.preview-line.filled::after { inset: 0; height: auto; opacity: 1; background: #d9ffe72b; }
.nbk-cell.invalid { box-shadow: inset 0 0 0 2px #efa4a6; background: #75414d66; }
.nbk-board.keyboard-preview:focus-visible .nbk-cell.cursor { outline: 2px solid #fff7cf; outline-offset: -3px; z-index: 1; }
.nbk-cell.placed::before { animation: nbk-seat .26s cubic-bezier(.2,.8,.3,1.2) both; animation-delay: var(--delay, 0ms); }
.nbk-cell.clearing::before { animation: nbk-clear .26s ease-in forwards; animation-delay: var(--delay, 0ms); }
.nbk-cell.clearing::after { animation: nbk-clear .24s ease-in forwards; }
.nbk-effects { position: absolute; inset: -16px; width: calc(100% + 32px); height: calc(100% + 32px); z-index: 4; pointer-events: none; }
.nbk-falls { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; border-radius: 10px; }
.nbk-falling-block { position: absolute; border-radius: 5px; background: linear-gradient(140deg, #ffffff30, #ffffff00 62%), var(--block-color); box-shadow: inset 0 1.5px 0 #ffffff60, inset 0 -3px 0 #0003, inset 0 0 0 1px #ffffff13, 0 2px 3px #0003; will-change: transform; transition: transform var(--fall-duration, 260ms) cubic-bezier(.3, .1, .65, 1); }
.nbk-celebration { position: absolute; left: 8%; top: 35%; width: 84%; text-align: center; pointer-events: none; z-index: 5; animation: nbk-message .95s ease-out forwards; }
.nbk-celebration strong { display: block; width: fit-content; max-width: 100%; margin: auto; padding: 8px 17px; border: 1px solid #d4ffe178; border-radius: 7px; color: #e4ffec; background: #10252ee8; font-size: clamp(19px, 3vw, 27px); font-weight: 650; letter-spacing: -.5px; box-shadow: 0 6px 30px #06141c70; }
.nbk-celebration > span { display: inline-block; margin-top: 7px; padding: 4px 12px; background: #10252ef0; border-radius: 20px; color: #f4d39f; font-size: 16px; font-weight: 650; }
.nbk-tray { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.nbk-slot { position: relative; display: grid; place-items: center; min-height: 113px; padding: 12px 5px; border: 1px solid transparent; border-radius: 10px; background: transparent; touch-action: none !important; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: background .18s, border-color .18s; }
.nbk-slot:not(:disabled):hover { background: #ffffff04; }
.nbk-slot[aria-pressed="true"] { background: #b2edd908; border-color: #a8edcf80; }
.nbk-slot:disabled { cursor: default; }
.nbk-slot.unavailable .nbk-piece { opacity: .34; }
.nbk-slot.dragging .nbk-piece { opacity: .15; }
.nbk-piece { --piece-base: clamp(18px, 2.7vw, 25px); --piece-cell: calc(var(--piece-base) * var(--piece-scale, 1)); display: grid; grid-template-columns: repeat(var(--cols, 3), var(--piece-cell)); grid-template-rows: repeat(var(--rows, 3), var(--piece-cell)); gap: 2px; pointer-events: none; filter: drop-shadow(0 3px 2px #0003); }
.nbk-block { display: block; background: linear-gradient(140deg, #ffffff30, #ffffff00 65%), var(--block-color, #a8edcf); box-shadow: inset 0 1.5px 0 #ffffff60, inset 0 -2px 0 #0003, inset 0 0 0 1px #ffffff15; border-radius: 3px; }
.nbk-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 14px; margin-top: 10px; color: #a5bcbc; }
.nbk-help { min-width: 0; font-size: 11px; }
.nbk-help summary { display: flex; align-items: center; gap: 7px; width: fit-content; min-height: 44px; cursor: pointer; list-style: none; }
.nbk-help summary::-webkit-details-marker { display: none; }
.nbk-help summary::before { content: '›'; color: var(--nbk-mint); font-size: 18px; line-height: 1; transition: transform .15s; }
.nbk-help[open] summary::before { transform: rotate(90deg); }
.nbk-help summary:hover { color: #d7eee4; }
.nbk-help p { margin: 0 0 10px; font-size: 11px; line-height: 1.7; color: #9fb8b7; }
.nbk-actions > button { min-height: 44px; border: 1px solid #3a5055; border-radius: 6px; padding: 8px 13px; background: transparent; color: #c2d6cf; font-size: 11px; }
.nbk-actions > button:hover { background: #a8edcf0b; border-color: #729a8e; }
.nbk-save-note { font-size: 10px; color: #8fa8ac; line-height: 1.8; margin: 12px 0 0; padding-top: 4px; }
.nbk-over { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 15px; background: #0b1b25ed; border-radius: 10px; text-align: center; }
.nbk-over > div { max-width: 310px; }
.nbk-over-mark { display: block; color: #b3eccf; font-size: 40px; line-height: 1; margin-bottom: 14px; }
.nbk-over h2 { font-size: clamp(25px, 3.5vw, 35px); font-weight: 600; letter-spacing: -.8px; margin: 12px 0; }
.nbk-final-score { display: block; font-size: 40px; color: #b6f1d5; line-height: 1; font-variant-numeric: tabular-nums; }
.nbk-final-label { display: block; color: #9bb8b0; font-size: 8px; letter-spacing: 2px; margin: 7px 0 21px; }
.nbk-primary { min-height: 46px; padding: 11px 22px; border: 0; border-radius: 6px; background: #b3edce; color: #173d32; font-size: 13px !important; font-weight: 650 !important; }
.nbk-primary:hover { background: #d3fce3; }.nbk-primary > span { margin-left: 25px; }
.nbk-dialog { max-width: min(410px, calc(100vw - 30px)); border: 1px solid #45635e; border-radius: 15px; padding: 28px; color: #e4f3ec; background: #162a30; text-align: center; }
.nbk-dialog::backdrop { background: #071019c9; }
.nbk-dialog h2 { font-size: 25px; letter-spacing: -.5px; margin: 15px 0; }.nbk-dialog p { font-size: 12px; color: #adc2c0; line-height: 1.8; }
.nbk-dialog form > div { display: flex; gap: 12px; justify-content: center; margin-top: 22px; }
.nbk-dialog button { min-height: 46px; padding: 10px 15px; border-radius: 6px; border: 1px solid #56716e; background: transparent; color: #c8ded4; font-size: 12px; }
.nbk-dialog button.nbk-primary { background: #b3edce; color: #173d32; border-color: transparent; }
.nbk-ghost { position: fixed; top: 0; left: 0; z-index: 1050; pointer-events: none; display: grid; gap: 4px; opacity: .95; transform-origin: top left; will-change: transform; contain: layout style; }
.nbk-ghost .nbk-block { border-radius: 5px; box-shadow: inset 0 2px 0 #ffffff60, inset 0 -3px 0 #0003; }.nbk-ghost.invalid { opacity: .56; }
.nbk-input-trace { margin-top: 24px; padding: 18px; border: 1px solid #526d62; border-radius: 10px; background: #14282d; color: #d8eee4; font-size: 12px; line-height: 1.6; }
.nbk-input-trace h2 { font-size: 17px; margin: 0 0 10px; }.nbk-input-trace p { margin: 8px 0; }
.nbk-input-trace button { min-height: 44px; padding: 8px 13px; border: 1px solid #87b9a2; border-radius: 6px; color: #d9eee5; background: #214238; font: inherit; }
.nbk-trace-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.nbk-input-trace label { display: block; margin-top: 15px; }.nbk-input-trace textarea { display: block; width: 100%; margin: 7px 0 12px; padding: 9px; color: #e4f2ed; background: #09191e; border: 1px solid #608075; font: 11px/1.5 monospace; }
.nbk-input-trace.recording { position: fixed; top: 75px; right: 12px; z-index: 1100; max-width: min(260px, calc(100vw - 24px)); padding: 12px; margin: 0; font-size: 11px; }
.nbk-input-trace.recording h2, .nbk-input-trace.recording > p:first-of-type, .nbk-input-trace.recording #nbk-trace-start { display: none; }
@keyframes nbk-seat { 0% { transform: scale(.75); opacity: .5; } 65% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes nbk-clear { 0% { filter: brightness(1); transform: scale(1); opacity: 1; } 30% { filter: brightness(1.6); transform: scale(1.04); opacity: 1; } 100% { filter: brightness(1.5); transform: scale(.25); opacity: 0; } }
@keyframes nbk-message { 0% { opacity: 0; transform: translateY(8px) scale(.95); } 15%, 65% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-18px) scale(1.02); } }
@media (max-width: 820px) { .nbk-page { max-width: 540px; }.nbk-piece { --piece-base: clamp(18px, 5vw, 26px); } }
@media (max-width: 480px) { .content-page:has(.nbk-page) { padding: 18px 12px 26px; }.nbk-heading { margin-bottom: 18px; gap: 9px; }.nbk-heading h1 { font-size: 36px; }.nbk-heading h1 > span { font-size: 21px; margin-left: 8px; }.nbk-heading > a { font-size: 10px; }.nbk-hud { padding: 13px 15px; grid-template-columns: 1.2fr .8fr 1fr 36px; gap: 8px; }.nbk-hud > div > span { font-size: 8px; letter-spacing: 1.2px; }.nbk-hud strong { font-size: 20px; }.nbk-hud .nbk-score strong { font-size: 27px; }.nbk-sound { width: 36px; }.nbk-field-shell { padding: 0 9px 7px; }.nbk-field-caption { font-size: 9px; letter-spacing: .6px; padding: 9px 3px; }.nbk-board, .nbk-row { gap: 3px; }.nbk-board { padding: 6px; }.nbk-cell { border-radius: 4px; }.nbk-cell::after { inset: 4px 5px auto; height: 1.5px; }.nbk-tray { gap: 5px; }.nbk-slot { min-height: 99px; padding-bottom: 17px; }.nbk-actions { margin-top: 6px; }.nbk-over-mark { font-size: 30px; margin-bottom: 10px; }.nbk-final-score { font-size: 32px; }.nbk-final-label { margin-bottom: 15px; } }
@media (max-width: 350px) { .nbk-heading h1 { font-size: 31px; }.nbk-heading h1 > span { font-size: 18px; }.nbk-heading > a { font-size: 9px; }.nbk-slot { min-height: 91px; }.nbk-over h2 { font-size: 24px; } }
@media (prefers-reduced-motion: reduce) { .nbk-page *, .nbk-page *::before, .nbk-page *::after { animation: none !important; transition: none !important; }.nbk-celebration { opacity: 1; }.nbk-ghost { filter: none; } }