.note-names{margin:34px 0;padding:26px;border:1px solid var(--rule-strong);border-radius:18px;background:var(--white)}
.note-names header p{max-width:70ch}
.nn-tree{display:grid;gap:10px;margin:22px 0 10px}
.nn-row{display:grid;grid-template-columns:190px 68px minmax(0,1fr);gap:12px;align-items:center}
.pizza{display:block;flex:none}.pz-crust{fill:#d9a066}.pz-slice{fill:#ffe9a8;stroke:#c97a2a;stroke-width:1.1;transition:fill .1s}.pz-slice.is-on{fill:#ff9f1c}.pz-pep{fill:#c0392b;pointer-events:none}
.nn-row-label{text-align:left;border:1px solid var(--rule-strong);background:var(--paper-2);border-radius:10px;padding:8px 10px;cursor:pointer;font:inherit;color:inherit;min-height:52px;display:grid;gap:2px}
.nn-row-label:hover,.nn-row.is-playing .nn-row-label{background:var(--sun-pale);border-color:var(--sun-deep)}
.nn-uk{font:800 15px var(--display)}.nn-us{font-size:11px;color:var(--ink-soft);font-family:var(--mono)}
.nn-cells{display:flex;gap:4px;min-width:0}
.nn-cell{flex:1;min-width:0;height:52px;border:1px solid var(--rule-strong);border-radius:8px;background:var(--paper);display:flex;align-items:center;justify-content:center;overflow:hidden;transition:background .1s}
.nn-cell img{height:44px;width:auto;max-width:100%}
.nn-cells-16 .nn-cell{height:22px;border-radius:4px}
.nn-cell.is-on{background:var(--sun);border-color:var(--sun-deep)}
.nn-tree-note{font-size:14px;color:var(--ink-soft);margin:0 0 6px}
.nn-game{margin-top:26px;padding:22px;border-radius:14px;background:var(--teal-pale)}
.nn-game-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}.nn-game-head h3{margin:0}
.nn-score{margin:0;font-family:var(--mono);font-size:13px;color:var(--teal-deep)}
.nn-hint{font-size:15px;margin:10px 0 14px}
.nn-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.nn-col{display:grid;gap:8px}
.nn-tile{display:grid;gap:4px;justify-items:center;text-align:center;min-height:56px;padding:10px 8px;border:2px solid var(--rule-strong);border-radius:12px;background:var(--white);font:inherit;color:inherit;cursor:pointer;transition:transform .12s,background .12s,border-color .12s}
.nn-tile:hover{border-color:var(--ink)}
.nn-tile[aria-pressed="true"]{border-color:var(--ink);background:var(--sun-pale);transform:translateY(-2px)}
.nn-tile.is-done{background:var(--teal);border-color:var(--teal-deep);color:var(--ink);cursor:default;opacity:.95}
.nn-tile.is-wrong{border-color:var(--coral);background:var(--coral-pale);animation:nn-shake .4s}
.nn-tile img{height:46px;width:auto}
.nn-big{font:800 16px var(--display)}.nn-small{font-size:11px;color:var(--ink-soft);font-family:var(--mono)}
.nn-status{margin:14px 0 0;font-size:15px;min-height:24px}
.nn-controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.nn-round[aria-pressed="true"]{background:var(--sun);border-color:var(--ink)}
.nn-tricks{margin-top:26px}
.nn-tricks ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.nn-tricks li{display:grid;grid-template-columns:64px 52px minmax(0,1fr);gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--rule);border-radius:12px;background:var(--paper-2);font-size:15px;line-height:1.5}
.nn-tricks li img{height:52px;width:auto;justify-self:center}
.nn-chant{margin:16px 0 0;padding:14px 16px;border-radius:12px;background:var(--sun-pale);font-size:15px}
.nn-chant i{font-family:var(--mono);font-style:normal;color:var(--teal-deep)}
@keyframes nn-shake{0%,100%{transform:none}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media(max-width:600px){.note-names{padding:18px;margin-left:-4px;margin-right:-4px}.nn-row{grid-template-columns:56px minmax(0,1fr);gap:6px 10px}.nn-row-label{grid-column:1/-1;min-height:0}.nn-row .pizza{width:56px;height:56px}.nn-cells{gap:3px}.nn-cell{height:44px}.nn-cell img{height:36px}.nn-cells-8 .nn-cell img{height:28px}.nn-cells-16 .nn-cell{height:16px}.nn-cols{gap:8px}.nn-tile{padding:8px 4px;min-height:52px}.nn-big{font-size:14px}.nn-tile img{height:38px}.nn-game{padding:16px}.nn-tricks li{grid-template-columns:44px 44px minmax(0,1fr);gap:8px;font-size:14px}.nn-tricks li img{height:40px}.nn-tricks li .pizza{width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){.nn-tile,.nn-cell{transition:none}.nn-tile.is-wrong{animation:none}}