*{box-sizing:border-box}body{margin:0;background:#031b14;color:#f5e7c6;font-family:Georgia,'Times New Roman',serif;--felt:#086046;--deep:#013326;--gold:#c6a361;--back:#09392c;--glow:#f1cf72;min-height:100vh;background:radial-gradient(ellipse at 50% 45%,var(--deep),#02100d)}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]){--felt:#143957;--deep:#051d33;--gold:#c5b69b;--back:#09233c;--glow:#a5e8ff;background:#041527}body[data-theme=wine]{--felt:#702837;--deep:#360f20;--gold:#d4ae6d;--back:#381525;--glow:#ffdca1;background:#1b0710}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default}button:focus-visible{outline:3px solid var(--glow);outline-offset:4px}main{max-width:1080px;margin:auto;padding:20px 32px 12px}header{position:relative;text-align:center;height:92px;display:flex;justify-content:center;align-items:center}.brand{font-size:clamp(30px,5vw,58px);letter-spacing:3px;font-weight:bold;color:#e7cc8b;text-shadow:0 3px 3px #000}.brand span{display:block;font-size:12px;letter-spacing:5px;line-height:20px;color:var(--gold)}.icon{position:absolute;right:0;top:15px;border:1px solid var(--gold);border-radius:50%;background:var(--deep);width:46px;height:46px;font-size:26px;box-shadow:0 3px 8px #0008}.table{position:relative;min-height:650px;border-radius:45% 45% 40% 40% / 20% 20% 25% 25%;border:9px ridge var(--gold);background:radial-gradient(ellipse at 50% 35%,var(--felt),var(--deep));box-shadow:0 12px 0 #0005,0 25px 60px #0008,inset 0 0 55px #0007;padding:22px 20px 30px}.table:before{content:'';pointer-events:none;position:absolute;inset:12px;border:1px solid #c6a36155;border-radius:inherit}.label{font-size:21px;display:inline-block;border:1px solid var(--gold);border-radius:24px;padding:6px 24px;background:#0003;box-shadow:0 2px 6px #0003}.label small{font-size:14px;color:#ded3b8}.opponent{text-align:center}.enemy{height:115px;display:flex;justify-content:center;padding-top:12px}.card{width:110px;height:156px;border-radius:9px;border:1px solid #d4c5a4;box-shadow:0 4px 2px #0006,0 9px 12px #0004;position:relative;flex-shrink:0;overflow:hidden}.back{background:var(--back);border:4px solid #dfd1af;padding:7px}.back:before{content:'';position:absolute;inset:7px;border:1px solid var(--gold);background:repeating-linear-gradient(45deg,transparent 0 15px,#c6a36132 16px 17px,transparent 18px 30px),repeating-linear-gradient(-45deg,transparent 0 30px,#c6a36132 31px 32px,transparent 33px 45px)}.ornament{position:absolute;inset:20px 15px;border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:45px}.ornament:before{content:'';position:absolute;width:40px;height:40px;border:1px solid var(--gold);transform:rotate(45deg)}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .back:before{background:repeating-linear-gradient(90deg,transparent 0 7px,#c5b69b66 8px 9px,transparent 10px 18px)}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .ornament{background:var(--back);font-size:0}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .ornament:after{content:'◇';font-size:50px}.enemy .card{width:65px;height:92px;margin:0 -8px;transform:rotate(-2deg)}.enemy .ornament{inset:13px 10px;font-size:24px}.enemy .ornament:before{width:23px;height:23px}.enemy .back{border-width:3px}.center{display:flex;justify-content:center;gap:66px;margin:18px auto 10px;align-items:flex-start}.stack{border:0;background:none;padding:0;position:relative}.stack .card{box-shadow:0 3px 0 #bfa987,0 6px 0 #493f2e,0 9px 0 #bfa987,0 12px 0 #493f2e,0 15px 0 #bfa987,0 18px 10px #0008;transform:rotate(-5deg)}.stack>span,.discard>span{display:block;margin-top:24px;text-align:center;font-size:16px}.stack small{font-size:14px}.discard #top{transform:rotate(4deg)}.discard>span{margin-top:24px}.face{background:radial-gradient(ellipse at 40% 40%,#fffcf3,#e8dfcf);color:#191818;border:2px solid #faf0dc}.red{color:#b32328}.corner{position:absolute;left:7px;top:5px;font-family:Georgia,serif;font-size:23px;line-height:1;font-weight:bold;z-index:2}.corner span{display:block;text-align:center;font-size:18px;line-height:1.2}.corner.bottom{left:auto;top:auto;right:7px;bottom:5px;transform:rotate(180deg)}.face:has(.joker) .corner span{font-size:8px}.pips{position:absolute;inset:30px 24px;display:grid;grid-template-columns:1fr 1fr;align-items:center;justify-items:center;font-size:24px;line-height:1}.pips-A{grid-template-columns:1fr;font-size:60px}.pips-2,.pips-3{grid-template-columns:1fr}.pips-10,.pips-9{font-size:17px}.royal{position:absolute;inset:28px 22px;border:1px solid currentColor;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:52px;background:linear-gradient(45deg,#bb943b33,transparent)}.royal span{font-size:26px}.joker{position:absolute;inset:24px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:62px}.joker span{font-size:12px;letter-spacing:2px}.status{text-align:center;min-height:93px}#turn{display:inline-block;border:1px solid var(--gold);border-radius:30px;padding:9px 30px;font-size:23px;background:#0003;box-shadow:0 0 14px #ebcc6822}#command{font-size:17px;min-height:23px;margin-top:7px;color:#ffe3a2}#notice{font-family:system-ui,sans-serif;font-size:14px;margin:3px 0 12px;color:#e3dbca;min-height:20px}.player{text-align:center}.hand{display:flex;justify-content:center;min-height:192px;padding:28px 18px 8px;align-items:flex-start}.handcard{background:none;border:0;padding:0;flex-shrink:0;margin:0 -12px;transform:translateY(var(--lift)) rotate(var(--angle));transition:transform .18s,filter .18s;position:relative;animation:deal .35s ease-out}.handcard .card{width:112px;height:160px}.handcard:not(.playable){filter:brightness(.8)}.handcard.selected{transform:translateY(calc(var(--lift) - 18px)) rotate(var(--angle));z-index:5;filter:none}.handcard.selected .card{box-shadow:0 0 0 2px var(--glow),0 0 20px var(--glow),0 8px 12px #0007}.handcard.playable:not(:disabled):hover{transform:translateY(calc(var(--lift) - 10px)) rotate(var(--angle));z-index:6}.hand.many{justify-content:flex-start;overflow-x:auto;padding:25px 22px 14px;scrollbar-color:var(--gold) transparent;gap:0}.hand.many .handcard{margin:0 -10px 0 0}.hint{font-family:system-ui,sans-serif;font-size:14px;margin:8px 0 14px;color:#e0d8c7}.primary{background:linear-gradient(180deg,var(--felt),var(--deep));border:2px solid var(--gold);border-radius:40px;padding:12px 42px;font-size:25px;min-width:240px;box-shadow:inset 0 0 0 3px #0004,0 5px 15px #0005}.primary:disabled{opacity:.5}footer{display:flex;justify-content:center;gap:26px;margin:22px 0}footer button{border:0;background:none;color:#d8c7a1;font-size:15px;padding:8px}.game-dialog{background:#09251e;color:#f6ead0;border:1px solid var(--gold);border-radius:20px;width:min(92vw,550px);padding:30px;box-shadow:0 20px 100px #0009;max-height:85dvh}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .game-dialog{background:#071d32}.game-dialog::backdrop{background:#0009;backdrop-filter:blur(5px)}.game-dialog p{font:16px/1.6 system-ui,sans-serif;color:#e2dfd4}.game-dialog h2{font-size:27px;margin:4px 28px 20px 0}.game-dialog h3{color:#e8c784;font-size:20px}.close{position:absolute;right:15px;top:10px;background:none;border:0;font-size:30px}.themes{display:grid;gap:12px}.themes button,.suitchoice button{background:#0003;border:1px solid var(--gold);border-radius:12px;padding:18px;font-size:20px}.themes .active{box-shadow:0 0 0 2px var(--glow)}.suitchoice{display:flex;gap:10px;justify-content:center}.suitchoice button{font-size:38px;padding:10px 18px}.suitchoice button:nth-child(-n+2){color:#ff7e7e}@keyframes deal{from{opacity:.3;transform:translateY(-20px) rotate(0)}to{opacity:1}}#top{animation:deal .25s} @media(min-width:850px){.table{padding:24px 30px;min-height:700px}.enemy{height:122px}.center{margin-top:14px}.handcard .card{width:125px;height:177px}.hand{min-height:210px}.handcard .pips{font-size:29px}.handcard .pips-A{font-size:70px}.handcard .pips-10,.handcard .pips-9{font-size:21px}}
@media(max-width:600px){main{padding:8px 10px 4px}header{height:76px}.brand{font-size:31px;letter-spacing:1px}.icon{right:0;top:12px;width:37px;height:37px;font-size:22px}.brand span{font-size:10px}.table{border-width:5px;padding:17px 8px 24px;min-height:610px;border-radius:45% 45% 40% 40% / 12% 12% 15% 15%}.table:before{inset:7px}.label{font-size:19px;padding:5px 20px}.label small{font-size:14px}.enemy{height:97px}.enemy .card{width:56px;height:79px;margin:0 -5px}.center{gap:48px;margin:18px auto 12px}.center .card{width:87px;height:123px}.center .pips{inset:25px 19px;font-size:20px}.center .pips-A{font-size:43px}.center .pips-9,.center .pips-10{font-size:14px}.center .corner{font-size:19px;left:5px;top:4px}.center .corner span{font-size:15px}.center .corner.bottom{left:auto;top:auto;right:5px;bottom:4px}.center .royal{inset:24px 18px;font-size:35px}.center .joker{font-size:43px}.stack>span,.discard>span{font-size:14px;margin-top:23px}#turn{font-size:21px;padding:7px 25px}#notice{font-size:14px;min-height:34px;margin:4px 5px 8px}#command{font-size:15px}.status{min-height:110px}.hand{min-height:157px;padding:23px 7px 5px}.handcard{margin:0 -14px}.handcard .card{width:82px;height:119px}.handcard .corner{font-size:19px;left:5px;top:4px}.handcard .corner span{font-size:15px}.handcard .corner.bottom{left:auto;top:auto;right:5px;bottom:4px}.handcard .pips{inset:24px 18px;font-size:20px}.handcard .pips-9,.handcard .pips-10{font-size:14px}.handcard .pips-A{font-size:43px}.handcard .royal{inset:23px 18px;font-size:35px}.handcard .joker{font-size:44px}.hint{font-size:14px;margin:10px 10px 12px}.primary{font-size:23px;padding:10px 28px;min-width:225px}footer{margin:12px 0;gap:12px}.hand.many{min-height:158px}.game-dialog{padding:25px 20px}.suitchoice button{padding:10px 15px} }@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.hand.many .handcard{--angle:0deg!important;--lift:0px!important}.hand.many .handcard .card{flex-shrink:0}@media(max-width:380px){header{padding-right:40px}.brand{font-size:27px;letter-spacing:.5px}.brand span{letter-spacing:2px}.suitchoice{gap:6px}.suitchoice button{padding:8px 12px}}
/* A single-screen card table, including compact phone browser viewports. */
html,body{height:100%;overflow:hidden;overscroll-behavior:none}body{background:radial-gradient(ellipse at center,#153d30,#020c09);font-family:system-ui,sans-serif}main{height:100dvh;max-width:1120px;padding:10px 16px;display:grid;grid-template-rows:48px minmax(0,1fr) 42px;gap:6px}header{height:auto}.brand{font:700 clamp(22px,3vw,34px)/1 Georgia,serif;letter-spacing:2px}.brand span{display:none}.icon{top:3px;width:40px;height:40px;font-size:23px}.table{min-height:0!important;height:100%;padding:18px 22px 14px!important;display:grid;grid-template-rows:minmax(80px,1fr) minmax(128px,1.4fr) 42px minmax(172px,1.6fr);border:7px solid #b69959;border-radius:48% 48% 44% 44% / 18% 18% 19% 19%;background:radial-gradient(ellipse at 50% 38%,#126248 0%,#07442e 62%,#03271e 100%);box-shadow:0 0 0 3px #342819,0 0 0 5px #7c6638,inset 0 0 40px #0009,0 15px 40px #0009}.table:before{inset:6px;border-color:#e9d99c45}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .table{background:radial-gradient(ellipse,#264763,#102b43 70%,#071b30)}body[data-theme=wine] .table{background:radial-gradient(ellipse,#6f3445,#351522)}.label{font:500 14px/1.2 system-ui,sans-serif;border:0;background:none;box-shadow:none;padding:0}.label small{font-size:14px;color:#d9ccad}.opponent{display:flex;align-items:center;flex-direction:column;justify-content:center;gap:9px}.enemy{height:auto;padding:0}.enemy .card{width:47px;height:66px}.center{margin:0;align-items:center;gap:54px}.center .card{width:83px;height:118px}.center .corner{font-size:20px}.center .corner span{font-size:16px}.center .pips{inset:27px 18px;font-size:18px}.center .pips-A{font-size:42px}.center .pips-9,.center .pips-10{font-size:14px}.stack>span{margin-top:20px;font:14px system-ui,sans-serif}.discard>span{display:none}.discard{min-width:83px;min-height:118px}.status{min-height:0;align-self:center}#turn{font:500 14px/1.2 system-ui,sans-serif;border:0;background:none;box-shadow:none;padding:2px 8px}#command{font:500 14px system-ui,sans-serif;margin:2px 0;min-height:0}#notice,.hint{display:none}.player{display:grid;grid-template-rows:18px minmax(0,1fr) 42px;min-height:0}.hand{min-height:0!important;padding:22px 5px 6px;align-items:center;overflow-y:clip}.handcard{margin:0 -10px;animation:none}.handcard .card{width:86px;height:123px}.face{background:#fffdf7;border:1px solid #d7d1c6;border-radius:6px;box-shadow:0 2px 3px #0005,0 8px 15px #0006}.corner{font-family:Georgia,serif}.royal{border:0;background:none;inset:28px 18px;font:700 46px Georgia,serif}.royal span{font-size:28px}.joker{font-size:48px}.joker span{font:700 11px Georgia,serif;letter-spacing:1px}.back{border:3px solid #ece1c4;border-radius:6px;background:repeating-linear-gradient(45deg,#17392a 0 3px,#30523a 3px 4px)}.back:before{inset:4px;border:1px solid #bc9f5d;background:none}.ornament{inset:11px;border:1px solid #bc9f5d;font-size:30px}.ornament:before{width:25px;height:25px}.handcard:not(.playable){filter:none}.handcard.playable:not(:disabled) .card{box-shadow:0 0 0 1px #e4c76b,0 8px 15px #0006}.hand.many{padding:20px 12px 8px;align-items:center;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#a38c54 transparent}.hand.many .handcard{margin-right:-24px}.primary{font:600 16px system-ui,sans-serif;padding:8px 24px;min-width:160px;justify-self:center;border-width:1px;box-shadow:0 3px 8px #0005;min-height:40px}footer{margin:0;align-items:center;gap:26px}footer button{font:14px system-ui,sans-serif;padding:8px}.game-dialog{overflow-y:auto}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .back{background:repeating-linear-gradient(45deg,#152d53 0 5px,#264069 5px 6px)}.shuffling .card{animation:shuffle .22s ease-in-out infinite alternate}@keyframes shuffle{from{transform:translateX(-12px) rotate(-12deg)}to{transform:translateX(12px) rotate(8deg)}}.enemy .card:last-child{animation:arrival .2s ease-out}.handcard:last-child{animation:arrival .2s ease-out}@keyframes arrival{from{opacity:0;translate:0 -65px}to{opacity:1;translate:0 0}}
@media(min-width:800px) and (min-height:650px){.table{grid-template-rows:1fr 1.35fr 44px 1.5fr}.center .card{width:100px;height:143px}.handcard .card{width:108px;height:154px}.enemy .card{width:57px;height:81px}.handcard{margin:0 -9px}}
@media(max-width:600px){main{padding:6px 10px;grid-template-rows:42px minmax(0,1fr) 36px;gap:4px}.brand{font-size:24px}.icon{width:35px;height:35px;top:2px}.table{padding:15px 10px 10px!important;border-width:4px;grid-template-rows:minmax(75px,.9fr) minmax(135px,1.35fr) 38px minmax(175px,1.5fr)}.table:before{inset:5px}.enemy .card{width:43px;height:61px;margin:0 -5px}.center{gap:42px}.handcard .card{width:79px;height:113px}.handcard{margin:0 -10px}.handcard .corner{font-size:20px}.handcard .pips{inset:27px 17px;font-size:18px}.handcard .pips-9,.handcard .pips-10{font-size:13px}.handcard .pips-A{font-size:42px}.handcard .royal{font-size:39px;inset:25px 15px}.player{grid-template-rows:18px minmax(0,1fr) 40px}footer button{padding:6px;font-size:14px}}
@media(max-height:600px){main{grid-template-rows:34px minmax(0,1fr) 30px}.brand{font-size:21px}.table{grid-template-rows:65px minmax(100px,1fr) 29px minmax(131px,1fr);padding:8px 12px!important}.enemy .card{width:34px;height:48px}.opponent{gap:4px}.center .card{width:62px;height:89px}.discard{min-width:62px;min-height:89px}.stack>span{margin-top:15px}.handcard .card{width:64px;height:92px}.hand{padding-top:10px}.handcard .corner{font-size:16px}.handcard .corner span{font-size:12px}.handcard .pips{inset:23px 14px;font-size:13px}.handcard .royal{font-size:28px;inset:22px 15px}.handcard .royal span{font-size:17px}.player{grid-template-rows:16px minmax(0,1fr) 34px}.primary{min-height:32px;padding:5px 20px}.icon{width:30px;height:30px;font-size:19px}.corner.bottom{bottom:4px}#command,#turn{font-size:13px}}
/* Artwork-matched indigo table. The interaction layer follows the reference. */
body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]){background:#06162a;color:#f5e8d1;--gold:#ddc8a0;--glow:#acecff}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) main{position:relative;width:min(100%,1000px);height:100dvh;margin:0 auto;padding:0;display:block;background:url('assets/table-ndop.webp') center/100% 100% no-repeat;isolation:isolate}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) header{position:absolute;top:1.5%;left:0;width:100%;height:7%;z-index:4;display:flex;align-items:center;padding:0 40px}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .brand{font:700 clamp(24px,4.9vw,52px)/1 Georgia,serif;color:#f5e7cb;letter-spacing:.5px;text-shadow:0 2px 1px #947e5b,0 5px 10px #000}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .brand span{display:block;font-size:12px;line-height:1.8;letter-spacing:2px;color:#deccb0}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .icon{right:2.5%;top:8%;border:1px solid #dfc49b;background:#081e35;box-shadow:inset 0 0 0 2px #403a2b,0 2px 5px #0007}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .table{position:absolute;inset:0;border:0;border-radius:0;box-shadow:none;background:none;display:block;height:100%;padding:0!important}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .table:before{display:none}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .opponent{position:absolute;top:10%;left:10%;right:10%;height:18%;justify-content:flex-start;gap:7px}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .label{font:500 clamp(16px,2.5vh,25px)/1.1 Georgia,serif;border:1px solid #d9c5a0;box-shadow:inset 0 0 0 2px #081a2c,0 3px 6px #0007;border-radius:30px;padding:4px 18px;background:linear-gradient(#122a43,#031327)}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .label small{display:none}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .enemy{height:calc(100% - 35px);align-items:center;width:100%}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .enemy .card{width:min(15vw,9.2vh);height:min(21.5vw,13.2vh);margin:0 -2px;transform:rotate(-2deg)}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .center{position:absolute;top:32%;left:12%;right:12%;height:19%;gap:clamp(38px,10vw,100px);align-items:flex-start}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .center .card{width:min(21vw,12.8vh);height:min(30vw,18.3vh)}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .discard{min-width:0;min-height:0}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .stack>span{font:600 clamp(15px,2.2vh,23px) Georgia,serif;margin-top:18px}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) #remaining{display:none}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .status{position:absolute;left:5%;right:5%;top:52%;height:6%;display:flex;align-items:center;flex-direction:column;justify-content:center}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) #turn{border:1px solid #e4d1b4;border-radius:30px;padding:6px 20px;background:linear-gradient(#13324d,#071b30);font:600 clamp(16px,2.6vh,25px) Georgia,serif;box-shadow:inset 0 0 0 2px #041326,0 3px 6px #0007}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) #command{margin-top:3px;color:#fff0c9;text-shadow:0 2px 3px #000}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .player{position:absolute;top:59%;left:3%;right:3%;height:35%;display:block}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .player>.label{position:relative;z-index:0}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .hand{height:70%;min-height:0;padding:15px 10px 22px;align-items:center;overflow-y:visible}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .handcard{margin:0 clamp(-19px,-3vw,-8px);transform:translateY(var(--lift)) rotate(var(--angle));transform-origin:center 85%}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .handcard .card{width:min(25vw,15vh);height:min(36vw,21.5vh)}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .handcard.playable:not(:disabled) .card{box-shadow:0 0 0 1px #b1efff,0 0 11px #b1efff80,0 8px 13px #0009}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .handcard.selected .card{box-shadow:0 0 0 2px #d9f8ff,0 0 18px #a9e9ff,0 8px 13px #0009}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .hand.many{overflow-x:auto;overflow-y:hidden;padding:18px 10px;justify-content:flex-start}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .hand.many .handcard{margin:0 -23px 0 0}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) #draw{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:64%;min-width:0;height:17%;border:2px solid #decaab;border-radius:50px;background:linear-gradient(#163b5b,#051e37);box-shadow:inset 0 0 0 3px #092139,inset 0 0 0 4px #bda785,0 6px 10px #0008;font:600 clamp(20px,3.4vh,36px) Georgia,serif;padding:3px 18px;white-space:nowrap}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) #draw:before,body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) #draw:after{content:'';position:absolute;top:13%;bottom:13%;width:13%;background:url('assets/card-back-ndop.webp') center/cover;opacity:.8;pointer-events:none}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) #draw:before{left:3%;border-radius:20px 0 0 20px}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) #draw:after{right:3%;border-radius:0 20px 20px 0}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) footer{position:absolute;bottom:.3%;height:4%;width:100%;gap:25px}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) footer button{color:#ecdcc3;text-shadow:0 2px 3px #000;font-size:14px}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .back,.flying{background:#0d2944 url('assets/card-back-ndop.webp') center/100% 100%;border:0;border-radius:6px;box-shadow:0 3px 2px #0008,0 7px 10px #0007}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .back:before,body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .back:after,body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .ornament{display:none}.flying{position:fixed;z-index:20;pointer-events:none}.face{background:radial-gradient(ellipse at 35% 30%,#fff9ed,#e8dcc5);border:1px solid #e1d6c0}.pips{display:block!important;inset:18% 15%!important;font-size:clamp(19px,4vh,39px)!important}.pips span{position:absolute;line-height:1}.pips-A{font-size:clamp(40px,7vh,68px)!important}.pips-9,.pips-10{font-size:clamp(15px,3vh,29px)!important}.court{position:absolute;inset:13% 19%;background-image:url('assets/court-figures.webp');background-size:400% 300%;background-position:calc(var(--court-x)*100% / 3) calc(var(--court-y)*50%);border:1px solid #302829}.corner{font:700 clamp(17px,3.2vh,30px)/.9 Georgia,serif;left:5%;top:4%}.corner span{font-size:.76em;line-height:1.15}.corner.bottom{right:5%;bottom:4%;left:auto;top:auto}.handcard .corner,.center .corner{font-size:clamp(19px,3.3vh,31px)!important;left:5%!important;top:4%!important}.handcard .corner span,.center .corner span{font-size:.76em!important}.handcard .corner.bottom,.center .corner.bottom{left:auto!important;top:auto!important;right:5%!important;bottom:4%!important}.joker{inset:18% 20%;font-size:clamp(27px,5vh,45px)}.joker>span:last-child{font:700 10px Georgia,serif}.jester{width:100%;height:88%;display:block;background:url('assets/jokers.webp') left center/200% 100%;font-size:0}.black .jester{background-position:right center}.opening .handcard:last-child,.opening .enemy .card:last-child{animation:reveal .22s ease-out}@keyframes reveal{from{opacity:0}to{opacity:1}}.handcard:last-child,.enemy .card:last-child{animation:none}.handcard{transition:transform .18s}.handcard:active{transform:translateY(-12px) rotate(var(--angle))!important}
@media(min-width:800px){body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) main{width:min(100%,1200px)}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .brand{font-size:42px}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .opponent{top:10%;height:18%}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .handcard .card{width:15vh;height:21.5vh}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .handcard{margin:0 -12px}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) #draw{width:36%}}
@media(prefers-reduced-motion:reduce){.flying{display:none}.shuffling .card{animation:none}}

.court{inset:13% 18%;background-size:670% 335%;background-position:var(--court-x) var(--court-y)}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .brand{font-size:clamp(22px,5.2vw,48px)}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) header{padding:0 35px}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) #draw{overflow:hidden}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) #draw:before,body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) #draw:after{opacity:.45}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .player{z-index:2}.jester{min-height:0}.face:has(.joker) .corner{font-size:14px!important}.face:has(.joker) .corner span{font-size:6px!important}.face:has(.joker) .joker{inset:16% 12% 15%;gap:3px}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) main{padding-bottom:env(safe-area-inset-bottom)}
/* Symbols scale with the card itself, independently of screen height. */
.card.face{container-type:inline-size}.pips{inset:20% 21%!important;font-size:22cqw!important}.pips-A{font-size:52cqw!important}.pips-6,.pips-7,.pips-8{font-size:19cqw!important}.pips-9,.pips-10{font-size:16cqw!important}.pips span{width:1em;text-align:center}.handcard .corner,.center .corner{font-size:23cqw!important}.handcard .corner span,.center .corner span{font-size:.67em!important}.handcard.selected,body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .handcard.selected{transform:translateY(calc(var(--lift) - 14px)) rotate(var(--angle))!important;z-index:12;filter:none}.handcard.selected .card,body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .handcard.selected .card{box-shadow:0 0 0 2px #d9f9ff,0 0 16px #9ce6ff,0 12px 16px #0008!important}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .handcard.playable:not(.selected):not(:disabled) .card{box-shadow:0 3px 4px #0007,0 8px 13px #0008}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) #turn{font-weight:400;font-size:clamp(16px,2.5vh,24px);padding:5px 17px}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) #command{font:400 14px/1.2 Georgia,serif;margin-top:5px}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .status{top:50.5%;height:7%;z-index:3}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .player{top:60%;height:34%}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .label{font-weight:400;font-size:clamp(16px,2.3vh,24px)}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .brand{font-weight:500;letter-spacing:1px}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) #draw{font-weight:400;font-size:clamp(17px,2.6vh,27px);padding:3px 15%;height:16%}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) #draw:before,body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) #draw:after{width:9%;opacity:.4}.game-dialog h2{font:400 24px/1.2 Georgia,serif}.game-dialog .primary{font:400 17px Georgia,serif;min-width:0;padding:12px 24px}.game-dialog .close{outline:none;font-weight:400;font-size:27px}.game-dialog .close:focus-visible{outline:1px solid #decaab;outline-offset:0;border-radius:50%}.penalty-flash{animation:penaltyflash .45s ease-out}@keyframes penaltyflash{0%,40%{filter:drop-shadow(0 0 9px #ffbb69)}100%{filter:none}}@media(prefers-reduced-motion:reduce){.penalty-flash{animation:none}}
/* Keep the deck label and turn badge in separate vertical bands. */
body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .center{top:31%;height:18%}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .center .card{width:min(20vw,11.8vh);height:min(28.6vw,16.9vh)}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .stack>span{margin-top:18px;font-size:clamp(14px,1.9vh,20px);line-height:1}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .status{top:53%;height:6%;justify-content:flex-start}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .player{top:61%;height:33%}#effects{position:absolute;inset:0;z-index:35;pointer-events:none;overflow:hidden}main{position:relative}#top.penalty-flash{animation:penalty-impact 1.6s ease-out!important}.penalty-burst{position:absolute;top:35%;left:50%;transform:translate(-50%,-50%);font:500 clamp(42px,9vw,72px) Georgia,serif;color:#fff3c1;text-shadow:0 0 12px #ffa842,0 3px 8px #000;background:#572411df;border:2px solid #ffd78c;border-radius:50%;width:1.7em;height:1.7em;display:grid;place-items:center;box-shadow:0 0 30px #ffbd5680;animation:penalty-badge 1.6s ease-out both}@keyframes penalty-impact{0%,18%{filter:drop-shadow(0 0 16px #ffbf66);transform:translateX(-4px) rotate(-2deg)}10%,25%{transform:translateX(4px) rotate(2deg)}40%,80%{filter:drop-shadow(0 0 10px #ffc372);transform:none}100%{filter:none;transform:none}}@keyframes penalty-badge{0%{opacity:0;scale:.6}15%{opacity:1;scale:1.1}30%,75%{opacity:1;scale:1}100%{opacity:0;translate:0 -25px}}.confetti{position:absolute;top:-5%;left:var(--x);width:7px;height:12px;background:var(--color);box-shadow:0 0 5px var(--color);animation:confetti-fall var(--duration) var(--delay) ease-in both}.confetti.sparkle{width:9px;height:9px;clip-path:polygon(50% 0,62% 36%,100% 50%,62% 64%,50% 100%,38% 64%,0 50%,38% 36%)}@keyframes confetti-fall{0%{opacity:0;transform:translate(0,-10px) rotate(0)}8%,80%{opacity:1}100%{opacity:0;transform:translate(var(--drift),105vh) rotate(650deg)}}.victory #turn{color:#fff0bd!important;border-color:#ffde82!important;box-shadow:0 0 20px #e4b95880!important;animation:victory-glow 1.4s ease-in-out 4 alternate}@keyframes victory-glow{to{box-shadow:0 0 32px #ffe7a6!important}}@media(prefers-reduced-motion:reduce){#top.penalty-flash{animation:none!important;filter:drop-shadow(0 0 10px #ffc372)}.penalty-burst{animation:none}.confetti{animation:none;top:calc(12% + var(--x));opacity:.7}.victory #turn{animation:none}}
/* Side labels clear the middle of the table. */
body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .stack{position:relative}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .stack>span{position:absolute;right:calc(100% + 9px);top:50%;transform:translateY(-50%);margin:0;white-space:nowrap;font:400 clamp(14px,1.8vh,19px)/1 Georgia,serif;text-align:center}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .discard{position:relative}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) #commanded-suit{display:block;position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);margin:0;color:#f5e8d1;font:400 clamp(31px,5.5vh,52px)/1 Georgia,serif;text-shadow:0 2px 5px #0008}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) #commanded-suit:empty{display:none}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .discard-caption{display:none}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) #turn.your-turn{background:#f5e8d1;color:#071b30;border-color:#f5e8d1;box-shadow:0 3px 6px #0005;text-shadow:none}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .status{top:53%;height:6%}#command:empty{display:none}@media(max-width:380px){body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .center{gap:30px}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .stack>span{right:calc(100% + 7px);font-size:14px}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) #commanded-suit{left:calc(100% + 9px);font-size:32px}}
.player>.label{display:none!important}body .icon,body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .icon{border:0;background:none;box-shadow:none;border-radius:0}.game-dialog .close,.game-dialog .close:focus,.game-dialog .close:focus-visible{outline:none!important;border:0!important;box-shadow:none!important;background:none!important;border-radius:0}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .stack>span{right:calc(100% + 18px)}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) #commanded-suit{left:calc(100% + 24px)}.victory-focus{position:absolute;inset:0;display:grid;place-items:center;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);background:#06192b55;animation:win-focus-in .35s ease-out}.victory-title{font:500 clamp(35px,8.5vw,86px)/1.15 Georgia,serif;text-align:center;color:#fff0c8;text-shadow:0 0 25px #f0c46080,0 4px 10px #000;animation:win-zoom .75s cubic-bezier(.16,1,.3,1) both;padding:14px;max-width:95%}.victory #effects{z-index:60}.victory .status{visibility:hidden}.victory .confetti{z-index:2}@keyframes win-zoom{from{transform:scale(.4);opacity:0}65%{transform:scale(1.08);opacity:1}to{transform:scale(1);opacity:1}}@keyframes win-focus-in{from{opacity:0}to{opacity:1}}@media(max-width:380px){body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .stack>span{right:calc(100% + 16px)}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) #commanded-suit{left:calc(100% + 20px)}}@media(prefers-reduced-motion:reduce){.victory-title,.victory-focus{animation:none}}
.hand.adaptive,body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .hand.adaptive{position:relative;display:block;overflow:visible;padding:0!important}.hand.adaptive .handcard,body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .hand.adaptive .handcard{position:absolute;left:var(--cx);top:var(--cy);margin:0!important;transform:rotate(var(--angle));touch-action:manipulation}.hand.adaptive .handcard .card,body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .hand.adaptive .handcard .card{width:var(--cw)!important;height:calc(var(--cw)*1.43)!important}.hand.adaptive .handcard.selected,body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .hand.adaptive .handcard.selected{z-index:100!important;transform:translateY(-12px) rotate(var(--angle))!important}.suitchoice button{min-width:52px;min-height:52px;touch-action:manipulation}.game-dialog{z-index:100}
html,body,main,main *,.game-dialog,.game-dialog *{touch-action:manipulation}button{user-select:none;-webkit-user-select:none}.audio-options{display:flex;gap:10px;margin-bottom:18px}.audio-options button{flex:1;background:#102f45;border:1px solid #d6c39f;border-radius:12px;padding:12px 8px;font:400 15px system-ui,sans-serif}
header,body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) header{z-index:50;pointer-events:auto}#settings,body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) #settings{width:48px;height:48px;pointer-events:auto;touch-action:manipulation;position:absolute;z-index:51}#modal{pointer-events:auto}#modal .close{min-width:40px;min-height:40px}

