/* Pátio Play: uma mesa de jogos em vidro fumê, com luz de fliperama. */
:root{--night:#080e1b;--panel:#ffffff0b;--line:#ffffff27;--cream:#f4f8ff;--muted:#b8c6d7;--lime:#acffcc;--pink:#ff91b5;--cyan:#8be8f6}
html{scroll-behavior:smooth}
body{min-height:100vh;background:radial-gradient(ellipse 55% 42% at 94% 2%,#23627b77,transparent 72%),radial-gradient(ellipse 45% 35% at 3% 33%,#5c3b8870,transparent 80%),linear-gradient(155deg,#090e1c,#0e1b2a 52%,#101120);background-attachment:fixed;color:#f4f8ff}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:46px 46px;mask-image:linear-gradient(#0008,transparent 90%)}
.site-header,.dama-page .topbar{position:relative;z-index:5;border:1px solid #ffffff2b;background:linear-gradient(135deg,#ffffff20,#ffffff06 55%,#ffffff11);backdrop-filter:blur(28px) saturate(150%);-webkit-backdrop-filter:blur(28px) saturate(150%);box-shadow:inset 0 1px #ffffff41,0 12px 35px #0003;border-radius:20px;margin-top:22px;padding:0 26px;height:70px}
.brand-icon{background:linear-gradient(145deg,#bdffe0,#8be8f6);border-radius:13px;box-shadow:0 4px 18px #8be8f655}
.header-link{border:1px solid #ffffff38;border-radius:100px;padding:10px 17px;background:#ffffff0b}
.header-link:hover{background:#ffffff20}
.hero{min-height:510px;border:0;grid-template-columns:1fr .8fr}
.portal-page main{display:flex;flex-direction:column}
.portal-page .hero{order:0}
.portal-page #classicos{order:1}
.portal-page #jogos{order:2}
.hero::before{width:520px;height:520px;background:radial-gradient(circle,#b5f5e52d,transparent 65%);border:1px solid #ffffff16;right:0;top:10px}
.hero-copy{padding:62px 0 52px}
.hero h1{font-size:clamp(62px,6.4vw,102px);line-height:.98;letter-spacing:-.075em}
.hero h1 em{color:#b8ffdb;text-shadow:0 0 45px #a3ffce44}
.hero-copy>p:not(.hero-kicker){color:#c7d7e6;max-width:490px}
.hero-button,.button-main,.brain-primary{background:linear-gradient(135deg,#b9ffdb,#8eeadf);border:1px solid #d9ffef;color:#0c2330;border-radius:15px;box-shadow:inset 0 1px #fff9,0 9px 28px #7beac62b}
.hero-button{font-size:15px;padding:16px 22px;min-width:210px}
.hero-button:hover,.button-main:hover,.brain-primary:hover{background:#d4ffe8;transform:translateY(-2px)}
.hero-art{filter:drop-shadow(0 25px 45px #050817aa)}
.art-track,.art-board,.art-note{box-shadow:0 20px 40px #0007, inset 0 1px #fff8;border-radius:18px}
.art-note{transform:rotate(-9deg);border:1px solid #fff8}
.games-section{padding:48px 0 84px}
.brain-section{padding-top:8px}
.section-heading{border-top:1px solid #ffffff2e;padding-top:25px}
.section-heading h2{font-size:clamp(34px,3.6vw,52px)}
.section-heading>p{color:#bed0e0}
.game-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:15px}
.game-card{grid-column:span 2;position:relative;overflow:hidden;border:1px solid #ffffff32;border-radius:24px;background:linear-gradient(145deg,#ffffff21,#ffffff09 62%,#ffffff13);backdrop-filter:blur(22px) saturate(145%);-webkit-backdrop-filter:blur(22px) saturate(145%);box-shadow:inset 0 1px #ffffff40,0 12px 32px #0004;transition:transform .23s cubic-bezier(.2,.8,.2,1),border-color .23s,box-shadow .23s}
.game-card::after{content:"↗";position:absolute;right:18px;top:18px;display:grid;place-items:center;width:35px;height:35px;border:1px solid #ffffff82;border-radius:50%;color:white;background:#08152680;backdrop-filter:blur(9px);font-size:18px;z-index:2}
.game-card:hover,.game-card:focus-visible{transform:translateY(-6px);border-color:#b5ffdf9e;box-shadow:inset 0 1px #ffffff60,0 21px 45px #0007,0 0 32px #8cffd522}
.game-card .game-visual{height:175px;border-bottom:1px solid #ffffff29}
.game-card .game-body{padding:19px 21px 22px}
.game-meta{color:#aaf8d6;font-size:10px;letter-spacing:.07em;text-transform:uppercase}
.game-body h3{font-size:25px;margin:7px 0 7px}
.game-body p{color:#c8d7e7;min-height:0;font-size:13px}
.card-go{display:none}
.game-card.dama{grid-column:span 4;display:grid;grid-template-columns:1fr 1.12fr;min-height:270px}
.game-card.dama .game-visual{height:100%;border-bottom:0;border-right:1px solid #ffffff32}
.game-card.dama .game-body{display:flex;flex-direction:column;justify-content:center;padding:30px}
.game-card.dama h3{font-size:clamp(28px,3vw,42px)}
.brain-section .game-card:nth-child(5){grid-column:span 2}
.visual-memory,.visual-focus,.visual-aim,.visual-reflex,.visual-create,.checker,.highway,.sky,.rails,.wrestle{filter:saturate(.88)}
footer{border-top:1px solid #ffffff2e}

/* Formulários e placares compartilham o mesmo material. */
.setup-card,.room-panel,.leader-panel,.help-panel,.brain-setup,.brain-arena,.brain-panel,.arcade-page .arena{background:linear-gradient(145deg,#ffffff1f,#ffffff09 55%,#ffffff12);border:1px solid #ffffff32;border-radius:22px;box-shadow:inset 0 1px #ffffff40,0 15px 35px #0004;backdrop-filter:blur(25px) saturate(145%);-webkit-backdrop-filter:blur(25px) saturate(145%)}
.room-panel,.leader-panel{border-top:1px solid #ffffff32}
.help-panel,.brain-help{background:#ffffff0b}
.setup-card input,.brain-setup input,.bot-setup select{background:#06132396;color:#f6fbff;border:1px solid #ffffff4a;border-radius:12px;padding:0 14px;height:48px;outline:none}
.setup-card input:focus,.brain-setup input:focus,.bot-setup select:focus{border-color:#aaffdb;box-shadow:0 0 0 3px #aaffdb2a}
.bot-setup{margin-top:19px}
.bot-setup label{display:block;margin:0 0 8px!important;font-size:12px;font-weight:700;color:#b9ffdc}
.bot-setup select{width:100%;font:inherit}
.setup-actions,.brain-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.setup-actions button,.brain-buttons button{border-radius:13px;min-height:46px}
.button-soft,.brain-secondary{border-radius:13px;border-color:#ffffff61;background:#ffffff12;color:#ecf9ff}
.button-soft:hover,.brain-secondary:hover{background:#ffffff23}
.brain-nav a{border-radius:100px;background:#ffffff10;border-color:#ffffff35}
.brain-nav a[aria-current="page"],.brain-nav a:hover{background:#b7ffdb;border-color:#b7ffdb;color:#102633}
.brain-mark{border-radius:30px;background:#ffffff14;backdrop-filter:blur(20px);box-shadow:inset 0 1px #ffffff50,0 12px 35px #0005}
.arcade-page .arena canvas,.arcade-page .arm-panel,.brain-stage{border-radius:15px}
.game-controls button{border-radius:12px;background:#ffffff20}
.room-panel .aside-top span,.panel-title strong,.panel-title span,.arena-top strong,.arena-head strong{color:#b2ffdb}

/* Dama: mesa em destaque; placar flutua ao lado do tabuleiro. */
.dama-page{--ink:#f5faff;--muted:#b9cbd2;--green:#b6f5da;--border:#ffffff38;--paper:#ffffff12;--gold:#d8b87c;color:#f5faff}
.dama-page .shell{max-width:1360px}
.dama-page .topbar{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff30}
.dama-page .brand{color:#f4fff9}
.dama-page .brand-mark{color:#b9ffdb}
.dama-page .top-note{color:#c0d7da}
.dama-page .lobby{min-height:calc(100vh - 190px)}
.dama-page .lobby-copy h1,.dama-page .game-head h1{font-family:'Space Grotesk',Arial,sans-serif;letter-spacing:-.07em}
.dama-page .lobby-copy h1 i,.dama-page .game-head h1 i{color:#b8ffdc;font-style:normal}
.dama-page .lobby-copy>p{color:#c6d7e0}
.dama-page .rule-tags span{border-color:#ffffff48;color:#d4ffe8;background:#ffffff0e}
.dama-page .lobby-card,.dama-page .score-card,.dama-page .status-card{background:linear-gradient(135deg,#ffffff21,#ffffff0b 65%);border:1px solid #ffffff3f;border-radius:24px;box-shadow:inset 0 1px #ffffff55,0 16px 45px #0005;backdrop-filter:blur(27px) saturate(145%);-webkit-backdrop-filter:blur(27px) saturate(145%)}
.dama-page .lobby-card{padding:31px;max-width:485px}
.dama-page .lobby-card h2,.dama-page .status-card h2,.dama-page .section-title h3{font-family:'Space Grotesk',Arial,sans-serif;letter-spacing:-.04em}
.dama-page .lobby-card p,.dama-page .status-card p{color:#c9dbe2}
.dama-page .lobby-card>input,.dama-page .theme-select{border:1px solid #ffffff50;border-radius:11px;background:#06152389;color:#f5fff9}
.dama-page .lobby-card>input{height:48px}
.dama-page .primary{border-radius:13px;background:linear-gradient(135deg,#b8ffda,#8be8f6);border:1px solid #e3fff2;color:#0c2731;box-shadow:inset 0 1px #fffa,0 10px 28px #8be8e52e}
.dama-page .primary:hover{background:#d2ffe8}
.dama-page .secondary{border-radius:12px;border-color:#ffffff63;color:#f2fffa;background:#ffffff13}
.dama-page .secondary:hover{background:#ffffff25}
.dama-page .mode-option{border-radius:12px;background:#ffffff0b;border-color:#ffffff3b}
.dama-page .mode-option:has(input:checked){border-color:#a4ffcf;background:#b4ffce20}
.dama-page .mode-option input{accent-color:#aaffd5}
.dama-page .mode-picker legend,.dama-page .opponent-picker legend{color:#c8ffe2}
.opponent-picker{display:flex;gap:8px;border:0;padding:0;margin:18px 0 0;width:100%}
.opponent-picker legend{font-size:12px;font-weight:800;margin-bottom:7px}
.opponent-picker label{display:flex!important;align-items:center;justify-content:center;gap:7px;flex:1;margin:0!important;padding:11px!important;border:1px solid #ffffff45;border-radius:12px;cursor:pointer;letter-spacing:0!important;font-size:13px!important;background:#ffffff0b}
.opponent-picker label:has(input:checked){background:#b4ffce22;border-color:#a4ffcf}
.opponent-picker input{width:15px!important;height:15px!important;accent-color:#aaffd5}
.bot-level{margin-top:12px}
.bot-level label{margin:0 0 7px!important}
.bot-level select{width:100%}
.dama-page .bot-level{border:1px solid #ffffff42;border-radius:14px;padding:11px 12px 12px;margin:12px 0 0;background:#ffffff08;min-width:0}
.dama-page .bot-level[data-active="true"]{border-color:#a4ffcf;background:#b4ffce10}
.dama-page .bot-level legend{padding:0 5px;color:#c8ffe2;font-size:12px;font-weight:800}
.dama-page .bot-level p{margin:0 0 10px;color:#cadbe1;font-size:11px;line-height:1.35}
.bot-level-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.dama-page .lobby-card .bot-level-options label{display:block;position:relative;margin:0;min-width:0;padding:9px 6px;border:1px solid #ffffff48;border-radius:10px;background:#ffffff0b;cursor:pointer;text-align:center;letter-spacing:0}
.dama-page .lobby-card .bot-level-options label:hover{border-color:#c8ffe2}
.dama-page .lobby-card .bot-level-options label:has(input:checked){border-color:#a4ffcf;background:#b4ffce22}
.dama-page .bot-level[data-active="false"] .bot-level-options label:has(input:checked){border-color:#ffffff48;background:#ffffff0b}
.bot-level-options input{position:absolute;opacity:0;width:1px!important;height:1px!important;pointer-events:none}
.bot-level-options label:focus-within{outline:2px solid #d4ffe8;outline-offset:2px}
.bot-level-options strong,.bot-level-options small{display:block}.bot-level-options strong{font-size:13px;color:#f7fff9}.bot-level-options small{font-size:10px;color:#c9dbe2;line-height:1.25;margin-top:3px}
.dama-page .new-table{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-size:12px;min-height:40px}
.dama-page .mode-badge{border-radius:100px;background:#b8ffdc21;color:#d6ffea}
.dama-page .board{border:9px solid #173d3a;border-radius:18px;overflow:hidden;box-shadow:0 30px 65px #0008,0 0 0 1px #afffe93d}
.dama-page .player-bar{border-radius:12px;background:#ffffff0c}
.dama-page .player-bar.is-turn{background:#b1ffda22;border-color:#afffda69}
.dama-page .player-bar.is-turn .piece-count{color:#b8ffdc}
.dama-page .status-card{color:#f5fff9}
.dama-page .side-label{color:#b8ffdc}
.dama-page .score-card{margin-top:13px}
.dama-page .score-card .section-title>span,.dama-page .series-board,.dama-page .score-player{border-radius:12px;background:#ffffff13;border:1px solid #ffffff2d;color:#eafaf4}
.dama-page .score-player.leading{background:#b6ffdd1f}
.dama-page .score-player.is-turn{border-color:#aaffd5}
.dama-page .score-player-head strong,.dama-page .series-board strong,.dama-page .score-stats strong{color:#e5fff1}
.dama-page .score-player-head small,.dama-page .series-board small,.dama-page .score-stats small,.dama-page .turn-tag{color:#bbd3d0}
.dama-page .lead-label,.dama-page .rules summary,.dama-page .moves li,.dama-page .actions button{color:#c7ffe2}
.dama-page .moves li{border-color:#ffffff24}
.dama-page .actions button{border-radius:10px;border-color:#ffffff4a}
.dama-page .actions button:hover{background:#ffffff17}
.dama-page .series-board{border-color:#ffffff2c}
.dama-page .score-player progress::-webkit-progress-bar{background:#ffffff27}
.dama-page .score-player progress::-webkit-progress-value{background:#a9f5ce}
.dama-page .sopro-prompt{border-radius:12px;background:#f4c771;color:#39260d}

@media(max-width:1050px){.game-card.dama{grid-column:span 4}.game-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.game-card{grid-column:span 2}}
@media(max-width:700px){.site-header,.dama-page .topbar{margin-top:10px;padding:0 16px;border-radius:16px;height:62px}.hero{min-height:0;overflow:hidden}.hero-copy{padding:55px 0 8px}.hero h1{font-size:clamp(47px,11vw,76px)}.hero-art{height:240px;left:0;width:100%;transform:scale(.65) rotate(-6deg);transform-origin:top left}.game-grid{grid-template-columns:1fr}.game-card,.game-card.dama,.brain-section .game-card:nth-child(5){grid-column:1;display:block}.game-card.dama .game-visual{height:180px}.game-card.dama .game-body{padding:20px}.game-card .game-visual{height:160px}.dama-page .lobby-card{padding:23px}.dama-page .board{border-width:6px}}
@media(max-height:600px) and (pointer:coarse){.arcade-page .arena canvas{width:min(100%,480px,calc((100vh - 170px)*2/3));width:min(100%,480px,calc((100dvh - 170px)*2/3))}.arcade-page .arm-panel{min-height:230px;padding:12px}.arcade-page .arm-symbols span{font-size:42px}.arcade-page .arm-symbols b{font-size:32px}.arcade-page .arm-panel h2{margin:8px 0 4px;font-size:23px}.arcade-page .arm-panel p{margin-bottom:10px}.arcade-page .arm-panel #tapButton{height:72px;font-size:22px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.game-card,.hero-button,.button-main,.brain-primary{transition:none!important;animation:none!important}}