:root{font-family:system-ui,sans-serif;color:#173d2b;background:#f7f1e5;--green:#006B39}*{box-sizing:border-box}body{margin:0}header{background:var(--green);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:18px max(20px,calc((100vw - 850px)/2));gap:20px}header img{width:100px;max-height:90px;object-fit:contain;background:#fff;border-radius:12px}main{max-width:850px;margin:auto;padding:28px 18px 60px}h1{font-size:clamp(32px,6vw,48px);margin-bottom:8px}h2{margin:8px 0 14px}p{line-height:1.6}a{color:var(--green)}.card{background:#fffdf7;border:1px solid #d9c7a7;border-radius:22px;padding:24px;margin:22px 0;box-shadow:0 6px 20px #6043220a}.eyebrow{font-size:12px;letter-spacing:2px;color:#765b32}label{display:block;margin-bottom:8px}select,button{font:inherit;min-height:46px;border-radius:10px;padding:10px;border:1px solid #9dbea9}select{width:100%;background:white}button{cursor:pointer;background:var(--green);color:white}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #b87924;outline-offset:3px}#columns,#board{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}#columns{margin-bottom:8px}#columns button{padding:4px;min-width:0}#board{background:var(--green);border:8px solid #8b673f;border-radius:16px;padding:8px;margin-bottom:20px}.cell{aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:#f2e8d4;font-size:clamp(18px,5vw,42px);box-shadow:inset 0 2px 4px #0002}.upcoming{display:grid;grid-template-columns:1fr 1fr;gap:16px}.upcoming .card{margin-top:0}summary{cursor:pointer;padding:12px 0}#qr img{max-width:100%;width:200px}footer{font-size:13px;color:#70644e}@media(max-width:550px){header span{font-size:13px}.card{padding:16px}.upcoming{grid-template-columns:1fr;gap:0}#board{gap:4px;padding:5px;border-width:5px}}
:root{accent-color:#006B39}[hidden]{display:none!important}input{font:inherit;display:block;width:100%;padding:12px;border:1px solid #9dbea9;border-radius:10px;min-height:46px;background:white}label{margin-top:16px}.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}#lobby button{margin:12px 0}#networkStatus{overflow-wrap:anywhere}#turn{font-weight:650;background:#edf4e9;border-radius:12px;padding:14px}#roomInfo{font-weight:600;overflow-wrap:anywhere}.draughts{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));border:6px solid #876543;border-radius:8px;overflow:hidden}.square{position:relative;aspect-ratio:1;border-radius:0;border:0;padding:4px;min-height:0;display:grid;place-items:center}.square.unused{background:#f2e8d4}.square.playable{background:#806340}.square:disabled{opacity:1;cursor:default}.square small{position:absolute;top:1px;left:2px;font-size:9px;color:#f5e7d5}.square.possible{box-shadow:inset 0 0 0 3px #cbe88e}.square.selected{box-shadow:inset 0 0 0 3px #ffd166}.draught{width:78%;height:78%;border-radius:50%;display:grid;place-items:center;font-size:clamp(16px,4vw,32px);border:2px solid #382d20;box-shadow:0 3px 2px #0004}.draught.white{background:#fff8e6;color:#4a3723}.draught.black{background:#153a29;color:#fff8e6}.horse-board{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));grid-template-rows:repeat(15,minmax(0,1fr));aspect-ratio:1;background:linear-gradient(135deg,#edf4e7,#eee0c3);border:5px solid #876543;border-radius:16px;padding:6px;gap:1px}.horse-cell{position:relative;background:#fff8e7;border:1px solid #b8a383;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;font-size:clamp(7px,1.7vw,12px);min-width:0;min-height:0}.horse-cell.lane1,.horse-cell.start1{background:#c1dbc2}.horse-cell.lane2,.horse-cell.start2{background:#f0d19c}.horse-token{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(10px,2.4vw,20px);border-radius:50%;font-weight:bold;z-index:1}.horse-token.player1{background:#006B39;color:white}.horse-token.player2{background:#a76510;color:white}.horse-cell:has(.horse-token:nth-of-type(2)){outline:3px double #006B39}#horseSummary{font-size:13px;overflow-wrap:anywhere}#die{font-weight:bold}#rules{font-size:14px}#roll{min-width:160px}
.board-column{display:grid;grid-template-rows:repeat(6,1fr);gap:6px;min-width:0;min-height:0;width:100%;padding:0;border:0;border-radius:10px;background:transparent;color:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.board-column:disabled{opacity:1;cursor:default}.board-column .cell{width:100%;pointer-events:none}.board-column:not(:disabled):active{background:#ffffff40}.board-column:focus-visible{outline:3px solid #ffd166;outline-offset:2px}@media(hover:hover){.board-column:not(:disabled):hover{background:#ffffff26}}@media(max-width:550px){.board-column{gap:4px}}

@font-face{font-family:Philosopher;src:url('fonts/Philosopher-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}.games-brand{display:flex;flex-direction:column;gap:6px;text-align:right}.games-brand strong{font-family:Philosopher,serif;font-weight:700;font-size:clamp(22px,4vw,32px);letter-spacing:.02em}.games-brand span{font-size:14px}.cell .nature-token{display:block;width:92%;height:92%;object-fit:contain;pointer-events:none;user-select:none}.cell.acorn-token{background:radial-gradient(circle at 30% 25%,#fff6d5,#d0a341 80%)}.cell.leaf-token{background:radial-gradient(circle at 30% 25%,#d5efb4,#72ac68 80%)}
header img{background:transparent;border-radius:0}.cell .nature-token{position:relative;z-index:1}.fall-controls{display:flex;align-items:center;gap:8px;margin:14px 0}.fall-controls input{width:auto;min-height:0;margin:0}
#board{position:relative;max-width:580px;margin-left:auto;margin-right:auto;gap:5px;padding:12px;background:linear-gradient(135deg,#b7844e,#734621 70%,#a66f37);border:6px solid #5c371c;border-radius:18px;box-shadow:inset 0 3px 8px #fff4,0 12px 18px #0006;overflow:hidden}#columns{max-width:580px;margin-left:auto;margin-right:auto}#board .board-column{gap:5px}#board .cell{background:radial-gradient(circle at 40% 35%,#172f25,#091e18);box-shadow:inset 0 5px 8px #0008}#board .nature-disc{display:grid;place-items:center;position:relative;z-index:2;width:90%;height:90%;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff6d5,#d0a341 80%);box-shadow:inset 0 2px 3px #fff7,0 3px 4px #0009}#board .nature-disc.leaf-disc{background:radial-gradient(circle at 30% 25%,#c0e9a1,#08723e 75%)}#board .nature-token{width:92%;height:92%;filter:drop-shadow(0 2px 2px #0005)}
.connect4-panel{background:#102c24;color:#f8f4e9;border-color:#254b3d}.connect4-panel h2{color:#f8f4e9}.connect4-panel #turn{background:#173e31;color:#fff3d3}.connect4-panel button{background:#f9f0d9;color:#233b2d;border:1px solid #d5b986}.connect4-panel #rules a{color:#e8c68a}#board .board-column{background:transparent;border:0;padding:0}
#columns{display:none!important}#board .board-column{-webkit-appearance:none;appearance:none;overflow:visible}#board .nature-disc.falling-ghost{position:absolute;z-index:30;pointer-events:none;animation:acv-disc-fall 1.15s cubic-bezier(.25,.5,.35,1) both;will-change:transform}@keyframes acv-disc-fall{0%{transform:translateY(var(--fall-distance))}86%{transform:translateY(4px)}94%{transform:translateY(-2px)}100%{transform:translateY(0)}}.play-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:12px 0}.play-toolbar .fall-controls{margin:0}.game-fullscreen{position:fixed!important;inset:0!important;z-index:1000!important;margin:0!important;border:0!important;border-radius:0!important;max-width:none!important;height:100vh;height:100dvh;overflow:auto;overscroll-behavior:contain;padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}.game-fullscreen #instructions,.game-fullscreen>details{display:none}.game-fullscreen #board{width:min(100%,calc((100vh - 230px)*7/6));width:min(100%,calc((100dvh - 230px)*7/6));max-width:780px}.game-fullscreen #turn{padding:8px 12px;margin:8px 0}.game-fullscreen h2{margin:0 0 8px}.game-fullscreen .actions{justify-content:center;margin-top:12px}.game-fullscreen .play-toolbar{max-width:780px;margin:8px auto}.game-fullscreen #fullscreen{margin-left:auto;min-height:44px}

.draughts-panel{background:#163c2e;color:#fff1d9}.draughts-panel #turn{color:#163c2e}.draughts-panel .draughts{max-width:660px;margin:auto;border:10px solid #855327;box-shadow:0 8px 0 #513119,0 15px 25px #0005,inset 0 2px 4px #fff7;border-radius:14px}.draughts-panel .square.unused{background:linear-gradient(130deg,#f3dfb7,#ddbc83)}.draughts-panel .square.playable{background:linear-gradient(130deg,#93683c,#674323)}.draughts-panel .square small{color:#fff9;left:3px;top:2px;font-size:9px}.draughts-panel .draught{width:78%;height:78%;border:2px solid #b59054;box-shadow:inset 0 0 0 4px #fff3,inset 0 0 0 6px #0002,0 4px 0 #50331e,0 6px 5px #0006}.draughts-panel .draught.white{background:radial-gradient(circle at 35% 25%,#fffdf3,#e1c997);color:#85602b}.draughts-panel .draught.black{background:radial-gradient(circle at 35% 25%,#537665,#122a20);color:#f2d19b}.draughts-panel .square.possible{box-shadow:inset 0 0 0 3px #e9ce76}.draughts-panel .square.selected{box-shadow:inset 0 0 0 4px #fff2a4}.game-fullscreen .draughts{width:min(100%,calc(100dvh - 250px));max-width:780px}.draughts-panel #rules a{color:#f4d99c}

.draughts-panel .draught{position:relative;display:grid;place-items:center;width:84%;height:84%;border-radius:50%;border:2px solid #b89457;box-shadow:inset 0 2px 2px #fff9,inset 0 -3px 2px #0003,inset 0 0 0 4px #fff2,inset 0 0 0 7px #0002,0 4px 0 #5a3b20,0 7px 5px #0007}.draughts-panel .draught:after{content:'';position:absolute;inset:13%;border-radius:50%;border:1px solid currentColor;opacity:.35;pointer-events:none}.draughts-panel .draught.white{background:radial-gradient(ellipse at 35% 20%,#fffdf0 0,#f6e6bf 45%,#cda464 100%);color:#87632f}.draughts-panel .draught.black{background:radial-gradient(ellipse at 35% 20%,#528c66 0,#006B39 48%,#083622 100%);color:#edce82;border-color:#c7a461;box-shadow:inset 0 2px 2px #cbf6d599,inset 0 -3px 2px #001c16aa,inset 0 0 0 4px #ffedab22,inset 0 0 0 7px #0002,0 4px 0 #092a1a,0 7px 5px #0007}.oak-mark{width:53%;height:61%;overflow:visible;filter:drop-shadow(0 1px 0 #fff5)}.oak-mark path:first-child{fill:currentColor;fill-opacity:.18;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}.oak-mark path:last-child{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}.crown-mark{font-size:clamp(18px,4vw,42px);text-shadow:0 1px 1px #fff7,0 -1px 1px #0005}.draughts-panel .draught.king:before{content:'';position:absolute;inset:5%;border:2px solid currentColor;border-radius:50%;opacity:.7}.draughts-panel .actions button,.draughts-panel #fullscreen{background:linear-gradient(#fff6df,#dec392);border:1px solid #a57b43;color:#183f2b;box-shadow:inset 0 1px #fff,0 3px 0 #715331;border-radius:12px}.draughts-panel .actions button:active,.draughts-panel #fullscreen:active{transform:translateY(2px);box-shadow:none}.draughts-panel .square small{font-size:clamp(7px,1vw,10px);opacity:.7}.draughts-panel .square.possible{box-shadow:inset 0 0 0 3px #f4d88a}.draughts-panel .square.selected{box-shadow:inset 0 0 0 4px #fff8bf}

.draught-visual{display:block;position:relative;z-index:1;object-fit:contain;pointer-events:none;user-select:none;width:74%;height:74%}.draught-visual.official-logo{width:67%;height:67%;filter:drop-shadow(0 1px 1px #0004)}.draught-visual.gold-acorn{width:90%;height:90%;filter:drop-shadow(0 2px 1px #0006)}.king-badge{position:absolute;z-index:3;right:-3%;bottom:-3%;width:44%;height:44%;display:grid;place-items:center;font-size:clamp(12px,2.6vw,25px);line-height:1;background:#f9e4ae;color:#674621;border:1px solid #a57830;border-radius:50%;box-shadow:0 2px 2px #0005}
.draught-visual.official-logo{width:90%;height:90%;filter:drop-shadow(0 2px 1px #0005)}

.game-outcome{padding:20px;border:2px solid #d9b75f;border-radius:16px;background:linear-gradient(135deg,#fff8e7,#e5f0dc);color:#16422b;text-align:center;margin:14px 0;box-shadow:0 5px 12px #0002}.game-outcome h3{font:clamp(22px,4vw,30px) Philosopher,serif;margin:0 0 10px}.game-outcome p{margin:0;line-height:1.6}.game-outcome.lost{background:linear-gradient(135deg,#fff5e6,#efe2ca);border-color:#b89860}.game-fullscreen .game-outcome{padding:12px;max-width:780px;margin:8px auto}.game-fullscreen:has(.game-outcome:not([hidden])) #board{max-width:550px}.game-fullscreen:has(.game-outcome:not([hidden])) .draughts{max-width:550px}

.game-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0}.game-tile{display:flex;flex-direction:column;align-items:center;gap:14px;padding:18px 12px;border:2px solid #c0a069;border-radius:18px;background:linear-gradient(145deg,#fff9ec,#ecdec3);color:#16432e;box-shadow:0 5px 0 #8b683d;min-width:0;cursor:pointer}.game-tile strong{font:700 22px Philosopher,serif}.game-tile small{font-size:12px;line-height:1.4}.game-tile[aria-pressed=true]{border-color:#006B39;outline:3px solid #bcd1ac;outline-offset:2px}.game-tile:hover{transform:translateY(-2px)}.tile-preview{display:grid;width:100%;max-width:190px;aspect-ratio:1.3;border:5px solid #946233;border-radius:10px;overflow:hidden;box-shadow:0 4px 5px #0003;pointer-events:none}.mini-connect4{grid-template-columns:repeat(7,1fr);gap:3px;padding:6px;background:linear-gradient(125deg,#b4814a,#6e4220)}.mini-connect4 i{border-radius:50%;background:#123326;aspect-ratio:1;display:grid;place-items:center;overflow:hidden}.mini-connect4 img{width:100%;height:100%;object-fit:contain}.mini-draughts{grid-template-columns:repeat(10,1fr);aspect-ratio:1}.mini-draughts i{background:#efdbaf;aspect-ratio:1;display:grid;place-items:center}.mini-draughts i.dark{background:#76512e}.mini-draughts em{display:block;border-radius:50%;width:78%;height:78%;border:1px solid #c5a469}.mini-white{background:#f7edcc}.mini-black{background:#006B39}.mini-horses{position:relative;grid-template-columns:1fr 1fr;gap:18%;padding:6px;background:#edd5a8;aspect-ratio:1}.mini-horses i{font:clamp(12px,2vw,23px) Georgia;color:#f8e7bd;border-radius:8px;display:grid;place-items:center}.mini-horses>img{position:absolute;left:41%;top:41%;width:18%;height:18%;object-fit:contain}.mini-coloring{grid-template-columns:repeat(10,1fr);background:#fff;aspect-ratio:1.3}.mini-coloring i{display:grid;place-items:center;border:1px solid #e2dfd2;font:9px system-ui;color:#8a8a77}.mini-coloring i:nth-child(7n){background:#dac292;color:transparent}.mini-coloring i:nth-child(11n){background:#006B39;color:transparent}#changeTable{font-size:13px;padding:8px 12px;min-height:36px;margin-top:4px}@media(max-width:900px){.game-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:430px){.game-cards{gap:12px}.game-tile{padding:14px 8px;gap:10px}.game-tile strong{font-size:20px}.tile-preview{max-width:150px}}
main>h1{margin:12px 0;font-size:36px}main>p{margin:8px 0 18px}section:has(>#access){display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 18px}section:has(>#access)>h2{display:none}section:has(>#access)>p{margin:0}section:has(>#access)>details{margin-left:auto;font-size:13px}section:has(>.game-cards){padding:18px}section:has(>.game-cards)>.eyebrow{display:none}section:has(>.game-cards)>h2{margin:0 0 10px}.game-tile .tile-preview{aspect-ratio:1.25}.game-tile small{margin-top:auto}@media(max-width:500px){main>h1{font-size:30px}section:has(>#access)>details{margin-left:0}}

.game-cards{grid-template-columns:repeat(5,minmax(0,1fr))}.game-tile strong{font-size:20px}.mini-morpion{grid-template-columns:repeat(3,1fr);gap:4px;padding:6px;background:linear-gradient(125deg,#b3814b,#714421)}.mini-morpion i{border-radius:5px;background:#123729;display:grid;place-items:center;min-height:0}.mini-morpion img{width:100%;height:100%;object-fit:contain}@media(max-width:900px){.game-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:600px){.game-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.game-tile:last-child{grid-column:1/-1}.game-tile:last-child .tile-preview{max-width:160px}}

.player-choice{border:2px solid #bc9658;border-radius:22px;background:#fff7e5;color:#17442d;max-width:480px;width:90%;padding:26px}.player-choice::backdrop{background:#092b20bb}.player-choice div{display:grid;gap:12px}.player-choice button{padding:16px;font-size:1.1rem;background:#006B39;color:white;border-radius:12px;border:0}

.game-cards{grid-template-columns:repeat(3,minmax(0,1fr))}.mini-quiz{display:grid;place-items:center;background:#e7f3e8;color:#006b39;font-size:72px;font-weight:bold}@media(max-width:600px){.game-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.game-tile:last-child{grid-column:auto}}