body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .hand.adaptive:has(.handcard:nth-child(7)){height:82%}
.hand.adaptive .handcard:hover,body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .hand.adaptive .handcard:hover{transform:rotate(var(--angle));}
.hand.adaptive .handcard.selected:hover,body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .hand.adaptive .handcard.selected:hover{transform:translateY(-12px) rotate(var(--angle))!important}

.modal-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:18px;background:#0009;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);touch-action:manipulation}
.modal-overlay[hidden]{display:none!important}.modal-overlay .game-dialog{position:relative;margin:0;max-height:85dvh;overflow-y:auto;overscroll-behavior:contain}.suitchoice{flex-wrap:wrap}.game-dialog button{touch-action:manipulation}

/* All tables share the full-size game layout; each has its own art and deck. */
body[data-theme=green]{--gold:#dcb773;--glow:#ffe096;--felt:#145e43;--deep:#03271d;background:#021811;color:#f6e7c8}
body[data-theme=wine]{--gold:#d9b78c;--glow:#ffd5a0;--felt:#6f223e;--deep:#290a1c;background:#190713;color:#f8e5cf}
body[data-theme=green] main{background-image:url('assets/table-green.webp')}
body[data-theme=wine] main{background-image:url('assets/table-wine.webp')}
body[data-theme=green] .back,body[data-theme=green] .flying{background-image:url('assets/card-back-green.webp')}
body[data-theme=wine] .back,body[data-theme=wine] .flying{background-image:url('assets/card-back-wine.webp')}
body[data-theme=green] #draw:before,body[data-theme=green] #draw:after{background-image:url('assets/card-back-green.webp')}
body[data-theme=wine] #draw:before,body[data-theme=wine] #draw:after{background-image:url('assets/card-back-wine.webp')}
body[data-theme=green] .brand,body[data-theme=wine] .brand{color:#f5dca3;text-shadow:0 2px 1px #826535,0 5px 10px #000}
body[data-theme=green] .label,body[data-theme=green] #turn{background:linear-gradient(#124932,#031e16);border-color:#d9b976;box-shadow:inset 0 0 0 2px #082b20,0 3px 6px #0007}
body[data-theme=wine] .label,body[data-theme=wine] #turn{background:linear-gradient(#58213a,#240919);border-color:#dab58a;box-shadow:inset 0 0 0 2px #301022,0 3px 6px #0007}
body[data-theme=green] #turn.your-turn{background:#f4e4be;color:#072e20;border-color:#f4e4be}
body[data-theme=wine] #turn.your-turn{background:#f5e1c8;color:#350b21;border-color:#f5e1c8}
body[data-theme=green] #draw{background:linear-gradient(#186a4a,#032e21);border-color:#e5c07c;box-shadow:inset 0 0 0 3px #072f22,inset 0 0 0 4px #b69254,0 6px 14px #0009}
body[data-theme=wine] #draw{background:linear-gradient(#742943,#30091e);border-color:#e6bd94;box-shadow:inset 0 0 0 3px #350d22,inset 0 0 0 4px #ae835e,0 6px 14px #0009}
body[data-theme=green] .handcard.selected .card{box-shadow:0 0 0 2px #fff1c9,0 0 20px #ffcb55,0 12px 16px #0008!important}
body[data-theme=wine] .handcard.selected .card{box-shadow:0 0 0 2px #ffe6ce,0 0 20px #fcb778,0 12px 16px #0008!important}
body[data-theme=green] .game-dialog{background:#062a20}body[data-theme=wine] .game-dialog{background:#2c1022}
body[data-theme=green] .stack .card,body[data-theme=wine] .stack .card{box-shadow:0 3px 0 #d6c2a1,0 5px 0 #48392b,0 7px 0 #d6c2a1,0 9px 0 #48392b,0 11px 0 #d6c2a1,0 15px 12px #0008}

@font-face{font-family:CheckCelebration;src:url('assets/celebration-bold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}
.victory-title{font-family:CheckCelebration,Georgia,serif;font-weight:700;font-size:clamp(40px,11vw,100px);line-height:1.12;color:#fff0b9;letter-spacing:-.025em;text-shadow:0 2px 0 #b88737,0 4px 0 #725025,0 7px 16px #000b,0 0 30px #ffd66d80;-webkit-text-stroke:.4px #ffe9ad;width:95%;padding:20px 8px}
.victory-title span,.victory-title strong{display:block}.victory-title strong{font:inherit;font-size:1.2em;text-transform:uppercase;margin-top:.08em}

.sound-styles{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}.sound-styles button{flex:1;min-width:80px;min-height:48px;background:#0003;border:1px solid var(--gold);border-radius:12px;padding:12px 8px;font:400 16px Georgia,serif}.sound-styles button.active{background:#f5e8d1;color:#071b30;box-shadow:0 0 0 2px var(--gold)}.game-dialog h3{margin:20px 0 12px;color:inherit;font:400 19px Georgia,serif}

.sound-styles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.sound-styles button{min-width:0;font-size:15px}.sound-styles button[data-sound-style=benskin],.sound-styles button[data-sound-style=afrobeats],.sound-styles button[data-sound-style=bikutsi]{border-color:#e4be72}

.multiplayer .opponent{display:none!important}.online-opponents{position:absolute;inset:0;pointer-events:none;z-index:4}.online-seat{position:absolute;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}.online-seat .label{max-width:100%;font-size:clamp(13px,2.1vh,22px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:5px 12px}.online-seat.active-turn .label{background:#f5e8d1!important;color:#071b30;box-shadow:0 0 14px #ffe8a180!important}.seat-top{top:10%;left:10%;right:10%;height:18%}.seat-top-left{top:10%;left:5%;width:43%}.seat-top-right{top:10%;right:5%;width:43%}.seat-left{top:23%;left:3%;width:26%}.seat-right{top:23%;right:3%;width:26%}.seat-cards{display:flex;justify-content:center}.seat-cards .card{width:min(12vw,8vh);height:min(17vw,11.44vh);margin:0 -3px}.seat-left .card,.seat-right .card{width:min(8vw,5vh);height:min(11.44vw,7.15vh)}#network-message{position:absolute;top:59%;left:5%;right:5%;text-align:center;z-index:65;font:500 14px system-ui,sans-serif;color:#fff0c9;text-shadow:0 2px 4px #000;pointer-events:none}#network-message:empty{display:none}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) footer{gap:6px;align-items:center}body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) footer button{font-size:clamp(12px,3.2vw,15px);padding:8px 7px}.room-code{letter-spacing:2px;color:#ffe1a6}.room-members{list-style:none;padding:0;margin:12px 0 20px}.room-members li{padding:10px 0;border-bottom:1px solid #ffffff24;font:18px Georgia,serif}.room-members small{font:12px system-ui,sans-serif;opacity:.75;margin-left:8px}.empty-seat{opacity:.5}.room-actions{display:flex;gap:10px;flex-wrap:wrap}.room-actions .primary{flex:1;min-width:120px}.room-link{display:block;margin:16px auto 0;padding:10px;background:none;border:0;font:15px system-ui,sans-serif}.waiting-label{margin:0!important;align-self:center}#room-form label{display:block;margin:16px 0 8px;font:16px Georgia,serif}.game-dialog input,.game-dialog select{width:100%;min-height:46px;background:#ffffff0c;border:1px solid var(--gold);border-radius:10px;padding:10px;color:inherit;font:16px system-ui,sans-serif}.game-dialog select option{background:#071b30;color:#f5e8d1}.join-line{display:flex;gap:8px}.join-line input,.join-line select{min-width:0;flex:1}.join-line .primary{padding:8px 14px;min-width:0;font-size:16px}#room-error{color:#ffcbb4;font-size:14px;margin:12px 0 0}.room-members+.room-actions{margin-top:16px}

/* Brief celebrations and reactions, with the card table kept clear. */
#scores{position:absolute;top:8.3%;left:8%;right:8%;display:flex;justify-content:center;gap:12px;pointer-events:none;z-index:5;font:500 clamp(10px,1.6vh,14px) Georgia,serif;color:#f5e8d1;text-shadow:0 2px 4px #000}
#scores span{min-width:0;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#reaction-toggle{position:absolute;bottom:6.8%;right:3%;z-index:10;width:44px;height:44px;padding:0;border:1px solid var(--gold);border-radius:50%;background:var(--deep);color:#f5e8d1;font:32px Georgia,serif;box-shadow:0 3px 8px #0008}
#reaction-tray{position:absolute;bottom:13%;right:3%;z-index:75;display:flex;gap:4px;padding:5px;border:1px solid var(--gold);border-radius:28px;background:var(--deep);box-shadow:0 6px 22px #0009}
#reaction-tray[hidden]{display:none}#reaction-tray button{width:44px;height:44px;background:none;border:0;border-radius:50%;font-size:28px;padding:0}
#social-effects{position:absolute;inset:0;z-index:70;pointer-events:none;overflow:hidden}.social-bubble{position:absolute;left:50%;top:63%;transform:translate(-50%,-50%);font:clamp(38px,7vh,65px) system-ui,sans-serif;filter:drop-shadow(0 4px 6px #0009);animation:reaction-float 2.2s ease-out both;white-space:nowrap}
.social-bubble.check{font-family:CheckCelebration,Georgia,serif;font-weight:700;font-size:clamp(28px,5vh,55px);color:#ffedab;text-shadow:0 2px 0 #aa7a2d,0 0 22px #f7ce69;letter-spacing:1px}
.reaction-top{top:25%}.reaction-top-left{left:27%;top:25%}.reaction-top-right{left:73%;top:25%}.reaction-left{left:16%;top:35%}.reaction-right{left:84%;top:35%}
.victory-focus .victory-title{grid-area:1/1;animation:win-zoom .75s cubic-bezier(.16,1,.3,1) 1.1s both}
.games-title{grid-area:1/1;font:700 clamp(42px,12vw,110px)/1 CheckCelebration,Georgia,serif;color:#fff0b9;text-align:center;text-shadow:0 3px 0 #b88737,0 7px 18px #000b,0 0 30px #ffd66d;animation:games-call 1.15s ease-out both}
@keyframes games-call{0%{opacity:0;transform:scale(.35)}35%{opacity:1;transform:scale(1.1)}75%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.25)}}
@keyframes reaction-float{0%{opacity:0;transform:translate(-50%,-20%) scale(.4)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}30%,70%{opacity:1;transform:translate(-50%,-60%) scale(1)}100%{opacity:0;transform:translate(-50%,-115%) scale(.9)}}
@media(prefers-reduced-motion:reduce){.games-title{display:none}.social-bubble{animation:reaction-fade 2.2s linear!important}.victory-focus .victory-title{animation:none}}
@keyframes reaction-fade{0%,90%{opacity:1}100%{opacity:0}}

.audio-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.voice-levels{display:grid;gap:10px;margin:12px 0 16px}.voice-levels label{display:flex;align-items:center;gap:12px;font:16px Georgia,serif}.voice-levels input[type=range]{flex:1;min-width:0;accent-color:var(--gold);padding:0;border:0;background:none;height:36px;min-height:36px}.voice-previews{display:flex;flex-wrap:wrap;gap:8px}.voice-previews button{flex:1;min-width:105px;border:1px solid var(--gold);border-radius:12px;background:#ffffff0b;padding:10px 6px;font:14px Georgia,serif;min-height:44px}#voice-preview-status:empty{display:none}#voice-preview-status{font-size:14px;margin:8px 0}
/* Model 4: a full-height, gold-accented settings drawer. */
/* The game's footer also clears the home indicator and has full tap targets. */
body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) footer{bottom:calc(8px + env(safe-area-inset-bottom));height:44px;z-index:25;pointer-events:auto}
body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) footer button{min-height:44px;pointer-events:auto}
body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .player{height:calc(34% - 12px - env(safe-area-inset-bottom))}
#reaction-toggle{border:0;background:none;box-shadow:none;border-radius:0;bottom:calc(6.8% + env(safe-area-inset-bottom));font-size:36px}
#reaction-tray{flex-direction:column;gap:7px;bottom:calc(13% + env(safe-area-inset-bottom));padding:0;border:0;border-radius:0;background:none;box-shadow:none}
#reaction-tray button{background:none;border:0;box-shadow:none;border-radius:0;font-size:32px}

/* Footer windows share the settings palette. */

/* Contextual advice uses the existing turn area, leaving cards and controls clear. */
body.learning:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .status{top:49%;height:11%;justify-content:center}
body.learning #turn{font:400 14px/1.4 system-ui,sans-serif;border-radius:12px;padding:8px 12px;max-width:100%;max-height:100%;overflow-y:auto;overscroll-behavior:contain;background:var(--deep);color:#fff0d0}
body.learning #command{display:none}
.learning-actions{display:grid;gap:12px;margin:22px 0}
.learning-actions button,.learning-settings button{min-height:48px;font:600 16px/1.4 system-ui,sans-serif;padding:12px 16px;border:1px solid #d8b66d;border-radius:14px;white-space:normal;min-width:0;width:100%;background:#10232f;color:#f6ead1}
.learning-actions .primary,.learning-settings .primary{background:linear-gradient(#ffefb8,#e8bd68);color:#172434}
#modal[data-screen=learning-welcome] .game-dialog{background:linear-gradient(115deg,#0b1a25,#050d13 75%);border-color:#d8b66d;color:#f6ead1}
#modal[data-screen=learning-welcome] p{font-size:16px;line-height:1.6}
.learning-settings{padding-bottom:16px;border-bottom:1px solid #cab58b42}

.game-options{display:grid;gap:14px;margin:20px 0}
.game-options button{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;padding:20px;border:1px solid #d8b66d;border-radius:16px;background:linear-gradient(135deg,#163449,#07141b);color:#f6ead1;min-height:110px}
.game-options strong{font:700 26px/1.2 Georgia,serif;color:#ffe0a0}
.game-options span{font:400 16px/1.4 system-ui,sans-serif}.game-options small{font:400 14px/1.4 system-ui,sans-serif;color:#ddd2b9}
#modal[data-screen=games] .game-dialog{background:linear-gradient(115deg,#0b1a25,#050d13 75%);border-color:#d8b66d;color:#f6ead1}
footer button[hidden]{display:none!important}
/* Model 2: symbolic choices in gold-rimmed casino medallions. */
#modal:is([data-screen=games],[data-screen=learning-welcome]){background:#020b12a0;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
#modal:is([data-screen=games],[data-screen=learning-welcome]) .game-dialog{width:min(540px,calc(100vw - 28px));padding:32px 24px 36px;border:1px solid #d8b66d;border-radius:22px;background:linear-gradient(120deg,#0b1a25,#050d13 75%);box-shadow:0 24px 80px #000a;color:#fff0d0}
#modal:is([data-screen=games],[data-screen=learning-welcome]) h2{margin:0 24px 30px;text-align:center;font:700 clamp(24px,5.5vw,32px)/1.25 Georgia,serif;color:#fff0d0}
.medallion-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.game-dialog .medallion-choice{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:20px;min-width:0;padding:8px 0;background:none;border:0;border-radius:14px;color:#ffe1a0;cursor:pointer}
.medallion{position:relative;display:grid;place-items:center;width:min(100%,180px);aspect-ratio:1;border-radius:50%;border:6px solid #dab66a;outline:1px solid #ffedb5;outline-offset:2px;background:radial-gradient(circle at 32% 22%,#294557,#091726 60%,#02080e);box-shadow:inset 0 0 0 2px #fff0b2,inset 0 0 0 5px #6e441c,inset 0 0 0 7px #e3be72,inset 0 12px 24px #ffffff13,0 9px 18px #0008,0 0 20px #e8bd6820;color:#f1ce80;transition:transform .18s,box-shadow .18s}
.medallion-red{background:radial-gradient(circle at 32% 22%,#bf3430,#701313 60%,#31090c)}
.medallion-spade{font:400 clamp(86px,25vw,156px)/1 Georgia,serif;text-shadow:0 2px 0 #82521e,0 -1px 0 #fff3c4,0 5px 7px #0009}
.medallion-eight{font:400 clamp(68px,20vw,124px)/1 Georgia,serif;text-shadow:0 2px 0 #82521e,0 -1px 0 #fff3c4,0 5px 7px #0009}
.medallion svg{width:52%;height:52%;filter:drop-shadow(0 3px 2px #0008)}
.medallion-blue svg{fill:#eac477;stroke:#ffe9aa}
.medallion-label{font:400 clamp(18px,4.5vw,24px)/1.25 Georgia,serif;text-align:center;color:#ffe1a0}
.game-dialog .medallion-choice:hover .medallion{transform:translateY(-3px);box-shadow:inset 0 0 0 2px #fff0b2,inset 0 0 0 5px #6e441c,inset 0 0 0 7px #e3be72,0 12px 22px #0008,0 0 25px #e8bd6840}
.game-dialog .medallion-choice:active .medallion{transform:scale(.96)}
.game-dialog .medallion-choice:focus-visible{outline:2px solid #ffe1a0;outline-offset:5px}
@media(max-width:380px){#modal:is([data-screen=games],[data-screen=learning-welcome]) .game-dialog{padding:30px 18px}.medallion-options{gap:16px}.medallion{border-width:4px}.medallion-label{font-size:18px}}
@media(prefers-reduced-motion:reduce){.medallion{transition:none}}
body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) footer button{font-size:14px;padding-left:5px;padding-right:5px}
.game-dialog .game-options button:focus-visible{outline:2px solid #eac477;outline-offset:3px}
/* Plush reactions: compact picker, larger animated sticker at the sender's seat. */
#reaction-tray button .plush-icon{width:40px;height:40px;margin:auto;filter:drop-shadow(0 2px 3px #0006)}
.social-bubble.plush-bubble{width:clamp(112px,18vh,170px);height:clamp(112px,18vh,170px);font-size:0;white-space:normal;animation:plush-pop 2.8s ease-in-out both;filter:drop-shadow(0 7px 8px #0008)}
@keyframes plush-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(-12deg)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.15) rotate(8deg)}24%{transform:translate(-50%,-50%) scale(.95) rotate(-6deg)}38%{transform:translate(-50%,-50%) scale(1.05) rotate(4deg)}52%,78%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}100%{opacity:0;transform:translate(-50%,-75%) scale(.85)}}
@media(prefers-reduced-motion:reduce){.social-bubble.plush-bubble{animation:reaction-fade 2.8s linear!important}}

/* Match the settings drawer and keep table actions in the opposite corner. */
body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) footer[hidden]{display:none}
#more-menu{position:absolute;bottom:calc(6.8% + env(safe-area-inset-bottom));left:3%;z-index:10;min-width:44px;min-height:44px;padding:0;border:0;background:none;color:#f5e8d1;font:36px/1 Georgia,serif}
/* Galerie de profil : bleu et or, utilisable sur téléphone et ordinateur. */
body.profile-open{overflow:hidden}
#profile-screen[hidden]{display:none}
#profile-screen{position:fixed;inset:0;z-index:1000;overflow-y:auto;overscroll-behavior:contain;background:radial-gradient(ellipse at 50% 35%,#072554 0%,#020e24 65%);color:#fff3db;padding:calc(20px + env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom));box-sizing:border-box;font-family:Arial,sans-serif}
.profile-shell{width:min(100%,430px);margin:auto;text-align:center;min-height:calc(100dvh - 70px);display:flex;flex-direction:column;justify-content:center}
.profile-brand{font:700 clamp(20px,6vw,30px) Georgia,serif;letter-spacing:2px;color:#efd095;margin:8px 0 22px}
.profile-shell h1{font:700 clamp(25px,7vw,37px)/1.15 Georgia,serif;margin:0 0 12px;outline:none}.profile-shell h1 em{font-style:normal;color:#f3d087}.profile-sub{color:#c4cee0;font-size:14px;line-height:1.5;margin:0 0 20px}
.profile-shell form{text-align:left}.profile-shell label{display:block;color:#bbc8e0;font-size:14px}.profile-shell input:not([type=range]):not([type=checkbox]):not([type=file]){width:100%;box-sizing:border-box;border:1px solid #617496;border-radius:12px;background:#040e21;color:#fff;padding:14px;font-size:16px;margin:7px 0 12px;min-height:48px}.profile-shell input:focus{outline:2px solid #2689ff;outline-offset:2px}
.profile-shell button{font:600 15px Arial,sans-serif;cursor:pointer;color:#f4deb0;min-height:44px}.profile-shell button:disabled{opacity:.5;cursor:default}.profile-shell button:focus-visible{outline:3px solid #40a7ff;outline-offset:3px}
.profile-identity{display:flex;align-items:center;gap:16px;margin-bottom:16px}.profile-identity label{flex:1;min-width:0}.profile-avatar{display:block;aspect-ratio:1;background-color:#06172d;background-repeat:no-repeat;overflow:hidden;border-radius:50%;border:2px solid #e9c77c;box-sizing:border-box}.profile-avatar img{width:100%;height:100%;object-fit:cover;display:block}#avatar-preview{width:78px;flex-shrink:0;box-shadow:0 0 18px #f6d38325}
.profile-tabs{display:flex;border:1px solid #d4b275;border-radius:30px;padding:3px;margin-bottom:14px}.profile-tabs button{width:50%;border:0;background:transparent;border-radius:30px;color:#b5c0dc}.profile-tabs button.active{background:linear-gradient(#235fda,#103989);color:#fff;box-shadow:0 0 10px #008cff;border:1px solid #2b9dff}
.profile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}.profile-grid button{position:relative;aspect-ratio:1;padding:0;border:1px solid #897351;border-radius:15px;overflow:hidden;background:#06182c;min-width:0}.profile-grid .profile-avatar{width:100%;height:100%;border:0;border-radius:0}.profile-grid b{display:none;position:absolute;top:6px;right:6px;border-radius:50%;background:#f7d383;color:#061629;width:25px;height:25px;line-height:25px}.profile-grid button.selected{border:2px solid #6ec5ff;box-shadow:0 0 12px #008cff}.profile-grid button.selected b{display:block}.profile-grid[hidden],.profile-photo[hidden]{display:none}
.profile-outline{width:100%;padding:12px;border:1px solid #e6bf76;border-radius:14px;background:#07172c;margin-bottom:16px}.password-field{position:relative}.password-field input{padding-right:52px!important}.password-field button{position:absolute;right:8px;top:9px;background:none;border:0;width:40px;color:#b7c9e7}.profile-submit{width:100%;border:1px solid #ffe0a0;border-radius:14px;padding:16px;background:linear-gradient(120deg,#c99a49,#ffe39c,#bf8e3c);color:#131119!important;box-shadow:0 4px 18px #0004;margin:6px 0 15px}.profile-links{display:flex;justify-content:center;gap:15px;flex-wrap:wrap}.profile-links button,.profile-link{background:none;border:0;padding:10px;color:#f5d795}.profile-shell [role=alert]{color:#ffb9b9;font-size:14px;line-height:1.4;margin:5px 0;min-height:0}
.profile-photo .profile-avatar,#my-avatar{width:120px;margin:10px auto 18px}.profile-photo p{color:#bac7e0}#my-name{font:26px Georgia,serif;margin:0 0 24px}
#crop-canvas{width:min(100%,300px);height:auto;align-self:center;touch-action:none;border-radius:18px;background:#051225}.zoom-label{text-align:left;margin:20px 0 10px}.zoom-label input{display:block;width:100%;margin-top:12px;accent-color:#f0cb82}.crop-moves{display:flex;gap:10px;justify-content:center;margin-bottom:14px}.crop-moves button{width:48px;border:1px solid #d4b275;border-radius:10px;background:#0a2043}
.recovery-card{background:#071b38;border:1px solid #d4b275;border-radius:16px;padding:20px;margin:12px 0 22px}.recovery-card strong{display:block;overflow-wrap:anywhere;font:20px/1.5 monospace;user-select:all;letter-spacing:1px;color:#ffdf94;margin-bottom:18px}.recovery-card button{background:#102c56;border:1px solid #667ea5;border-radius:10px;margin:6px;padding:10px}.recovery-check{display:flex!important;align-items:center;justify-content:center;gap:10px;min-height:48px}.recovery-check input{width:20px;height:20px;accent-color:#f0cb82}
.seat-avatar{display:inline-block!important;width:30px;height:30px;vertical-align:middle;margin-right:7px}.player .label{display:flex;align-items:center;justify-content:center;gap:5px}.player .label .profile-avatar{width:29px;height:29px;flex:none}
@media(min-width:700px){#profile-screen{padding:30px}.profile-shell{max-width:430px;border:1px solid #756345;border-radius:24px;padding:32px;background:#041329c9;min-height:0}.profile-grid{gap:12px}}
@media(max-height:700px){.profile-shell{justify-content:flex-start}.profile-brand{margin-bottom:14px}.profile-grid{gap:7px}.profile-sub{margin-bottom:12px}}
#player-avatar[hidden]{display:none!important}
/* Un emplacement reste visible lorsque le joueur n’a pas d’avatar. */
.avatar-empty{background:transparent!important;border:1px solid #d7be8655;box-shadow:none}
.opponent .label,.online-seat .label{display:inline-flex;align-items:center;justify-content:center;gap:6px}
:is(.player,.opponent,.online-seat) .label .profile-avatar{width:40px;height:40px;flex-shrink:0;margin-right:0}
@media(min-width:700px){:is(.player,.opponent,.online-seat) .label .profile-avatar{width:46px;height:46px}}
/* Les portraits se détachent des noms ; le score a son propre cadre. */
#profile-seat{position:absolute;right:3%;bottom:calc(6.8% + env(safe-area-inset-bottom));width:48px;height:48px;padding:0;border:0;background:none;z-index:10;border-radius:50%}
#profile-seat .profile-avatar{width:100%;height:100%;box-shadow:0 3px 10px #0006}
#computer-avatar,#opponent-avatars{position:absolute;top:14.7%;left:calc(3% + 22px);transform:translateX(-50%);z-index:6}
#computer-avatar,#opponent-avatars .opponent-avatar{width:48px;height:48px}
#opponent-avatars{display:none;flex-direction:column;gap:12px}
.multiplayer #computer-avatar{display:none}.multiplayer #opponent-avatars{display:flex}
#reaction-toggle{bottom:calc(6.8% + env(safe-area-inset-bottom) + 62px)}
#reaction-tray{bottom:calc(6.8% + env(safe-area-inset-bottom) + 114px)}
#scores{top:8.8%;left:50%;right:auto;transform:translateX(-50%);width:min(72%,440px);min-height:34px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;padding:5px 12px;border:1px solid #d9c5a0;border-radius:7px;background:#06182ef2;box-shadow:0 3px 9px #0007;z-index:6;font:500 clamp(12px,1.7vh,17px)/1.2 Arial,sans-serif;color:#f5e8d1;text-shadow:none}
#scores .score-name{max-width:none;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#scores .score-result{font-size:clamp(17px,2.4vh,23px);font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:1px;color:#ffdfa0}
#scores:is([data-players="3"],[data-players="4"]){grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:4px 8px}
#scores[data-players="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
#scores .score-member{display:flex;align-items:center;justify-content:center;gap:6px;max-width:none;min-width:0}
#scores .score-member span{max-width:none;font-size:11px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#scores .score-member strong{color:#ffdfa0;font-size:18px}
body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .opponent{top:14.7%;height:15%}
.seat-top,.seat-top-left,.seat-top-right{top:14.7%}
@media(max-height:600px){#scores{top:9%;min-height:28px;padding:3px 9px;font-size:11px}#scores .score-result{font-size:16px}#computer-avatar,#opponent-avatars .opponent-avatar,#profile-seat{width:40px;height:40px}#reaction-toggle{bottom:calc(6.8% + env(safe-area-inset-bottom) + 48px)}#reaction-tray{bottom:calc(6.8% + env(safe-area-inset-bottom) + 98px)}}
/* Un bouton stable, un score discret et des espaces réguliers sur la table. */
#computer-avatar.avatar-empty{background:linear-gradient(#112d4d,#06182e)!important;border:2px solid #e9c77c;box-shadow:0 3px 10px #0006}
body[data-theme=green] #computer-avatar.avatar-empty{background:linear-gradient(#16513b,#052b20)!important}
body[data-theme=wine] #computer-avatar.avatar-empty{background:linear-gradient(#5b263e,#280e20)!important}
#scores{width:min(64%,360px);min-height:27px;gap:8px;padding:3px 9px;border-color:#d9c5a075;border-radius:4px;background:#071a2cce;box-shadow:0 2px 4px #0003;font:400 clamp(11px,1.5vh,14px)/1.2 Georgia,serif}
#scores .score-result{font-size:clamp(14px,1.9vh,18px);font-weight:400;letter-spacing:.5px;color:#f5e8d1}
#scores .score-member strong{font-size:15px;font-weight:400}#scores .score-member span{font-size:10px}
body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .center{top:calc(47% - min(14.3vw,8.45vh));height:18%;gap:clamp(32px,8vw,80px)}
body:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .status{top:57%;height:4%}
body.learning:is([data-theme=indigo],[data-theme=green],[data-theme=wine],[data-theme=money-beac]) .status{top:54%;height:7%}

/* Centre le portrait sur la hauteur du nom de l’ordinateur. */
#computer-avatar{top:calc(14.7% + clamp(8.8px,1.265vh,13.2px) + 5px);transform:translate(-50%,-50%)}
/* Additional plush reactions, laid out in three columns and two rows. */
#comment-toggle{position:absolute;right:3%;bottom:calc(6.8% + env(safe-area-inset-bottom) + 114px);width:44px;height:44px;padding:6px;background:none;border:0;color:#f5e8d1;z-index:11;cursor:pointer}#comment-toggle svg{width:30px;height:30px}#reaction-tray{bottom:calc(6.8% + env(safe-area-inset-bottom) + 166px)}
@media(max-height:600px){#comment-toggle{bottom:calc(6.8% + env(safe-area-inset-bottom) + 98px)}#reaction-tray{bottom:calc(6.8% + env(safe-area-inset-bottom) + 148px)}}@media(prefers-reduced-motion:reduce){#modal[data-screen=comment] .game-dialog{animation:none}.social-bubble.comment{animation:comment-pop 6s linear}}

/* Compact two-line composer, growing upward from the bottom edge. */
.medallion-die{display:block;width:72%;height:72%;object-fit:contain;filter:drop-shadow(0 5px 4px #0008)}

header .game-back{position:absolute;left:2.5%;top:calc(8% - 5px);z-index:2;width:40px;height:40px;min-width:40px;min-height:40px;display:grid;place-items:center;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:#edc57a;font:clamp(22px,5.2vw,28px)/1 Georgia,serif;touch-action:manipulation}

.songoh-mini{width:58%;height:64%;display:grid;grid-template-columns:1fr 1fr;gap:3%;padding:6%;border:2px solid #f4d28d;border-radius:12px;background:linear-gradient(120deg,#825021,#3f200d,#ae7735);box-shadow:0 3px 8px #0008}.songoh-mini i{border-radius:50%;background:radial-gradient(ellipse at 50% 65%,#a77235,#301406 70%);box-shadow:inset 0 2px 3px #000b,0 1px 1px #e8c58b80;border:1px solid #c59d6380}

/* Smaller rings with fully visible sculptural cutouts, 20% above the top edge. */
#modal[data-screen=games] .medallion{width:min(80%,144px);overflow:visible;isolation:isolate}
#modal[data-screen=games] .medallion-options{gap:26px 16px}
#modal[data-screen=games] .medallion-choice{gap:18px;padding:clamp(28px,7vw,36px) 0 8px}
.medallion-object{position:absolute;left:50%;top:calc(-20% - 6px);height:100%;width:auto;aspect-ratio:var(--cutout-ratio,1);transform:translateX(-50%);z-index:2;pointer-events:none;filter:drop-shadow(0 6px 5px #0009)}
.medallion-object img{position:absolute;display:block;max-width:none;object-fit:fill;width:var(--cutout-width,100%);height:var(--cutout-height,100%);left:var(--cutout-left,0%);top:var(--cutout-top,0%);user-select:none;-webkit-user-drag:none}
@media(max-width:380px){.medallion-object{top:calc(-20% - 4px)}}

.symbol-spade{--cutout-ratio:0.9248554913294798;--cutout-width:111.96428571428572%;--cutout-height:103.55078447563997%;--cutout-left:-6.25%;--cutout-top:-1.6515276630883566%}
.symbol-eight{--cutout-ratio:0.7848101265822784;--cutout-width:134.83870967741936%;--cutout-height:105.82278481012659%;--cutout-left:-17.956989247311828%;--cutout-top:-2.0253164556962027%}
.symbol-seeds{--cutout-ratio:1.024263431542461;--cutout-width:106.09137055837563%;--cutout-height:108.66551126516464%;--cutout-left:-3.6379018612521152%;--cutout-top:-4.679376083188909%}
.symbol-die{--cutout-ratio:0.9284386617100372;--cutout-width:125.52552552552552%;--cutout-height:116.54275092936803%;--cutout-left:-12.312312312312311%;--cutout-top:-7.992565055762081%}

/* Only the interior surfaces of the four game-selector rings. */
#modal[data-screen=games] .medallion:before{content:'';position:absolute;inset:8px;border-radius:50%;z-index:0;pointer-events:none;box-shadow:inset 0 5px 12px #0008,inset 0 -2px 4px #ffffff15}
#modal[data-screen=games] #choose-check .medallion:before{background-image:radial-gradient(circle at 32% 26%,#1a55bb10,#010a27a0 92%),url('/assets/ludo-surfaces-62.png');background-size:100% 100%,300% 300%;background-position:center,100% 0;background-repeat:no-repeat}
#modal[data-screen=games] #choose-eight .medallion:before{background:radial-gradient(ellipse at 35% 20%,#d3444d,#891629 46%,#420714 83%,#28030d);box-shadow:inset 0 4px 12px #0007,inset -4px -4px 7px #f1a79f66,inset 2px 2px 4px #ffa99d40}
#modal[data-screen=games] #choose-ludo .medallion:before{background-image:radial-gradient(circle at 32% 26%,#3bd3a510,#001e1690 92%),url('/assets/ludo-surfaces-62.png');background-size:100% 100%,300% 300%;background-position:center,0 50%;background-repeat:no-repeat}
#modal[data-screen=games] #choose-songoh .medallion:before{background-image:linear-gradient(130deg,#cc82351c,#21100555),url('/assets/songoh-wood-68.png');background-size:100% 100%,1000% 1000%;background-position:center,83.333% 5.555%;background-repeat:no-repeat}

/* Sculpted ndop table with USD and Central African BEAC notes. */
body[data-theme=money-beac] main{background-image:url("assets/table-money-beac-v2.webp");background-size:100% 100%;background-position:center;background-repeat:no-repeat}
.medallion-dames{position:absolute;inset:-17% 3% 10%;z-index:2;filter:drop-shadow(0 4px 5px #0009)}.medallion-dames svg{width:100%;height:100%;overflow:visible}
/* All six choices fit the available viewport, including short phone screens. */
#modal[data-screen=games]{padding:12px;overflow:hidden}
#modal[data-screen=games] .game-dialog{box-sizing:border-box;height:min(88dvh,840px);max-height:calc(100dvh - 24px);padding:clamp(14px,3dvh,28px) clamp(14px,4vw,28px);overflow:hidden;display:flex;flex-direction:column}
#modal[data-screen=games] #modalbody{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
#modal[data-screen=games] h2{flex:none;margin:6px 24px 16px;font-size:clamp(18px,3.2dvh,28px);line-height:1.25}
#modal[data-screen=games] .medallion-options{container-type:size;flex:1;min-height:0;width:100%;grid-template-rows:repeat(3,minmax(0,1fr));gap:12px 16px}
#modal[data-screen=games] .medallion-choice{--medal-size:min(144px,34cqw,calc((100cqh - 24px)/3/1.2 - 34px));min-height:0;gap:8px;padding:calc(var(--medal-size)*.2 + 4px) 0 2px;justify-content:center}
#modal[data-screen=games] .medallion{width:var(--medal-size);height:var(--medal-size);box-sizing:border-box;flex:none;border-width:clamp(3px,1dvh,6px)}
#modal[data-screen=games] .medallion-label{flex:none;font-size:clamp(10px,min(3.2vw,2.2dvh),20px);line-height:1.25;white-space:nowrap}
#modal[data-screen=games] .medallion-pool{position:absolute;left:-8%;right:-8%;top:-32%;bottom:0;z-index:2;filter:drop-shadow(0 5px 4px #0009)}
#modal[data-screen=games] .medallion-pool svg{width:100%;height:100%;overflow:visible;fill:none;stroke:none}
.profile-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-height:42dvh;overflow-y:auto;overscroll-behavior:contain;padding:3px;scrollbar-width:thin;scrollbar-color:#d4b275 #06182c}

/* Selected corridor 9: a full-bleed sandstone passage, original sharp emblems. */
#modal[data-screen=games]{padding:0;background:#674827;backdrop-filter:none;-webkit-backdrop-filter:none}
#modal[data-screen=games] .game-dialog{isolation:isolate;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;border:0;border-radius:0;box-shadow:none;background:#674827;padding:calc(18px + env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));overflow:hidden}
#modal[data-screen=games] .game-dialog::before{content:'';position:absolute;z-index:-2;pointer-events:none;left:var(--corridor-left,0px);top:var(--corridor-top,0px);width:var(--corridor-width,100%);height:var(--corridor-height,100%);background:url('/assets/game-corridor-9.webp') center/100% 100% no-repeat}
#modal[data-screen=games] .game-dialog::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(#160c0655,transparent 25%,#130b0620 70%,#130b0640)}
#modal[data-screen=games] #modalbody{width:min(100%,600px);margin:0 auto}
#modal[data-screen=games] h2{margin:clamp(4px,2dvh,20px) 30px clamp(12px,3dvh,28px);color:#fff0cc;font-size:clamp(18px,min(5.2vw,3.5dvh),32px);text-shadow:0 2px 7px #28170a,0 0 20px #28170a99}
#modal[data-screen=games] .close{z-index:3;top:calc(10px + env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));color:#fff0cc;text-shadow:0 2px 6px #28170a}
#modal[data-screen=games] .medallion-options{gap:clamp(6px,1.5dvh,16px) clamp(16px,7vw,60px)}
#modal[data-screen=games] .medallion-choice{--medal-size:min(170px,34cqw,calc((100cqh - 32px)/3/1.25 - 26px));gap:clamp(6px,1.3dvh,12px)}
#modal[data-screen=games] .medallion-label{font-size:clamp(11px,min(3.4vw,2.2dvh),20px);color:#fff0cc;font-weight:500;text-shadow:0 2px 4px #1a1008,0 0 8px #1a1008,0 0 18px #1a1008}
#modal[data-screen=games] .medallion-choice:focus-visible{outline:2px solid #fff4ca;outline-offset:2px;background:#120b0533}
@media(orientation:landscape) and (max-height:600px){
 #modal[data-screen=games] .game-dialog{padding-top:calc(8px + env(safe-area-inset-top));padding-bottom:calc(6px + env(safe-area-inset-bottom))}
 #modal[data-screen=games] h2{margin:0 32px 8px;font-size:clamp(16px,5dvh,24px)}
 #modal[data-screen=games] .medallion-options{gap:4px 40px}
 #modal[data-screen=games] .medallion-choice{--medal-size:min(110px,25cqw,calc((100cqh - 8px)/3/1.25 - 20px));gap:4px;padding-top:calc(var(--medal-size)*.2 + 2px)}
 #modal[data-screen=games] .medallion-label{font-size:clamp(10px,3dvh,14px)}
}