/* RAMI presentation. Family palette from LKDOUB / Hezz Jouj; no gameplay styles copied. */
:root{--bg:#061b22;--panel:#0a3039;--gold:#f1c873;--cream:#fff5de;--mint:#a3d8cd;--line:#e8bd6649;--card-width:88px;--card-step:42px}
[hidden]{display:none!important}
html,body{max-width:100%;min-height:100%;margin:0}
body{background:radial-gradient(ellipse at 50% 0,#10545a60,transparent 65%),#061b22;color:var(--cream);font:14px 'Outfit','DM Sans',system-ui,sans-serif}
body::before{content:'';position:fixed;inset:0;pointer-events:none;opacity:.08;background-image:repeating-conic-gradient(from 45deg,#a3d8cd 0 25%,transparent 0 50%);background-size:54px 54px;mask-image:linear-gradient(#000,transparent 85%)}
button,input,select{font:inherit;min-height:44px;border:1px solid var(--line);border-radius:10px;margin:0;padding:9px 13px}
button{color:var(--cream);background:#123e46;touch-action:manipulation;transition:background .12s,border-color .12s}
button:hover:not(:disabled){background:#1a5055;border-color:var(--gold)}
button:disabled{opacity:.45;cursor:not-allowed}
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,.hand-viewport:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
input,select{color:var(--cream);background:#051c24;min-width:0;max-width:100%}
section{padding:0;background:transparent;border-radius:0}
h1,h2,h3,p{overflow-wrap:anywhere}
.brand-bar{height:64px;max-width:none;width:100%;margin:0;padding:0 clamp(12px,3vw,40px);display:flex;align-items:center;gap:20px;background:linear-gradient(#09262c,#05171e);border-bottom:1px solid var(--line);position:relative}
.brand{display:flex;align-items:center;gap:10px;font-weight:850;font-size:16px;letter-spacing:2px;line-height:1.1}
.brand strong{color:var(--gold)}.brand small{display:block;font-size:8px;color:var(--mint);letter-spacing:3px;margin-top:5px}.brand-star{font-size:32px;color:var(--gold)}
.brand-note{margin:auto;color:var(--mint);font-size:12px}.local-badge{font-size:9px;letter-spacing:1.3px;border:1px solid var(--line);border-radius:20px;padding:6px 9px;color:var(--gold)}
main{position:relative;max-width:1240px;width:100%;padding:10px 22px 20px;margin:0 auto;min-width:0}
.join-panel{max-width:570px;margin:6vh auto 20px;padding:30px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(145deg,#103b43ed,#08252ced);box-shadow:0 20px 60px #0005}
.eyebrow{font-size:10px;letter-spacing:2px;color:var(--gold);font-weight:750}.join-panel h1{font-size:clamp(32px,4vw,46px);line-height:1.12;letter-spacing:-1.5px;color:var(--cream);margin:20px 0}.join-panel h1 em{color:var(--gold);font-style:normal}.intro{color:var(--mint)}
.join-fields{display:grid;grid-template-columns:1.3fr 1fr;gap:12px;margin:24px 0 12px}label{display:flex;flex-direction:column;gap:7px;margin:0;font-size:12px;color:#e8d4a4;min-width:0}label input,label select{width:100%}
.gold-button,.rami-button{background:linear-gradient(115deg,#fce6a1,#d7a34f);color:#14383b;font-weight:850;border-color:#ffe0a3}.join-panel>#create{width:100%}.join-code{display:flex;gap:10px;align-items:end;margin-top:20px}.join-code label{flex:1}#code{letter-spacing:3px;text-transform:uppercase}.lobby-foot{color:var(--mint);font-size:11px;text-align:center;margin:22px 0 0}
#status{margin:0;min-height:0;color:#ffe4a1;font-size:12px;line-height:1.5}#status:not(:empty){padding:8px 12px;margin:0 0 8px;background:#183b3e;border:1px solid var(--line);border-radius:9px}
#room{padding:0;min-width:0}.room-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px}#roomTitle{font-size:12px;letter-spacing:1.5px;white-space:nowrap;margin:0;padding:10px 12px;background:#0a3039;border:1px solid var(--line);border-radius:10px}.room-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.room-actions button,.room-actions summary{font-size:11px;min-height:40px;padding:10px 12px}.exit-button{color:#ffc1b6;border-color:#b9757255}#sound:disabled{opacity:.7;color:#b7c8c3;background:#0d2c33}
#ranking{position:relative;z-index:20}#ranking summary{cursor:pointer;background:#123e46;border:1px solid var(--line);border-radius:10px;font-weight:750}#scores{position:absolute;right:0;top:calc(100% + 6px);width:min(290px,80vw);padding:10px 16px;border:1px solid var(--gold);border-radius:12px;background:#08252cf5;box-shadow:0 10px 30px #0008}#scores p{margin:9px 0;line-height:1.5;font-size:13px}
#turn{margin:0 0 9px;padding:10px 16px;border:1px solid var(--line);border-radius:12px;text-align:center;color:var(--gold);font-weight:700;font-size:13px;background:#0b3036}
#turn.turn-announcement{background:#176b45;color:#fffbea;border-color:#50d68b;box-shadow:0 0 18px #30ed7b22}
#controls{display:flex;gap:7px;justify-content:center;flex-wrap:wrap}#controls:empty{display:none}#controls button{min-height:38px;font-size:12px;margin-bottom:9px}#controls button:first-child{border-color:#a8e4b6;background:#126344;font-weight:750}
.table-wood{border-radius:100px;padding:9px;border:1px solid #e5be78;background:linear-gradient(145deg,#976943,#513522 40%,#92653b);box-shadow:0 0 0 3px #271b13,0 13px 30px #0006;margin:3px 3px 16px}
.table-felt{position:relative;isolation:isolate;min-height:310px;border-radius:92px;border:1px solid #cda760;background:radial-gradient(ellipse at 50% 30%,#18715c,#0c4b43 60%,#073b36);box-shadow:inset 0 0 45px #001f2ba8,0 0 0 2px #3f250f;padding:20px 30px 17px;overflow:hidden}
.table-felt::before{content:'';position:absolute;z-index:-1;inset:10px;border:1px dashed #d9bc6755;border-radius:82px;pointer-events:none}
.felt-brand{position:absolute;top:48%;left:50%;transform:translate(-50%,-50%);font-weight:850;font-size:32px;letter-spacing:5px;opacity:.06;white-space:nowrap;pointer-events:none;z-index:-1}.felt-brand span{display:block;text-align:center;font-size:16px;letter-spacing:9px}
#players{display:flex;align-items:flex-start;justify-content:center;gap:10px;flex-wrap:wrap;position:relative;margin:0 auto 12px;max-width:990px}
.player{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:7px;padding:6px 12px 6px 6px;border:1px solid #d7ae5a66;border-radius:26px;background:#082d32e8;min-width:120px;max-width:180px;flex:1 1 130px;font-size:12px;box-shadow:0 3px 9px #00182044}
.player .player-avatar{width:42px;height:42px;border:2px solid #d4b971;border-radius:50%;object-fit:cover}.player-details{min-width:0}.player-details strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.player-details small{display:block;font-size:10px;color:#bedbd0;line-height:1.5;letter-spacing:0;margin-top:2px}
.player[data-connected=false]{border-style:dashed}.player[data-connected=false] .player-avatar{filter:grayscale(.8)}.player.active-player{background:#176b45;border-color:#70edaa;box-shadow:0 0 12px #32ff9855}.player.active-player .player-avatar{border-color:#6effcf;box-shadow:0 0 8px #6effcf,0 0 20px #22bf9899}
#room[data-phase=playing] .player[data-self=true]{display:none}.player>button{grid-column:1/-1;padding:4px 8px;min-height:30px;font-size:11px}.waiting-player{flex:1 0 100%;margin:0;text-align:center;font-size:11px;color:#d5dfc4}.waiting-player button{padding:4px 7px;font-size:11px;margin-left:7px}
.opponent-card-backs{grid-column:1/-1;justify-content:center;margin:0 4px 2px;max-width:100%;height:28px}.opponent-card-backs .card-art{width:20px;height:28px;aspect-ratio:5/7;border-radius:2px}.opponent-card-backs .card-art+.card-art{margin-left:-12px}
#table{position:relative;display:grid;grid-template-columns:160px 160px;justify-content:center;align-content:center;align-items:start;gap:9px 28px;text-align:center;min-height:205px;margin:0;padding:4px 0 0;border:0;background:transparent}
#table .pile-card{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;width:150px;min-height:155px;max-width:100%;padding:8px;font-size:11px;font-weight:650;border:0;background:transparent;touch-action:none;cursor:grab;overflow:visible}
#table .pile-card:hover:not(:disabled){background:#a3d8cd16}#table .pile-card:disabled{opacity:1;cursor:default;color:#deeadb}#table .pile-card .card-art{width:86px;border-radius:6px;box-shadow:0 4px 10px #0008}#table .stock-pile .card-art{box-shadow:3px 2px #c6b98e,5px 4px #536e5c,7px 6px #b2a680,0 8px 15px #001c29b0}
#table .discard-pile{border:1px dashed #d5d4a655;border-radius:12px}#table .discard-pile:not(:has(img)){background:#082f3222}
#table>.discard-help{grid-column:1/-1;font-size:11px;max-width:420px;color:#d6e7d9;margin:0;line-height:1.4}
#table .game-action{min-height:42px;padding:8px 12px;font-weight:800;font-size:13px}.discard-button{background:#123e46;border-color:#a3d8cd88}
#room:not([data-phase=playing]) #table{display:block;min-height:180px;max-width:100%;padding:10px}
.table-summary{max-width:620px;margin:10px auto 20px;padding:20px;background:#082d32cc;border:1px solid var(--line);border-radius:17px}.table-summary h2{font-size:23px;letter-spacing:-.3px;color:var(--gold);margin:0 0 10px}.table-summary p{font-size:13px;line-height:1.6;color:#d1e5d8;margin:0}
#table>h2{font-size:18px;color:var(--gold)}#table>p{font-size:12px}.winning-discard .card-art{margin:10px auto}
#table section{text-align:left;padding:16px;margin:14px auto;max-width:900px;border:1px solid #d8b56a44;border-radius:14px;background:#062e33e8}#table section h3{font-size:14px;color:var(--gold);margin:0 0 12px}#table section p{font-size:12px;line-height:1.6}.result-cards{gap:4px;margin:8px 0 12px}.result-cards .card-art{width:48px}
.hand-dock{min-width:0;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,#0d333b,#08252c);box-shadow:0 8px 25px #0004;padding:13px 18px 9px}
#room[data-my-turn=true] .hand-dock{border-color:#4dbd82;box-shadow:0 0 0 1px #176b45,0 6px 22px #0004}
.hand-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:9px}.hand-heading h2{font-size:13px;font-weight:800;letter-spacing:.4px;margin:0}.hand-heading p{font-size:11px;color:var(--mint);margin:0;text-align:right}
#hand-tools{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:0 0 3px}#hand-tools button{font-size:11px;min-height:36px;padding:6px 10px}
.hand-viewport{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#ad925b #08252c;min-width:0;padding:0 3px;scroll-padding-inline:15px}
#hand{display:flex;flex-wrap:nowrap;align-items:flex-start;justify-content:flex-start;width:max-content;min-width:100%;min-height:153px;padding:15px 7px 12px;gap:0;border:0;border-radius:0;position:relative}
#hand .hand-card{display:block;position:relative;flex:0 0 var(--card-step);width:var(--card-step);max-width:none;min-width:0;margin:0;overflow:visible;pointer-events:none}
#hand .hand-card:last-child{flex-basis:var(--card-width);width:var(--card-width)}
#hand button.card{position:relative;display:block;pointer-events:auto;min-width:0;width:var(--card-width);height:calc(var(--card-width)*1.4);padding:0;margin:0;border:0;border-radius:6px;background:#fff;color:#132f31;font-size:0;line-height:0;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;box-shadow:-2px 2px 7px #0005;transition:transform .12s}
#hand button.card:active{cursor:grabbing}#hand button.card.red{color:#b51f2a}#hand button.card .card-art{width:100%;height:100%;border-radius:6px;box-shadow:none;object-fit:contain}
#hand button.card:not(:has(.card-art:not([hidden])))::after{content:attr(data-card-label);position:absolute;inset:8px 2px auto;font-size:12px;line-height:1.4;writing-mode:vertical-rl}
#hand button.card.selected{transform:translateY(-10px);outline:3px solid var(--gold);outline-offset:1px;box-shadow:0 0 12px #edcd8280}
#hand .hand-card:has(.card:focus-visible){z-index:2}#hand button.card:focus-visible{transform:translateY(-10px)}
.hand-gap{position:relative;display:flex;flex:0 0 22px;width:22px;height:calc(var(--card-width)*1.4);margin-left:calc(var(--card-width) - var(--card-step));align-items:center;justify-content:center;border:0}
.hand-gap::before{content:'';height:65%;border-left:1px dashed #d5b87888;position:absolute;left:11px;pointer-events:none}.hand-gap button{position:relative;width:22px;min-height:44px;height:44px;border:0;padding:0;margin:0;background:#0b3038;color:var(--gold);font-size:0;z-index:1}.hand-gap button::after{content:'\00d7';font-size:18px}
.hand-help{font-size:10px;line-height:1.5;text-align:center;color:#a9c9bf;margin:3px 0 0}
#hand-tools .group-toggle{font-size:0;min-width:62px}#hand-tools .group-toggle::after{content:'Group';font-size:11px}#hand-tools .group-toggle[aria-pressed=true]{border-color:var(--gold);color:var(--gold);background:#425333}
.dardino-account{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid var(--line);font-size:11px;color:var(--mint)}.dardino-account p{margin:0}.dardino-account a,.dardino-notice a{color:var(--gold)}.dardino-account a{margin-left:auto}.dardino-notice{max-width:1196px;margin:8px auto;padding:10px;border:1px solid var(--gold);border-radius:10px;background:#123e46}
[data-rami-over]{outline:3px solid #91ff70!important;outline-offset:2px;background-color:#39733d!important}.drag-source{opacity:.35!important}.drag-ghost{position:fixed!important;z-index:10000;pointer-events:none!important;opacity:.95;transform:rotate(-4deg);width:var(--card-width)!important;max-width:100px;touch-action:none;box-shadow:0 12px 25px #0008;border-radius:6px}.drag-ghost .card-art{width:100%;height:auto}.drag-ghost.card{font-size:0;padding:0;border:0}
@media(min-width:769px){.opponent-card-backs{display:flex}#hand{justify-content:safe center}}
@media(max-width:768px),(max-width:1024px) and (max-height:600px){
 :root{--card-width:68px;--card-step:27px}
 .brand-bar{height:52px;padding:0 12px;gap:8px}.brand{font-size:13px;letter-spacing:1px}.brand-star{font-size:25px}.brand small{font-size:7px;letter-spacing:2px}.brand-note{display:none}.local-badge{margin-left:auto;font-size:8px}
 main{padding:8px 8px max(12px,env(safe-area-inset-bottom))}.room-bar{gap:6px;flex-wrap:wrap;margin-bottom:7px}#roomTitle{font-size:10px;padding:8px;flex:1}.room-actions{gap:4px;justify-content:flex-end}.room-actions button,.room-actions summary{font-size:10px;padding:8px;min-height:40px}
 #turn{font-size:11px;line-height:1.4;padding:8px;margin-bottom:7px}#controls button{min-height:40px;font-size:11px;margin-bottom:7px}
 .table-wood{border-radius:30px;padding:5px;margin:3px 2px 10px}.table-felt{border-radius:25px;min-height:244px;padding:13px 10px 10px}.table-felt::before{inset:6px;border-radius:20px}.felt-brand{font-size:22px;letter-spacing:2px}
 #players{gap:5px;margin-bottom:7px}.player{grid-template-columns:29px minmax(0,1fr);gap:5px;min-width:0;max-width:none;flex:0 1 calc(33.333% - 4px);padding:4px 6px 4px 4px;border-radius:20px}.player .player-avatar{width:29px;height:29px}.player-details strong{font-size:10px}.player-details small{font-size:9px;line-height:1.3}.opponent-card-backs{display:none!important}.waiting-player{font-size:10px}
 #table{grid-template-columns:112px 112px;gap:7px 20px;min-height:166px;padding-top:2px}#table .pile-card{width:112px;min-height:126px;padding:5px;font-size:10px;gap:5px}#table .pile-card .card-art{width:68px}#table>.discard-help{font-size:10px;line-height:1.35}#table .game-action{font-size:12px;min-height:42px;padding:8px}
 .table-summary{padding:16px 12px;margin:5px auto 12px}.table-summary h2{font-size:19px}.table-summary p{font-size:12px}#table section{padding:10px}.result-cards .card-art{width:40px}
 .hand-dock{padding:10px 8px 7px;border-radius:14px}.hand-heading{gap:8px;margin-bottom:7px}.hand-heading h2{font-size:11px;white-space:nowrap}.hand-heading p{font-size:10px}#hand-tools{gap:4px;margin-bottom:1px}#hand-tools button{font-size:10px;padding:6px;min-height:40px}
 #hand-tools .group-toggle{min-width:48px}#hand-tools .group-toggle::after{font-size:10px}
 #hand{min-height:125px;padding:14px 5px 10px}.hand-gap{flex-basis:18px;width:18px}.hand-gap::before{left:9px}.hand-gap button{width:18px}.hand-help{font-size:9px}.hand-help span{display:none}
 .join-panel{padding:22px 18px;margin:5vh auto 12px}.join-fields{grid-template-columns:1fr}.join-code{gap:7px}.join-code button{font-size:12px}.join-panel h1{font-size:36px}
}
@media(max-width:370px){:root{--card-width:64px;--card-step:25px}.room-actions{width:100%;justify-content:space-between}.room-actions button,.room-actions summary{font-size:10px}.player-details strong{font-size:10px}.table-felt{padding:11px 8px 9px}#table{gap:6px 12px}.hand-heading{align-items:start}.hand-heading p{max-width:55%}}
@media(max-height:600px) and (orientation:landscape){.brand-bar{height:46px}.table-felt{min-height:200px;padding-top:10px}#players{margin-bottom:3px}#table{min-height:150px}#table .pile-card{min-height:110px}#table .pile-card .card-art{width:60px}}
@media(max-width:1024px) and (max-height:600px) and (orientation:landscape){
 #room[data-phase=playing]{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:7px}
 #room[data-phase=playing] .room-bar{grid-column:1/-1;margin:0}
 #room[data-phase=playing] #turn{grid-column:1;grid-row:2;margin:0;align-self:center}
 #room[data-phase=playing] #controls{grid-column:2;grid-row:2;align-self:center}#controls button{margin-bottom:0}
 #room[data-phase=playing] .table-wood{grid-column:1;grid-row:3;margin:3px}
 #room[data-phase=playing] .hand-dock{grid-column:2;grid-row:3;align-self:start}
 .table-felt{padding:9px 8px;min-height:208px}.player{grid-template-columns:24px minmax(0,1fr);gap:4px}.player .player-avatar{width:24px;height:24px}.player-details strong{font-size:9px}.player-details small{font-size:8px}
 #table{grid-template-columns:94px 94px;min-height:115px;gap:5px 15px}#table .pile-card{width:94px;min-height:104px}#table .pile-card .card-art{width:54px}#table>.discard-help{font-size:9px}#table .game-action{min-height:36px;padding:6px;font-size:11px}
}
@media(prefers-reduced-motion:reduce){button,#hand button.card{transition:none}.drag-ghost{transform:none}}