/* Natural One · loaded after ../straits-deal/style.css, which supplies the page chrome, buttons, seats, hand tray, card flights and dialogs.
   This file adds only what is Natural One's own: its cards, the pile in the middle of the table, and the colour in force lighting the room. */
:root{--table-art:url('./art/table.webp');--back-art:url('./art/back.webp');--hero-art:url('./art/hero.webp');
 --red:#c8332b;--yellow:#e2ac27;--green:#36894a;--blue:#2b62b8;--vellum:#f3ead3;--live:#4e666d;--pw:clamp(84px,14vh,156px)}
body[data-colour="red"]{--live:var(--red)}body[data-colour="yellow"]{--live:var(--yellow)}body[data-colour="green"]{--live:var(--green)}body[data-colour="blue"]{--live:var(--blue)}
.sd-match{background:radial-gradient(62% 48% at 50% 40%,color-mix(in srgb,var(--live) 34%,transparent),transparent 72%),linear-gradient(180deg,#0a1014c7,#0a1014eb),var(--table-art) center/cover,var(--bg);transition:background-color .3s}

/* Cards: a colour field, an index in two corners, and either a numeral on a tilted disc or a picture. */
.sd-card.n1-card{--c:#1b2227;--d:#0c1114;border:calc(var(--w)*.045) solid var(--vellum);border-radius:calc(var(--w)*.1);background:radial-gradient(130% 100% at 30% 10%,color-mix(in srgb,var(--c) 90%,#fff),var(--c) 50%,color-mix(in srgb,var(--c) 70%,var(--d)));color:#fff;font-family:var(--font);text-align:center;display:block}
.n1-card[data-color="red"]{--c:#c8332b;--d:#8f1f1a}.n1-card[data-color="yellow"]{--c:#e2ac27;--d:#a87a0d}.n1-card[data-color="green"]{--c:#36894a;--d:#1f5c30}.n1-card[data-color="blue"]{--c:#2b62b8;--d:#173f80}
.n1-corner{position:absolute;top:calc(var(--w)*.03);left:calc(var(--w)*.05);z-index:2;display:grid;justify-items:center;line-height:1;text-shadow:0 calc(var(--w)*.012) 0 #0009,0 0 calc(var(--w)*.03) #0006}
.n1-corner b{font:850 calc(var(--w)*.2)/1 var(--font);letter-spacing:-.04em}
.n1-corner i{font:normal calc(var(--w)*.09)/1.1 var(--font)}
.n1-corner.flip{top:auto;left:auto;right:calc(var(--w)*.05);bottom:calc(var(--w)*.03);transform:rotate(180deg)}
.n1-mid{position:absolute;inset:14% 6%;display:grid;place-items:center}
.n1-glyph{display:grid;place-items:center;width:92%;aspect-ratio:1/1.32;border-radius:50%;transform:rotate(-24deg);background:var(--vellum);box-shadow:inset 0 0 0 calc(var(--w)*.02) #0002,0 calc(var(--w)*.02) calc(var(--w)*.05) #0005;color:var(--d);font:900 calc(var(--w)*.56)/1 var(--font);letter-spacing:-.06em}
.n1-glyph>span{transform:rotate(24deg);text-shadow:calc(var(--w)*.014) calc(var(--w)*.02) 0 color-mix(in srgb,var(--c) 55%,#fff)}
.n1-card:not([data-kind="number"]) .n1-glyph{font-size:calc(var(--w)*.4)}
.n1-card[data-color="wild"] .n1-glyph{background:conic-gradient(from 45deg,var(--red) 0 25%,var(--blue) 0 50%,var(--green) 0 75%,var(--yellow) 0);color:#fff}
.n1-card[data-color="wild"] .n1-glyph>span{text-shadow:0 calc(var(--w)*.02) 0 #000a}
.n1-art{position:absolute;display:block;object-fit:contain;filter:drop-shadow(0 calc(var(--w)*.02) calc(var(--w)*.03) #0007)}
/* A number keeps its numeral and the colour's sigil sits in the corner; a symbol card is its picture. */
.n1-card[data-kind="number"] .n1-art{right:-9%;bottom:-9%;width:58%;height:auto}
.n1-card:not([data-kind="number"]) .n1-art{inset:-3% -9%;width:118%;height:106%}
.n1-card:not([data-kind="number"]) .n1-mid:has(.n1-art) .n1-glyph{visibility:hidden}

/* Table */
.n1-main{min-height:0;min-width:0;overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;padding-bottom:calc(var(--hand-peek) + 8px)}
.n1-seats{display:flex;gap:10px;min-width:0}
.n1-seats:empty{display:none}
.n1-top{flex:none;justify-content:center;align-items:stretch;padding:10px clamp(10px,2vw,20px) 0}
/* The middle of the table: a player on the left, the pile, a player on the right. */
.n1-centre{flex:1 0 auto;display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr) minmax(0,auto);align-items:center;gap:8px;padding:0 clamp(8px,1.5vw,18px)}
.n1-centre>.n1-stage{grid-column:2}
.n1-side{flex-direction:column;justify-content:center;width:clamp(150px,17vw,240px)}
.n1-side:empty{display:block;width:0}
.n1-side .n1-seat.sd-seat{flex:none;min-width:0}
.n1-side .sd-seat-head{flex-wrap:wrap}
.n1-side .sd-seat-head h2{flex:1 1 calc(100% - 50px)}
.n1-side .sd-stats{margin-left:0;flex:1 0 100%;justify-content:flex-start}
.n1-side .sd-counter{justify-items:start}
.n1-seat.sd-seat{flex:0 1 300px;min-width:170px;padding:8px 10px;transition:transform .2s var(--ease),border-color .2s}
.n1-seat.sd-seat.is-turn{transform:translateY(3px);box-shadow:0 0 0 1px var(--lime),0 10px 26px #0008}
.n1-seat .sd-seat-head{margin-bottom:6px}
.n1-seat .sd-stats{gap:10px}
.sd-tag.call{background:var(--gold);color:#221c02}
.n1-backs{display:flex;height:calc(var(--bw)*1.44);--bw:30px;padding-left:2px}
.n1-backs i{flex:none;width:var(--bw);height:calc(var(--bw)*1.44);margin-left:calc(var(--bw)*-.62);border-radius:4px;border:1.5px solid var(--vellum);background:var(--back-art) center/cover,#141c21;box-shadow:-2px 1px 4px #0008}
.n1-backs i:first-child{margin-left:0}
.n1-backs b{align-self:center;margin-left:8px;font:700 12px var(--mono);color:var(--muted)}
.n1-left{display:flex;flex-wrap:wrap;gap:3px}
.n1-left .sd-card{--w:34px;box-shadow:0 2px 5px #0008}
.n1-stage{min-width:0;display:grid;grid-template-rows:auto auto;justify-items:center;align-content:center;gap:16px;padding:10px clamp(10px,2vw,20px) 6px;position:relative}
.n1-piles{--hw:var(--pw);display:flex;align-items:center;gap:clamp(16px,4vw,44px);padding:14px 22px 30px;position:relative}
.n1-piles .sd-stack{box-shadow:0 0 0 4px color-mix(in srgb,var(--live) 80%,transparent),0 0 46px color-mix(in srgb,var(--live) 65%,transparent);border-radius:calc(var(--hw)*.1);transition:box-shadow .3s}
.n1-piles .sd-stack .sd-card{--w:var(--hw)}
button.sd-deck.n1-deck{position:relative;min-height:0;padding:0;width:var(--hw);height:calc(var(--hw)*1.44);border:calc(var(--hw)*.045) solid var(--vellum);border-radius:calc(var(--hw)*.1);background:var(--back-art) center/cover,#141c21;color:var(--text);transition:transform .12s var(--ease),box-shadow .2s}
button.sd-deck.n1-deck:hover:not(:disabled){background:var(--back-art) center/cover,#141c21;transform:translateY(-4px)}
button.sd-deck.n1-deck:disabled{opacity:1;cursor:default}
button.sd-deck.n1-deck.can{box-shadow:0 0 0 3px var(--lime),0 1px 0 #24424c,0 var(--depth,4px) 0 #132830,0 calc(var(--depth,4px) + 8px) 18px #000a}
.n1-deck b{padding:3px 12px;border-radius:999px;background:#0a1014d9;font-size:calc(var(--hw)*.17)}
.n1-deck span{position:absolute;left:50%;bottom:-26px;transform:translateX(-50%);white-space:nowrap;padding:2px 9px;border-radius:999px;background:#0a1014cc;font:600 11px var(--mono);letter-spacing:.06em;color:var(--muted);text-transform:none}
.n1-deck.can span{color:var(--lime)}
.n1-flow{display:grid;gap:8px;justify-items:start;min-width:112px}
.n1-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;border:2px solid var(--vellum);background:var(--live);color:#fff;font:750 15px/1.2 var(--font);text-shadow:0 1px 0 #0008}
body[data-colour="yellow"] .n1-chip{color:#231a02;text-shadow:none}
.n1-dir{display:inline-flex;align-items:center;gap:6px;font:600 12px var(--mono);color:var(--muted)}
.n1-dir b{display:inline-block;font:700 22px/1 var(--font);color:var(--text)}
.n1-count{font:600 12px var(--mono);color:var(--gold)}
.n1-now{align-self:start;display:grid;gap:7px;justify-items:center;text-align:center;width:min(100%,640px);padding:10px 16px 12px;border:1px solid var(--line-2);border-radius:14px;background:#131d23e6;backdrop-filter:blur(6px);box-shadow:0 10px 24px #0006}
.n1-now>*{grid-area:auto}
.n1-now .sd-subline{justify-self:center}
.n1-now .sd-timer{width:100%}
.n1-now .sd-buttons,.n1-now .sd-lobby{justify-content:center}
.n1-now .sd-prompt{justify-items:center}
.n1-check{display:flex;align-items:flex-start;gap:9px;font:500 13px/1.35 var(--font);color:var(--text);letter-spacing:0;text-align:left;cursor:pointer}
.n1-check input{flex:none;min-height:0;width:18px;height:18px;margin:1px 0 0;padding:0;accent-color:var(--lime)}
.n1-check span{display:grid;gap:1px}
.n1-check small{color:var(--muted);font-size:12px}
.n1-house summary{cursor:pointer;font:500 12px var(--mono);letter-spacing:.04em;color:var(--muted);padding:4px 0}
.n1-house[open] summary{color:var(--text)}
.n1-house-list{display:grid;gap:8px;padding:6px 0 4px}
.n1-house-list small{font-size:11.5px;line-height:1.3}
.n1-house-list.compact{grid-template-columns:repeat(2,auto);gap:4px 14px;padding:0}
.n1-house-list.compact small{display:none}
.n1-house-note{font:500 11px var(--mono);color:var(--faint);max-width:150px}
button.n1-colour{--c:var(--panel-3);background:var(--c);border-color:var(--vellum);color:#fff;text-shadow:0 1px 0 #0008;min-width:104px}
button.n1-colour:hover:not(:disabled){background:color-mix(in srgb,var(--c) 82%,#fff)}
button.n1-colour[data-color="red"]{--c:var(--red)}button.n1-colour[data-color="green"]{--c:var(--green)}button.n1-colour[data-color="blue"]{--c:var(--blue)}
button.n1-colour[data-color="yellow"]{--c:var(--yellow);color:#231a02;text-shadow:none}
button.n1-owe{min-height:58px;padding:.7rem 2rem;font-size:19px;font-weight:800;border-radius:14px;box-shadow:0 5px 0 #7d8f3c;transition:transform .05s,box-shadow .05s}
button.n1-owe:active:not(:disabled){transform:translateY(5px);box-shadow:0 0 0 #7d8f3c}
button.n1-catch{min-height:42px}
button.n1-catch:disabled{opacity:.38}
.n1-together{justify-content:center;align-items:center;font-size:12.5px;color:var(--muted)}
.n1-together input{width:16px;height:16px}
button.n1-call{background:var(--gold);border-color:var(--gold);color:#221c02}
button.n1-call:hover:not(:disabled){background:#ffe58f}
button.n1-call[aria-pressed="true"]{box-shadow:0 0 0 3px var(--vellum)}
.n1-pulse{animation:n1-pulse .7s ease-in-out infinite alternate}
@keyframes n1-pulse{to{transform:scale(1.06);box-shadow:0 0 0 5px #ffffff33}}
/* The table says out loud what just happened. */
.n1-shout{position:absolute;left:50%;top:34%;z-index:6;pointer-events:none;padding:6px 22px;border-radius:16px;border:3px solid var(--vellum);background:#0a1014f2;color:#fff;font:900 clamp(30px,6vw,60px)/1.1 var(--font);letter-spacing:-.03em;white-space:nowrap;opacity:0;transform:translate(-50%,-50%) rotate(-5deg)}
.n1-shout.go{animation:n1-shout 1.25s var(--ease) both}
@keyframes n1-shout{0%{opacity:0;transform:translate(-50%,-50%) rotate(-5deg) scale(.4)}14%{opacity:1;transform:translate(-50%,-50%) rotate(-5deg) scale(1.12)}24%{transform:translate(-50%,-50%) rotate(-5deg) scale(1)}78%{opacity:1}100%{opacity:0;transform:translate(-50%,-72%) rotate(-5deg) scale(1)}}
.n1-you{flex:none;display:flex;justify-content:center;padding:0 clamp(10px,2vw,20px)}
.n1-you:empty{display:none}
.n1-you .n1-seat.sd-seat{flex:0 1 420px;padding:6px 12px;border-radius:999px;border-top-width:1px}
.n1-you .n1-seat .sd-seat-head{margin:0}

/* Hand: the borrowed fan, spaced so even a big hand fits the width, with what can be played standing up. */
.n1-page .sd-hand-card{margin-left:calc(-1*(var(--hw) - min(var(--hw)*.72,(100vw - var(--hw) - 120px)/var(--n,7))));transform:translateY(calc(var(--drop,0px) + var(--lift,0px))) rotate(var(--rot,0deg))}
.n1-page .sd-hand-card:first-child{margin-left:0}
.n1-page .sd-hand-card.can{--lift:calc(var(--hw)*-.14)}
.n1-page .sd-hand-card.can .sd-card{box-shadow:0 0 0 3px var(--lime),0 10px 24px #000c}
.n1-page .sd-hand-card.grouped{--lift:calc(var(--hw)*-.24)}
.n1-page .sd-hand-card.grouped .sd-card{box-shadow:0 0 0 4px var(--vellum),0 10px 24px #000c}
.n1-page .sd-hand-card.dull .sd-card{filter:brightness(.7) saturate(.8)}
.n1-page .sd-hand-card.picked .sd-card{box-shadow:0 0 0 4px var(--vellum),0 10px 24px #000c}
.n1-page .sd-ghost-back{border:2px solid var(--vellum);background:var(--back-art) center/cover,#141c21}
.n1-page .sd-drag .sd-card{--w:128px}
body.dragging .n1-stage.drop-ok .sd-stack{outline:2px dashed #9fdbe0;outline-offset:8px}
body.dragging .n1-stage.drop-hot{background:none}
body.dragging .n1-stage.drop-hot .sd-stack{outline:3px solid var(--lime);outline-offset:8px}

/* Entry page: the party and a fan of cards instead of a street. */
body.n1-page:not(.in-match){background:linear-gradient(90deg,#0a1014 0,#0a1014e6 30%,#0a101455 60%,#0a1014b3 100%),linear-gradient(0deg,#0a1014 4%,transparent 45%),var(--hero-art) 70% center/cover fixed,radial-gradient(900px 500px at 85% 0,#3aa75733,transparent 60%),radial-gradient(800px 500px at 0 100%,#e2473c2b,transparent 60%),var(--bg)}
.n1-fan{display:flex;margin:6px 0 22px;padding-left:8px}
.n1-fan .sd-card{--w:74px;margin-left:-22px;transform:rotate(var(--r,0deg)) translateY(var(--y,0));transform-origin:50% 120%;box-shadow:0 8px 18px #000a}
.sd-gallery .sd-card.n1-card{--w:92px}
.sd-rules .n1-card .n1-glyph{color:var(--d)}
.sd-rules .n1-card[data-color="wild"] .n1-glyph{color:#fff}

/* Short windows: smaller piles and a tighter middle so nothing is hidden behind the hand. */
@media (max-height:900px) and (min-width:641px){
 :root{--pw:clamp(84px,16vh,128px)}
 .n1-stage{gap:8px;padding-top:6px}
 .n1-piles{padding:8px 18px}
 .n1-now{padding:8px 14px 9px;gap:5px}
 .n1-now button{min-height:36px;padding:.35rem .8rem}
 .n1-backs{--bw:24px}
 .n1-seat.sd-seat{padding:6px 10px}
}
@media (max-height:700px) and (min-width:641px){
 :root{--pw:76px}
 .n1-deck span{display:none}
 .n1-you{display:none}
}
/* Phones: rivals in a row you can swipe, the pile and the question in the middle, the hand as a strip of whole cards. */
@media (max-width:640px){
 :root{--pw:clamp(62px,19vw,96px)}
 .n1-main{padding-bottom:calc(var(--hand-peek) + 4px)}
 .n1-top{gap:6px;padding:6px 8px 0}
 .n1-seat.sd-seat{flex:0 1 200px;min-width:0;padding:5px 8px}
 .n1-centre{gap:4px;padding:0 4px}
 .n1-side{width:74px}
 .n1-side .n1-seat.sd-seat{padding:5px 4px}
 .n1-side .sd-seat-head{flex-direction:column;align-items:center;gap:3px;margin:0}
 .n1-side .sd-seat-head h2{flex:none;max-width:100%;font-size:12px}
 .n1-side .sd-tag:not(.turn):not(.call){display:none}
 .n1-side .sd-stats{flex:none;justify-content:center}
 .n1-side .sd-counter{justify-items:center}
 .n1-side .n1-backs,.n1-side .n1-left{display:none}
 .n1-piles{flex-wrap:wrap;justify-content:center}
 .n1-flow{flex:1 0 100%;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 10px}
 .n1-house-note{display:none}
 .n1-piles .sd-stack{margin:0 4px}
 .n1-deck span{display:none}
 .n1-backs{--bw:18px}
 .n1-stage{gap:8px;padding:6px 8px 4px}
 .n1-piles{gap:14px;padding:8px 6px}
 .n1-flow{min-width:0}
 .n1-chip{font-size:13px;padding:4px 9px}
 .n1-now{padding:8px 10px;gap:5px}
 .n1-now button{min-height:40px;padding:.4rem .8rem;font-size:14px}
 .n1-you{display:none}
 /* The hand overlaps like held cards, as tightly as it must to fit the screen (down to a strip that still shows each index),
    and only then scrolls sideways. What can be played stands a little proud. */
 :root{--hand-peek:142px}
 .n1-page .sd-hand{gap:0;padding:16px 8px 0}
 .n1-page .sd-hand-card,.n1-page .sd-hand-card.can,.n1-page .sd-hand-card:hover,.n1-page .sd-hand-card.picked{margin-left:calc(-1*(var(--hw) - clamp(36px,(100vw - var(--hw) - 32px)/max(1,var(--n,7) - 1),var(--hw) + 6px)));transform:none}
 .n1-page .sd-hand-card:first-child{margin-left:auto}
 .n1-page .sd-hand-card.can,.n1-page .sd-hand-card.can:hover{transform:translateY(-10px)}
 .n1-page .sd-hand-card.picked,.n1-page .sd-hand-card.picked:hover{transform:translateY(-14px)}
 .n1-page .sd-hand-card.can .sd-card{box-shadow:0 0 0 3px var(--lime),-3px 0 8px #0008}
 .n1-page .sd-hand-card .sd-card{box-shadow:-3px 0 8px #0008}
 .n1-fan .sd-card{--w:56px}
}
@media (prefers-reduced-motion:reduce){.n1-shout.go{animation:none;opacity:0}}
/* A hand of this game is read all the time, so more of it shows at rest than in Straits Deal. */
@media (min-width:641px){
 :root{--hand-peek:calc(var(--hw)*1.12 + 44px)}
 .n1-page .sd-hand,body.n1-page.dragging .sd-hand-tray .sd-hand,body.n1-page.dragging .sd-hand-tray:hover .sd-hand{transform:translateY(22%)}
}
@media (max-height:700px) and (min-width:641px){
 :root{--hand-peek:calc(var(--hw)*.8 + 8px)}
 .n1-page .sd-hand,body.n1-page.dragging .sd-hand-tray .sd-hand,body.n1-page.dragging .sd-hand-tray:hover .sd-hand{transform:translateY(46%)}
}
/* Room chat lives in the drawer with the log, so nothing floats over the hand. */
#room-chat-slot:empty{display:none}
#room-chat-slot .room-chat__log{height:150px}

/* Looks. A look is the viewer's own (art.js): the body carries data-look and each one repoints the three big pictures and
   retunes the colours. The card pictures themselves are fetched by art.js from the look's folder. */
.n1-looks{display:grid;gap:8px;margin-top:18px;font:500 12px var(--mono);letter-spacing:.04em;color:var(--muted)}
.n1-look-list{display:flex;flex-wrap:wrap;gap:8px}
button.n1-look{display:grid;gap:2px;justify-items:start;text-align:left;max-width:250px;min-height:0;padding:.55rem .8rem;background:#131d23cc;color:var(--text);border-color:var(--line-2);font-weight:500}
button.n1-look:hover:not(:disabled){background:var(--panel-3)}
button.n1-look strong{font-size:14px}
button.n1-look span{font:400 12px/1.3 var(--font);letter-spacing:0;color:var(--muted)}
button.n1-look[aria-checked="true"]{border-color:var(--lime);box-shadow:0 0 0 1px var(--lime)}
/* Pride: the same four colours a touch brighter, paper-white borders, and a rainbow edge on the wilds. */
body[data-look="pride"]{--table-art:url('./skins/pride/table.webp');--back-art:url('./skins/pride/back.webp');--hero-art:url('./skins/pride/hero.webp');--red:#e0251b;--yellow:#f2b20c;--green:#10893f;--blue:#2a4fd0;--vellum:#fff6ea}
body[data-look="pride"] .n1-card[data-color="red"]{--c:#e0251b;--d:#9a1410}
body[data-look="pride"] .n1-card[data-color="yellow"]{--c:#f2b20c;--d:#a87700}
body[data-look="pride"] .n1-card[data-color="green"]{--c:#10893f;--d:#0a5a28}
body[data-look="pride"] .n1-card[data-color="blue"]{--c:#2a4fd0;--d:#162d8a}
body[data-look="pride"] .sd-card.n1-card[data-color="wild"]{--c:#2b1638;--d:#120818;border-color:transparent;background:radial-gradient(130% 100% at 30% 10%,#3d234c,#2b1638 50%,#1c0e26) padding-box,linear-gradient(160deg,#e40303,#ff8c00 22%,#ffed00 40%,#008026 58%,#2a4fd0 78%,#732982) border-box}