*{box-sizing:border-box}html,body{margin:0;height:100%;overscroll-behavior:none}body{background:#1e3f36;color:#fff2d9;font-family:ui-monospace,'Courier New',monospace}button,a,#stick{touch-action:none}button{font:inherit;cursor:pointer}button:disabled{opacity:.5;cursor:wait}[hidden]{display:none!important}main{height:100dvh;max-width:1050px;min-height:550px;margin:auto;position:relative;display:flex;flex-direction:column;background:radial-gradient(ellipse at center,#38594a,#163d3d);overflow:hidden}nav{position:absolute;z-index:6;top:8px;right:14px;display:flex;gap:14px;font-size:10px}nav a{color:#d4dfbf;text-decoration:none}.hud{height:112px;margin:24px 32px 0;flex-shrink:0;position:relative;z-index:3;display:flex;align-items:center;padding:14px 27px 22px;gap:12px}.art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.hud>.art{filter:drop-shadow(0 5px 4px #10232080)}.score{position:relative;flex:1;height:64px;display:flex;justify-content:center;align-items:center;isolation:isolate;overflow:hidden;border-radius:20px;background:#172d2a70}.score i{position:absolute;inset:0 auto 0 0;width:0;z-index:-1;background:#46bfb9 url('/assets/matieres-jardin-v2.png') right top/360px;clip-path:polygon(0 6%,92% 6%,92% 13%,98% 13%,98% 27%,94% 27%,94% 43%,100% 43%,100% 62%,95% 62%,95% 79%,98% 79%,98% 92%,0 92%);transition:width .2s ease}.score i[data-owner="2"]{background-color:#f58270;background-position:left bottom}.score strong{font-size:34px;font-weight:1000;letter-spacing:1px;color:#fff3dc;text-shadow:2px 3px #31403980}.score small{font-size:.65em}.score>span{position:absolute;bottom:3px;font-size:8px;letter-spacing:2px;color:#f4ead7c0}.title{position:relative;width:210px;text-align:center;flex-shrink:0}.title h1{font-size:36px;line-height:1;margin:0 0 5px;letter-spacing:5px;text-shadow:2px 3px #090f11;font-weight:1000}.title span{color:#aac3c8;font-size:12px;letter-spacing:3px}.clock{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);border:6px solid #414c4c;border-radius:25px;background:#16282a;padding:5px 28px;box-shadow:0 4px 0 #112124,0 7px 8px #071a2370}.clock strong{font-size:23px;letter-spacing:2px}.arena{position:relative;flex:1;min-height:0;margin:0 12px}#game{width:100%;height:100%;display:block}.overlay{position:absolute;inset:0;display:grid;place-items:center;background:#122c2630}.card{text-align:center;max-width:380px;background:#203632ed;border:4px solid #56665a;border-radius:26px;padding:27px;box-shadow:0 10px 20px #06222090}.eyebrow{font-size:10px;letter-spacing:3px;color:#afc8b4}h2{font-size:23px;line-height:1.2}p{font-size:12px;line-height:1.7;color:#e2dbc6}.card button{border:3px solid #c97662;border-radius:16px;background:#f18d74;color:#342f27;padding:15px 20px;font-weight:900;box-shadow:0 4px #784f40}.duel{font-size:10px;margin-bottom:0}footer{position:relative;flex-shrink:0;padding:0 40px 8px;height:165px}.controls{height:140px;display:flex;align-items:center;justify-content:space-between;gap:12px}#stick{width:146px;height:146px;position:relative;flex-shrink:0;user-select:none;cursor:grab;filter:drop-shadow(0 6px 4px #10252370)}#knob{position:absolute;width:52%;height:52%;left:24%;top:24%;pointer-events:none;filter:drop-shadow(0 6px 3px #0a171e70)}#plant{position:relative;width:210px;height:132px;flex-shrink:0;border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff2dc;filter:drop-shadow(0 6px 4px #10252370)}#plant:active{transform:translateY(3px)}#plant strong{position:relative;font-size:25px;text-shadow:2px 3px #a85547;font-weight:1000;letter-spacing:2px}.pod-icon{position:relative;border:3px solid #ffe7cd;border-radius:10px;line-height:30px;width:35px;height:35px;font-size:28px;margin:6px 0 9px;box-shadow:0 2px 0 #a65d50}.pod-icon small{position:absolute;top:-24px;left:0;font-size:17px;letter-spacing:1px}.help{text-align:center;display:flex;flex-direction:column;gap:7px;font-size:10px;color:#e0e5c8;text-shadow:0 2px #16342b}.help #status{letter-spacing:2px;font-weight:bold}.details{display:flex;justify-content:center;gap:18px;align-items:center;font-size:9px;color:#c4d4bd}.details button{border:0;color:#c4d4bd;background:none;font-size:9px}#respawn{position:absolute;top:45%;left:50%;transform:translateX(-50%);background:#1e3434ed;border:2px solid #acb9a2;border-radius:14px;padding:16px;white-space:nowrap}
@media(max-width:600px){main{min-height:500px}.hud{height:88px;margin:20px 8px 0;padding:12px 16px 19px;gap:5px}.title{width:116px}.title h1{font-size:26px;letter-spacing:2px}.title span{font-size:8px;letter-spacing:1px}.score{height:50px;border-radius:12px}.score strong{font-size:25px}.score>span{font-size:6px;letter-spacing:1px}.clock{border-width:4px;padding:3px 17px;bottom:-6px}.clock strong{font-size:19px}.arena{margin:0}footer{height:126px;padding:0 15px 5px}.controls{height:109px}#stick{width:108px;height:108px}#plant{width:151px;height:103px}#plant strong{font-size:21px}.pod-icon{width:28px;height:28px;font-size:22px;line-height:23px;margin-bottom:6px}.pod-icon small{font-size:14px;top:-20px}.help{position:absolute;bottom:6px;left:15px;right:15px;font-size:8px;pointer-events:none}.help span:nth-child(2){display:none}.help #reserve{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);width:100px;font-size:8px}.details{justify-content:flex-end;font-size:7px}.details button{position:absolute;left:14px;font-size:7px}.card{margin:18px;padding:22px}nav{font-size:8px;top:5px;gap:10px}}
/* The scenic image continues behind the game and its controls. */
body{background:#122f2d}main{max-width:930px;background:#1d4240 url('/assets/ambiance-jardin-v3.png') center/cover no-repeat}.hud{margin:24px 28px 0;height:106px;padding:15px 30px 23px;gap:12px}.score{background:linear-gradient(180deg,#206c67,#174b48);box-shadow:inset 0 3px 7px #092e3980,inset 0 -2px 0 #79a29b40;border:1px solid #71918a40}.score[data-owner="2"],#coral:not([data-owner]){background:linear-gradient(180deg,#9d4d45,#713e39);box-shadow:inset 0 3px 7px #402d3480,inset 0 -2px 0 #d8948140}.score i{inset:5px auto 5px 0;height:auto;background:linear-gradient(180deg,#58d5cc,#35b5ac);box-shadow:inset 0 2px 1px #b0f7da70;background-image:linear-gradient(180deg,#61d5cdbb,#31b8adcc),var(--turquoise-texture);background-size:auto,150px;clip-path:polygon(0 0,95% 0,95% 8%,100% 8%,100% 24%,96% 24%,96% 40%,100% 40%,100% 61%,94% 61%,94% 79%,99% 79%,99% 93%,92% 93%,92% 100%,0 100%)}.score i[data-owner="2"]{background-image:linear-gradient(180deg,#ff9e89bb,#f07d6ccc),var(--coral-texture);background-color:#ee8772;background-position:0 0}#blue i{left:auto;right:0;transform:scaleX(-1)}.score>span{z-index:2}.title{width:190px}.title span{display:block;white-space:nowrap}.title h1{font-family:ui-rounded,'Arial Rounded MT Bold',monospace}.score strong{font-family:ui-rounded,'Arial Rounded MT Bold',monospace;letter-spacing:0;font-size:32px}.hud>.art{filter:drop-shadow(0 5px 4px #071f2470)}.arena{margin:0 8px}footer{background:linear-gradient(0deg,#10352c50,transparent);height:155px}.help{color:#e7e2cb}.card{backdrop-filter:blur(5px)}
@media(max-width:600px){.hud{margin:21px 5px 0;height:88px;padding:12px 17px 21px;gap:6px}.title{width:120px}.score strong{font-size:24px}.score{border-radius:12px}.title h1{font-size:25px}.title span{font-size:8px}.arena{margin:0}footer{height:126px}}
@font-face{font-family:OndesBlock;src:url('/assets/fonts/Bungee-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
/* Paint sits inside masked windows. Foreground stone is above paint; text stays above both. */
.hud{isolation:isolate;gap:14px}.hud>.art{filter:none}#hud-base{z-index:0;filter:drop-shadow(0 4px 3px #071b24a0)}#hud-frame{z-index:3}.score,.score[data-owner="2"],#coral:not([data-owner]){isolation:auto;overflow:visible;background:none;border:0;box-shadow:none;min-width:0}.score-window{position:absolute;inset:3px 0 9px;z-index:1;overflow:hidden;mask-size:100% 100%;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat}.score-dark,.score-fill{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.score i,.score i[data-owner="2"],#blue i{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:1;transform:none;background:none;box-shadow:none;clip-path:none;transition:none}.score strong{position:relative;z-index:5;font-family:OndesBlock,sans-serif;font-size:33px;font-weight:400;letter-spacing:0;line-height:1.2;white-space:nowrap;color:#fff2da;text-shadow:0 3px 0 #132e31,1px 0 #33423d,-1px 0 #33423d,0 5px 5px #0f252680;transform:translateY(-3px);font-variant-numeric:tabular-nums}.score small{font-size:.68em;margin-left:2px}.score>span{z-index:5;bottom:0;font-family:Arial,sans-serif;font-size:8px;letter-spacing:2px}.title{z-index:5;align-self:center;transform:translateY(-7px)}.title h1{font-family:OndesBlock,sans-serif;font-size:33px;font-weight:400;letter-spacing:3px;color:#fff0d5;text-shadow:0 3px 0 #111d23,0 5px 4px #071e2480}.title span{font-family:Arial,sans-serif;font-weight:700;font-size:11px;letter-spacing:3px;line-height:1.3}.clock{z-index:6;bottom:-6px}.clock strong{font-family:OndesBlock,sans-serif;font-size:21px;font-weight:400;letter-spacing:1px;line-height:1.2;text-shadow:0 2px #07191e}#plant strong{font-family:OndesBlock,sans-serif;font-weight:400;font-size:25px;letter-spacing:1px}
@media(max-width:600px){.hud{gap:8px;padding-left:17px;padding-right:17px}.title{width:112px;transform:translateY(-6px)}.title h1{font-size:24px;letter-spacing:1px}.title span{font-size:8px;letter-spacing:1px}.score strong{font-size:clamp(17px,5.6vw,25px)}.score>span{font-size:6px;letter-spacing:1px}.score-window{inset:3px 0 7px}.clock strong{font-size:17px}.clock{padding:4px 18px}.score small{margin-left:0}#plant strong{font-size:21px}}
/* The background and gameplay share the reference's exact 2:3 coordinate system. */
main{width:100%;max-width:calc(100dvh * 2 / 3);height:100dvh;min-height:0;background:#173d39}.arena{position:absolute;inset:0;margin:0}.hud{position:absolute;left:0;right:0;top:0;height:clamp(70px,8.3dvh,106px);margin:12px 5% 0;padding:10px 20px 17px}.title{width:31%;min-width:104px}.title h1{font-size:clamp(21px,2.7dvh,33px)}.title span{font-size:clamp(7px,.9dvh,11px);letter-spacing:2px}.score{height:100%;min-height:40px}.score strong{font-size:clamp(19px,2.6dvh,33px)}.clock{bottom:-10px;padding:4px 20px}.clock strong{font-size:clamp(15px,1.8dvh,21px)}footer{position:absolute;bottom:8px;width:100%;height:16%;padding:0 5%;background:none;pointer-events:none}.controls{height:100%}#stick{width:clamp(92px,15dvh,146px);height:clamp(92px,15dvh,146px);pointer-events:auto}#plant{width:clamp(132px,20dvh,210px);height:clamp(88px,13dvh,132px);pointer-events:auto}.details button{pointer-events:auto}.help{font-size:8px}.overlay{z-index:4}.card{max-width:350px}.details{position:absolute;bottom:-2px;left:5%;right:5%}nav{font-size:7px;top:2px}.help #reserve{font-size:8px}
@media(max-width:600px){.hud{padding:10px 13px 16px;gap:5px}.title{min-width:90px}.title span{letter-spacing:1px}.score strong{font-size:clamp(16px,4.8vw,24px)}footer{height:16%;padding:0 4%}.help{bottom:4px}.help #reserve{bottom:29px}#plant strong{font-size:19px}}
/* Shared match lobby, usable with a smartphone keyboard. */
.card{max-width:430px;width:92%;max-height:82dvh;overflow:auto;padding:22px;touch-action:pan-y}.card h2{font-size:23px;margin:10px 0}.lobby-form{text-align:left;font-family:Arial,sans-serif}.lobby-form label{display:block;font-size:13px;font-weight:bold;margin:9px 0}.lobby-form input,.lobby-form select{width:100%;padding:11px;margin-top:5px;border:1px solid #73938b;border-radius:10px;background:#183e3b;color:#fff2da;font:16px Arial,sans-serif}.lobby-options{display:grid;grid-template-columns:1fr;gap:12px}.lobby-form button{width:100%;margin-top:9px;padding:12px;font:15px OndesBlock,sans-serif}#train{font:12px Arial,sans-serif;background:#33554d}#roster{padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:7px}#roster li{padding:6px 9px;border-radius:8px;background:#132f2c;border-left:4px solid var(--player-color)}#lobby-hint,#notice{font-size:13px;line-height:1.4}#notice{color:#ffd07a}#ranking{position:absolute;z-index:6;top:calc(12px + clamp(70px,8.3dvh,106px) + 22px);left:5%;right:5%;display:flex;justify-content:center;flex-wrap:wrap;gap:5px;pointer-events:none;font:10px Arial,sans-serif}#ranking span{background:#102927de;padding:4px 7px;border-radius:8px;border-bottom:3px solid var(--player-color)}[hidden]{display:none!important}
.choice-label{display:block;font-size:13px;font-weight:bold;margin:9px 0}.choice-buttons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.lobby-form .choice-buttons button{margin:0;min-height:42px;padding:8px 4px;border:2px solid #73938b;border-radius:9px;background:#183e3b;color:#fff2da;box-shadow:none;font:15px Arial,sans-serif;touch-action:manipulation}.lobby-form .choice-buttons button[aria-pressed="true"]{border-color:#75ece0;background:#32695f;color:#fff;font-weight:bold}.lobby-form .choice-buttons button:focus-visible{outline:3px solid #fff2da;outline-offset:2px}.lobby-form .choice-buttons button:disabled{cursor:default;opacity:.65}#welcome{z-index:20}.arena:has(#welcome:not([hidden])){z-index:10}
#leave{position:absolute;z-index:12;right:8px;top:max(8px,env(safe-area-inset-top));width:40px;height:40px;padding:0;min-height:0;border:1px solid #fff2da88;border-radius:50%;background:#173b35bb;color:#fff2da;font:30px/1 Arial,sans-serif;box-shadow:0 2px 6px #09231a60;touch-action:manipulation}#leave:focus-visible{outline:3px solid #fff;outline-offset:3px}
.lobby-tabs{display:flex;gap:8px;margin:15px 0}.lobby-form .lobby-tabs button{margin:0;padding:10px;border:1px solid #73938b;box-shadow:none;background:#183e3b;color:#fff2da}.lobby-form .lobby-tabs button[aria-selected="true"]{border-color:#75ece0;background:#32695f}.rules-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px 12px}.rules-grid label{line-height:1.4}.rules-grid input{min-height:42px}.rule-toggle{display:flex!important;align-items:center;gap:10px;line-height:1.4}.lobby-form .rule-toggle input{width:22px;height:22px;margin:0;flex-shrink:0;accent-color:#42bdb5}.rule-help,#rules-hint{font-size:12px;line-height:1.5}.lobby-form #rules-reset{font:13px Arial,sans-serif;background:#33554d;color:#fff2da;border-color:#73938b;box-shadow:none}.rules-grid input:disabled{opacity:.7}
.lobby-form #take-host{background:#75ece0;color:#14382f;border:2px solid #d4fff5;box-shadow:0 3px #285d53;opacity:1;cursor:pointer;touch-action:manipulation}
body.playing{touch-action:none}#stick{position:fixed;z-index:30;width:120px;height:120px;transform:translate(-50%,-50%);border:2px solid #fff5;border-radius:50%;background:#e7fff010;box-shadow:none;filter:none;pointer-events:none;cursor:default;opacity:.75}#knob{position:absolute;left:calc(50% - 22px);top:calc(50% - 22px);width:44px;height:44px;border:2px solid #fff8;border-radius:50%;background:#e7fff028;box-shadow:none;filter:none}footer .controls{justify-content:flex-end}footer .help{position:absolute;left:30%;right:30%;bottom:10px;pointer-events:none}
body.playing nav{right:56px}
/* Keep the lobby usable within the actual browser viewport, including keyboards. */
#welcome{height:var(--viewport-height,100dvh);padding:12px max(12px,env(safe-area-inset-right)) 12px max(12px,env(safe-area-inset-left));overflow:auto;overscroll-behavior:contain;touch-action:pan-y}
#welcome .card{margin:0;max-height:calc(var(--viewport-height,100dvh) - 24px);min-height:0;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.lobby-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.card #fullscreen{font:12px Arial,sans-serif;min-height:40px;padding:8px 12px;margin:0;background:#234c43;color:#fff2da;border:1px solid #73938b;border-radius:9px;box-shadow:none;touch-action:manipulation}
.lobby-actions{position:sticky;bottom:-22px;padding:8px 0 12px;background:#203632;z-index:2;border-top:1px solid #73938b55}.lobby-form .lobby-actions button{margin:0}.lobby-form .lobby-actions #train:not([hidden]){margin-top:7px}
#display-hint{font:12px/1.5 Arial,sans-serif;grid-column:1/-1}.lobby-form input,.lobby-form select{min-width:0}#map{white-space:nowrap;text-overflow:ellipsis}#notice:empty{display:none}
@media(pointer:coarse){main>nav{display:none}}
@media(orientation:landscape) and (max-height:600px){
main{width:100%;max-width:none;height:var(--viewport-height,100dvh);min-height:0}
#welcome{position:fixed;inset:0;place-items:center;padding-top:max(8px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom));background:#102c29d9}
#welcome .card{width:100%;max-width:900px;max-height:calc(var(--viewport-height,100dvh) - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:12px 18px;border-width:2px;border-radius:16px;text-align:left}
.lobby-heading{margin-bottom:4px}.card h2{font-size:18px;line-height:1.2;margin:4px 0 8px}.card #intro{display:none}
.lobby-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 20px;align-items:start}
.lobby-form>label:first-child{margin:0}.lobby-form>label:first-child input{padding:8px;margin-top:3px;min-height:40px}
.lobby-tabs{align-self:end;margin:0}.lobby-form .lobby-tabs button{min-height:40px;margin:0;padding:8px}
#match-panel,#rules-panel{grid-column:1/-1}
#match-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 20px;align-items:start}
#match-panel .lobby-options{grid-column:1;grid-row:1/4;gap:2px}
#match-panel>label,#map-hint{grid-column:2}.lobby-form label,.choice-label{margin:5px 0}.choice-buttons{gap:6px}
.lobby-form .choice-buttons button{min-height:40px;padding:7px 4px}.lobby-form select{min-height:40px;padding:8px;margin-top:3px}
.rules-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:3px 12px}.rules-grid label{font-size:12px}.rules-grid input{padding:7px;margin-top:3px;min-height:40px}
#rules-hint,.rule-help{margin:4px 0}.lobby-form #rules-reset{width:auto;padding:8px;margin-top:5px}
#lobby-hint{margin:6px 0;grid-column:1}#roster{grid-column:2;margin:4px 0;gap:4px}#notice,#take-host{grid-column:1/-1}
#take-host{width:auto;justify-self:start;margin:2px 0}.lobby-actions{grid-column:1/-1;bottom:-12px;display:flex;gap:10px;align-items:center;padding:8px 0;margin-top:3px}
.lobby-form .lobby-actions #train:not([hidden]){margin:0}.lobby-form .lobby-actions button{min-height:42px;padding:9px 14px;flex:1}
.hud{left:50%;right:auto;transform:translateX(-50%);width:min(440px,calc(100% - 112px));height:64px;margin:8px 0 0;padding:8px 15px 15px}
.title{min-width:80px}.title h1{font-size:20px}.title span{font-size:7px}.score strong{font-size:20px}.clock{bottom:-8px;padding:2px 16px}.clock strong{font-size:14px}
#ranking{top:88px;left:20%;right:20%;font-size:9px}footer{bottom:max(6px,env(safe-area-inset-bottom));height:90px;padding:0 max(16px,env(safe-area-inset-right))}
#plant{width:140px;height:85px}#plant strong{font-size:18px}footer .help{bottom:0;left:35%;right:35%;font-size:8px}
}
@media(orientation:landscape) and (max-height:350px){#welcome .card{padding:8px 14px}.card h2{display:none}.lobby-heading{margin-bottom:6px}.rules-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
#commands-panel{grid-column:1/-1;text-align:left}#commands-panel p{font:12px/1.5 Arial,sans-serif}.command-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px 16px}.command-grid label{font:12px/1.4 Arial,sans-serif}.command-grid output{display:block;font-size:11px;color:#b8e9ce;margin:3px 0}.command-grid input[type=range]{width:100%;min-height:38px;padding:0;accent-color:#75ece0;background:transparent;border:0}.command-actions{display:flex;gap:8px;flex-wrap:wrap}.lobby-form .command-actions button{flex:1;font:12px Arial,sans-serif;min-height:42px;padding:9px;background:#33554d;color:#fff2da;border:1px solid #73938b;box-shadow:none}#commands-status:empty{display:none}.lobby-form .lobby-tabs button{flex:1;font-size:13px;min-width:0}.lobby-tabs{width:100%}@media(max-width:380px){.command-grid{grid-template-columns:1fr}}@media(orientation:landscape) and (max-height:600px){.command-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
#commands-open{position:absolute;z-index:12;right:56px;top:max(8px,env(safe-area-inset-top));width:40px;height:40px;padding:0;min-height:0;border:1px solid #fff2da88;border-radius:50%;background:#173b35cc;color:#fff2da;font:24px/1 Arial,sans-serif;touch-action:manipulation}#commands-dialog{width:min(480px,calc(100% - 20px));max-height:90dvh;overflow:auto;overscroll-behavior:contain;padding:16px;border:2px solid #73938b;border-radius:18px;background:#203632;color:#fff2da;font:14px Arial,sans-serif;touch-action:pan-y}#commands-dialog::backdrop{background:#09201dbb}.command-dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:-16px;background:#203632;padding:10px 0;z-index:3}.command-dialog-heading button{background:#33554d;color:#fff2da;padding:10px;border:1px solid #73938b;border-radius:9px;font:13px Arial,sans-serif}#commands-dialog label{display:block;margin:12px 0;line-height:1.5}#commands-dialog select{display:block;width:100%;margin-top:6px;min-height:42px;font:16px Arial,sans-serif;border:1px solid #73938b;border-radius:9px;padding:8px;background:#183e3b;color:#fff2da}#commands-dialog input[type=range]{accent-color:#75ece0}#commands-dialog .command-actions button{background:#33554d;color:#fff2da;min-height:42px;padding:9px;border:1px solid #73938b;border-radius:9px;flex:1;font:12px Arial,sans-serif}.command-live-hint{font:12px/1.5 Arial,sans-serif;color:#efd89f;margin:3px 0 12px}
/* Main menu and explicit multiplayer entry. */
.game-menu{display:grid;gap:12px;margin:24px 0 6px}.game-menu button{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;gap:6px;width:100%;min-height:76px;padding:16px 20px;background:#2d6257;color:#fff2da;border:1px solid #88b49e;border-radius:14px;box-shadow:0 3px 0 #112e28;font:18px OndesBlock,sans-serif;touch-action:manipulation}.game-menu button small{font:12px/1.4 Arial,sans-serif;color:#c4dacd}.game-menu button.quiet{min-height:48px;background:#243f39;font:14px Arial,sans-serif;box-shadow:none}.game-menu button:disabled{opacity:.5;cursor:default}.game-menu button:focus-visible{outline:3px solid #b8ffe6;outline-offset:3px}#menu-back{font:12px Arial,sans-serif;margin:0;min-height:40px;padding:8px 10px;background:#234c43;color:#fff2da;border:1px solid #73938b;box-shadow:none;border-radius:9px;touch-action:manipulation}.lobby-heading .eyebrow{flex:1;min-width:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}#menu-notice:empty{display:none}#menu-notice{color:#ffd07a;font:13px/1.5 Arial,sans-serif}#room-summary{font:14px/1.6 Arial,sans-serif;padding:12px;border:1px solid #73938b55;border-radius:10px;background:#15332d}.invite-help{font:12px/1.6 Arial,sans-serif;color:#c4dacd}#quit-menu button{margin-top:18px;min-height:44px;padding:12px;background:#2d6257;border:1px solid #88b49e;border-radius:10px;color:#fff2da;font:14px Arial,sans-serif}body[data-menu-page="home"] .card h2{font-size:44px;letter-spacing:4px;margin:24px 0 8px}body[data-menu-page="settings"] .lobby-form{display:block}#players-choices{grid-template-columns:repeat(3,minmax(0,1fr))}.lobby-heading{gap:8px}@media(orientation:landscape) and (max-height:600px){.game-menu{grid-template-columns:1fr 1fr;margin:12px 0}.game-menu button{min-height:65px;padding:12px 16px}.game-menu button.quiet{min-height:65px}body[data-menu-page="home"] .card h2{font-size:28px;margin:10px 0}body[data-menu-page="home"] .card #intro{display:block;margin:4px 0}#multiplayer-menu .game-menu{grid-template-columns:1fr 1fr}#refresh-room{grid-column:1/-1}#room-summary{margin:8px 0;padding:8px}.invite-help{margin:8px 0}}
body:not(.playing) main>.hud,body:not(.playing) main>footer,body:not(.playing) #ranking{display:none}
/* Final standings stay separate from the next match's settings. */
body[data-menu-page="results"] .card{max-width:600px;width:94%;text-align:center}
body[data-menu-page="results"] .card h2{font:22px OndesBlock,sans-serif;letter-spacing:1px}
.winner-banner{display:flex;flex-direction:column;gap:10px;padding:22px 16px;margin:16px 0 20px;border:1px solid #f6ce6780;border-radius:18px;background:radial-gradient(ellipse at top,#78633760,#173c35 80%);box-shadow:inset 0 1px #fff2da20}
.results-eyebrow{font:10px Arial,sans-serif;letter-spacing:3px;color:#f6ce67}
#result-winner{font:clamp(20px,4vw,28px)/1.3 OndesBlock,sans-serif;overflow-wrap:anywhere;color:#fff1c6}
#result-summary{font:13px Arial,sans-serif;color:#d1dfce}
#result-ranking{display:grid;gap:10px;list-style:none;margin:0;padding:0;text-align:left}
.result-row{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:8px 10px;padding:12px;border:1px solid #73938b55;border-left:4px solid var(--result-color);border-radius:12px;background:#132f2ccc;font:14px Arial,sans-serif}
.result-first{border-color:var(--result-color);background:#2b4c3e}
.result-rank{grid-row:1/3;font:24px OndesBlock,sans-serif;color:var(--result-color)}
.result-row strong{overflow-wrap:anywhere}.result-row small{display:block;font-size:12px;color:#c4dacd;margin-top:4px;overflow-wrap:anywhere}
.result-score{font:18px OndesBlock,sans-serif;white-space:nowrap;color:var(--result-color)}
.result-track{grid-column:2/-1;height:7px;background:#071e1c;border-radius:5px;overflow:hidden}
.result-track i{display:block;height:100%;background:var(--result-color);border-radius:5px}
.result-actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.card .result-actions button{flex:1;min-width:130px;min-height:46px;font:14px Arial,sans-serif;touch-action:manipulation}
.card #results-home{border:1px solid #73938b;background:#234c43;color:#fff2da;box-shadow:none}
@media(orientation:landscape) and (max-height:600px){body[data-menu-page="results"] #intro{display:block;margin:4px 0}.winner-banner{padding:12px;margin:10px 0}.result-row{padding:8px 12px}.result-actions{margin-top:12px}#result-ranking{gap:6px}}
body[data-menu-page="achievements"] .card{max-width:850px;text-align:left}
body[data-menu-page="achievements"] .card h2{font:26px OndesBlock,sans-serif;margin:16px 0 8px}
.achievements-summary{display:grid;gap:10px;padding:18px;border:1px solid #f6ce6766;border-radius:14px;background:#173d35;font:14px Arial,sans-serif}
.achievements-summary strong{color:#ffe5a3;font-size:18px}.achievements-summary span{color:#c4dacd}
#achievements-progress,.achievement-card progress{width:100%;height:9px;accent-color:#f6ce67;border:0;border-radius:9px;overflow:hidden}
#achievements-help,#achievement-list-count{font:12px/1.5 Arial,sans-serif}
.achievement-filters{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px;margin:18px 0 8px;font:12px Arial,sans-serif}
.achievement-filters label{display:grid;gap:6px;min-width:0}.achievement-filters input,.achievement-filters select{width:100%;min-width:0;min-height:42px;border:1px solid #73938b;border-radius:9px;padding:8px;background:#183e3b;color:#fff2da;font:16px Arial,sans-serif;touch-action:manipulation}
#achievements-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.achievement-card{padding:16px;border:1px solid #73938b66;border-radius:13px;background:#15332ddd;font-family:Arial,sans-serif;overflow-wrap:anywhere}
.achievement-earned{border-color:#e6c36d;background:linear-gradient(140deg,#55533388,#173d35)}
.achievement-status{font-size:10px;letter-spacing:1.3px;color:#aec7b9}.achievement-earned .achievement-status{color:#ffe5a3}
.achievement-card h3{font-size:16px;margin:10px 0 6px;color:#fff1d6}.achievement-card p{font:13px/1.5 Arial,sans-serif;margin:0 0 14px;min-height:39px}.achievement-card small{display:block;font:12px Arial,sans-serif;color:#c4dacd;margin-top:7px}
.achievement-pagination{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:18px 0 4px;font:13px Arial,sans-serif}
.card .achievement-pagination button{min-height:42px;padding:10px;font:13px Arial,sans-serif;border:1px solid #73938b;border-radius:9px;background:#234c43;color:#fff2da;box-shadow:none;touch-action:manipulation}
@media(max-width:600px){#achievements-list{grid-template-columns:1fr}.achievement-filters{grid-template-columns:1fr 1fr}.achievement-filters label:first-child{grid-column:1/-1}.achievement-card{padding:14px}.achievement-card p{min-height:0}}
@media(orientation:landscape) and (max-height:600px){body[data-menu-page="achievements"] #intro{display:block}.achievements-summary{padding:12px}}
#bot-level-hint{display:block;margin-top:7px;color:#c4dacd;font:12px/1.5 Arial,sans-serif;font-weight:normal}
@media(orientation:landscape) and (max-height:600px){body[data-menu-page="training"] #match-panel>#bot-level-label{grid-column:1;grid-row:1/3}body[data-menu-page="training"] #intro{display:block;margin:4px 0 10px}}
#mystery-status{position:absolute;z-index:8;top:calc(12px + clamp(70px,8.3dvh,106px) + 50px);left:50%;transform:translateX(-50%);max-width:95%;width:max-content;border:1px solid #f09be9;border-radius:11px;background:#291d43ef;color:#fff1fb;padding:8px 13px;box-shadow:0 3px 10px #10202077;pointer-events:none;text-align:center;font:12px/1.4 Arial,sans-serif}
@media(orientation:landscape) and (max-height:600px){#mystery-status{top:112px;font-size:11px;padding:6px 10px}}
#result-stats-help{font:12px/1.5 Arial,sans-serif;color:#c4dacd;text-align:left;margin:0 0 14px}
body[data-menu-page="results"] .card{max-width:750px}
/* Keep the winner and actions visible; only the ranking/details can scroll. */
body[data-menu-page="results"] #welcome .card{display:flex;flex-direction:column;max-height:calc(var(--viewport-height,100dvh) - 24px);overflow:hidden}
body[data-menu-page="results"] .lobby-heading,body[data-menu-page="results"] .card h2,body[data-menu-page="results"] #intro{flex-shrink:0}
#results-screen{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.results-scroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;padding-right:3px}
#results-screen .winner-banner,#results-screen .result-actions{flex-shrink:0}
#results-screen .result-actions{margin-top:10px;padding-top:8px;border-top:1px solid #73938b55}
#results-screen .winner-banner{padding:12px;margin:8px 0 10px;gap:5px}
.result-help{font:12px/1.5 Arial,sans-serif;margin-bottom:8px;color:#c4dacd}
.result-help summary,#result-achievements summary{cursor:pointer;touch-action:manipulation;min-height:34px;padding:8px 0;font:12px/1.4 Arial,sans-serif;color:#d9e7d9}
#result-achievements summary:focus-visible,.result-help summary:focus-visible{outline:2px solid #f6ce67;outline-offset:2px}
#result-achievements{margin-top:10px;padding:0 10px;border:1px solid #d2b66a66;border-radius:10px;background:#3d3d2422}
#result-achievements summary{color:#ffe5a3}
#result-achievements-list{list-style:none;padding:0;margin:0 0 10px;display:grid;gap:8px}
#result-achievements-list li{border-left:2px solid #f6ce67;padding:4px 9px}
#result-achievements-list strong{display:block;font:13px Arial,sans-serif;color:#ffe5a3}
#result-achievements-list small,#result-achievements-empty{display:block;font:12px/1.4 Arial,sans-serif;color:#c4dacd;margin-top:4px}
@media(max-width:600px),(max-height:600px){
body[data-menu-page="results"] #welcome{padding:8px}
body[data-menu-page="results"] #welcome .card{width:100%;padding:12px;max-height:calc(var(--viewport-height,100dvh) - 16px);border-width:2px;border-radius:16px}
body[data-menu-page="results"] .lobby-heading,body[data-menu-page="results"] .card h2,body[data-menu-page="results"] #intro{display:none}
#results-screen .winner-banner{padding:9px 12px;margin:0 0 8px;gap:3px;border-radius:12px}
#result-winner{font-size:18px;line-height:1.2}.results-eyebrow{font-size:9px;letter-spacing:2px}#result-summary{font-size:11px}
#result-ranking{gap:6px}.result-row{padding:8px 10px;gap:5px 8px;grid-template-columns:22px minmax(0,1fr) auto}
.result-row small{font-size:11px;margin-top:2px}.result-rank{font-size:20px}.result-score{font-size:16px}.result-track{height:5px}
#results-screen .result-actions{margin-top:8px;padding-top:8px;gap:8px}
.card .result-actions button{min-width:0;min-height:42px;padding:10px 8px;font-size:13px}
}
@media(orientation:landscape) and (max-height:600px){#result-ranking{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}
.result-player-stats{grid-column:1/-1;border-top:1px solid #73938b55;padding-top:4px}
.result-stats-table{width:100%;table-layout:fixed;border-collapse:collapse;font:12px/1.3 Arial,sans-serif;text-align:center;color:#fff2da}
.result-stats-table th,.result-stats-table td{padding:4px 3px}
.result-stats-table thead th{font-size:10px;font-weight:normal;color:#bdd2c6}
.result-stats-table td{font-weight:bold;font-variant-numeric:tabular-nums}
.result-stats-coop th:first-child{width:32%;text-align:left;overflow-wrap:anywhere}
.result-stats-coop tbody th{font-size:11px;font-weight:normal}
.result-stats-coop tbody tr:first-child{border-bottom:1px solid #73938b33;color:var(--result-color)}
.result-stats-coop tbody tr:first-child th{font-weight:bold}
@media(max-width:600px),(max-height:600px){.result-stats-table{font-size:12px}.result-stats-table th,.result-stats-table td{padding:3px 2px}}
/* Larger, high-contrast primary touch action, including before artwork loads. */
footer{--plant-width:min(52vw,clamp(190px,27dvh,260px))}
#plant{position:absolute;right:max(14px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));width:var(--plant-width);height:clamp(130px,19dvh,180px);border:5px solid #19343a;border-radius:34%;background:radial-gradient(ellipse at 35% 15%,#ffa29188,transparent 65%),linear-gradient(#f78471,#d94d42);box-shadow:0 0 0 3px #ffe8bf,0 7px 0 #102930,0 10px 20px #061a2380,inset 0 3px 0 #ffd0b199;filter:none;isolation:isolate;overflow:hidden;z-index:32;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
#plant .art{border-radius:inherit;opacity:.9;pointer-events:none}
#plant strong{font-size:clamp(24px,3.5dvh,34px);line-height:1.2;color:#fff6dc;text-shadow:0 2px 0 #742e29,0 3px 4px #5a211e99;letter-spacing:1px}
#plant .pod-icon{width:44px;height:44px;line-height:37px;font-size:34px;margin:14px 0 9px;border-color:#fff5d7;background:#bf463855;box-shadow:0 2px 0 #87352c;color:#fff5d7}
#plant .pod-icon small{font-size:18px;line-height:18px;top:-22px;left:1px}
#plant:active{transform:translateY(4px);box-shadow:0 0 0 3px #fff3cd,0 3px 0 #102930,0 5px 12px #061a2380,inset 0 3px 8px #9b322a88}
#plant:focus-visible{outline:4px solid #fff9db;outline-offset:7px}
footer .help{left:14px;right:auto;bottom:22px;max-width:calc(100% - var(--plant-width) - 42px);text-align:left;font-size:9px;gap:5px}
footer .help #reserve{position:static;transform:none;width:auto;font-size:10px;font-weight:bold}
@media(orientation:landscape) and (max-height:600px){
footer{--plant-width:clamp(180px,24vw,230px)}
#plant{height:clamp(120px,32dvh,155px);right:max(18px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom))}
#plant strong{font-size:26px}#plant .pod-icon{width:40px;height:40px;line-height:34px;font-size:31px;margin:12px 0 7px}
footer .help{left:35%;right:auto;bottom:12px;max-width:calc(65% - var(--plant-width) - 40px);font-size:8px}
}
@media(orientation:landscape) and (max-height:350px){#plant{height:108px}#plant strong{font-size:23px}#plant .pod-icon{width:33px;height:33px;font-size:26px;line-height:27px;margin:10px 0 6px}}
/* Two everyday controls; optional tuning stays collapsed on small screens. */
.command-grid.command-basic{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}
.command-scale{display:flex;justify-content:space-between;gap:8px;font:11px/1.4 Arial,sans-serif;color:#c4dacd}
#commands-advanced{margin:14px 0;border:1px solid #73938b88;border-radius:10px;background:#173b352e}
#commands-advanced summary{cursor:pointer;touch-action:manipulation;min-height:44px;padding:12px;font:14px/1.4 Arial,sans-serif;color:#d9eee1}
#commands-advanced summary:focus-visible{outline:2px solid #75ece0;outline-offset:2px;border-radius:10px}
.command-advanced-content{padding:0 12px 12px}
@media(max-width:380px){.command-grid.command-basic{grid-template-columns:1fr}}
/* Personal touch layout, anchored to the visible viewport and its safe areas. */
:root{--touch-safe-left:env(safe-area-inset-left,0px);--touch-safe-right:env(safe-area-inset-right,0px);--touch-safe-top:env(safe-area-inset-top,0px);--touch-safe-bottom:env(safe-area-inset-bottom,0px)}
#plant,#special{position:fixed;right:auto;bottom:auto;translate:-50% -50%;transform:none;touch-action:none;pointer-events:auto;z-index:32;user-select:none;-webkit-user-select:none}
#plant:active{transform:scale(.96)}
#plant strong{font-size:clamp(16px,calc(var(--touch-size,156px)*.17),34px)}
#plant .pod-icon{scale:var(--bomb-icon-scale,1);margin:3px 0 6px}
#special{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:3px solid #223641;border-radius:50%;background:radial-gradient(circle at 35% 20%,#ceacff,#8251b6);box-shadow:0 0 0 2px #eed9b8,inset 0 2px #f3d9ff66;color:#fff2da;font:12px Arial,sans-serif;cursor:default}
#special>span{font-size:calc(var(--touch-size,88px)*.3);line-height:1}#special strong{font:calc(var(--touch-size,88px)*.14) OndesBlock,sans-serif}#special small{font-size:calc(var(--touch-size,88px)*.09)}
body:not(.playing) #special{display:none}
#touch-layout-dialog{width:min(1100px,calc(100vw - 16px));max-height:calc(100dvh - 16px);overflow:auto;overscroll-behavior:contain;margin:auto;padding:16px;border:2px solid #73938b;border-radius:18px;background:#203632;color:#fff2da;font:14px Arial,sans-serif;touch-action:pan-y}
#touch-layout-dialog::backdrop{background:#071d19dd}
.layout-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.layout-heading h2{font:20px/1.3 OndesBlock,sans-serif;margin:0}.layout-heading p{margin:4px 0;color:#b8e9ce}.layout-intro{margin:8px 0 12px}
#touch-layout-dialog button{min-height:44px;border:1px solid #73938b;border-radius:9px;padding:8px 12px;background:#33554d;color:#fff2da;font:13px Arial,sans-serif;touch-action:manipulation}
.layout-workspace{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:16px;align-items:start}
#layout-preview-host{height:clamp(180px,62dvh,620px);display:flex;align-items:center;justify-content:center;min-width:0;background:#0b211e;border-radius:12px;overflow:hidden}
#layout-preview{position:relative;overflow:hidden;flex-shrink:0;background:#1d4240;border-radius:8px;touch-action:none}
#layout-image{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#touch-layout-dialog .layout-control{position:absolute;translate:-50% -50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:0;padding:0;border:2px solid #ffe8bf;border-radius:32%;touch-action:none;user-select:none;cursor:grab}
#touch-layout-dialog .layout-control:active{cursor:grabbing}#touch-layout-dialog .layout-control[aria-pressed="true"]{outline:3px dashed #fff;outline-offset:3px}
#touch-layout-dialog .layout-bomb{background:linear-gradient(#f78471,#d94d42)}#touch-layout-dialog .layout-special{background:linear-gradient(#ceacff,#8251b6);border-radius:50%}#touch-layout-dialog .layout-stick{background:#e7fff025;border-radius:50%;border-color:#e7fff088}
.layout-control>span{font-size:1.8em;line-height:1}.layout-control strong,.layout-control small{font-size:.7em}
.layout-options label{display:block;font:13px/1.4 Arial,sans-serif;margin:0 0 10px}.layout-options output{color:#b8e9ce;float:right}.layout-options p{font-size:12px;line-height:1.5}
.layout-options input,.layout-options select{display:block;width:100%;min-height:40px;margin-top:4px;border:1px solid #73938b;border-radius:8px;background:#183e3b;color:#fff2da;padding:6px;font:16px Arial,sans-serif}
.layout-options input[type=range]{padding:0;border:0;background:transparent;accent-color:#75ece0}.layout-options input:disabled{opacity:.4}
.layout-position{display:grid;grid-template-columns:1fr 1fr;gap:8px}.layout-options button{width:100%;margin:4px 0}
.layout-actions{display:flex;justify-content:flex-end;margin-top:12px}#touch-layout-dialog #layout-save{background:#75ece0;border-color:#b6fff2;color:#14382f;font-weight:bold;min-width:160px}
#touch-layout-dialog :focus-visible{outline:3px solid #75ece0;outline-offset:2px}
@media(max-width:650px) and (orientation:portrait){.layout-workspace{grid-template-columns:1fr}#layout-preview-host{height:43dvh}.layout-options{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}.layout-options>p,.layout-position{grid-column:1/-1}.layout-heading h2{font-size:16px}}
@media(orientation:landscape) and (max-height:600px){#touch-layout-dialog{padding:10px}.layout-workspace{grid-template-columns:minmax(0,1fr) 210px;gap:12px}#layout-preview-host{height:calc(100dvh - 160px)}.layout-intro{font-size:11px;margin:4px 0 8px}.layout-heading h2{font-size:16px}.layout-options p{margin:4px 0}.layout-actions{position:sticky;bottom:-10px;background:#203632;padding:6px 0}.layout-options label{margin-bottom:6px}}
#plant .pod-icon{scale:none;display:grid;place-items:center;flex:none;width:clamp(20px,calc(var(--touch-size,156px)*.24),44px);height:clamp(20px,calc(var(--touch-size,156px)*.24),44px);font-size:clamp(16px,calc(var(--touch-size,156px)*.2),34px);line-height:1;margin:3px 0 6px}
#plant .pod-icon small{font-size:clamp(9px,calc(var(--touch-size,156px)*.11),18px);line-height:1;top:calc(var(--touch-size,156px)*-.13)}
/* Idle touch hint remains visible without intercepting any gesture. */
#stick[data-idle="true"]{border-style:dashed}
#stick[data-idle="true"] #knob{background:#e7fff035}
/* Hero album and readable character sheets. */
.hero-portrait{display:block;aspect-ratio:1;background-image:url('/assets/heros-portraits-v1.png');background-size:600% 400%;background-repeat:no-repeat;background-color:#174b48;border-radius:14px}
#heroes-screen{text-align:left}.hero-filters{display:grid;grid-template-columns:1.3fr 1fr;gap:12px}.hero-filters label{font:12px/1.5 Arial,sans-serif}.hero-filters input,.hero-filters select{width:100%;min-height:44px;margin-top:5px;border:1px solid #73938b;border-radius:10px;background:#173d36;color:#fff2da;padding:9px;font:16px Arial,sans-serif}
.heroes-workspace{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,1fr);gap:20px;align-items:start}
#heroes-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-content:start}
.card #heroes-list .hero-card{min-width:0;min-height:0;padding:10px;margin:0;border:2px solid #52786b;background:#173a33;box-shadow:none;border-radius:15px;text-align:left;color:#fff2da;touch-action:manipulation}
.hero-card .hero-portrait{width:100%;border-radius:10px}.hero-card strong,.hero-card small{display:block;margin:9px 0 4px;white-space:normal;overflow-wrap:anywhere}.hero-card strong{font:15px/1.35 OndesBlock,Arial,sans-serif}.hero-card small{font:12px/1.4 Arial,sans-serif;color:#b8e9ce}
.card #heroes-list .hero-card[aria-pressed="true"]{border-color:#75ece0;box-shadow:0 0 0 2px #75ece033;background:#285950}
#hero-detail{position:sticky;top:0;padding:16px;background:#153c35;border:1px solid #77a48d;border-radius:18px}
.hero-detail-heading{display:flex;align-items:center;gap:14px}.hero-detail-heading .hero-portrait{width:100px;flex-shrink:0}#hero-name{font:24px/1.3 OndesBlock,sans-serif;margin:5px 0}#hero-tag{margin:0;color:#c6d9bf}.hero-detail-heading span{font:11px Arial,sans-serif;letter-spacing:1px;color:#75ece0}
.hero-stats-label{font:10px Arial,sans-serif;letter-spacing:1.5px;color:#a5c8b4;margin-top:20px}#hero-stats{margin:0;display:grid;gap:0}#hero-stats>div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #91b29a25;padding:9px 0;font:13px Arial,sans-serif}#hero-stats dt{color:#bfd4c5}#hero-stats dd{margin:0;font-weight:bold;text-align:right;white-space:nowrap;color:#fff2da}
.hero-power{padding:13px;margin-top:16px;border:1px solid #b89be788;border-radius:12px;background:#493c6244}.hero-power>span{font:10px/1.5 Arial,sans-serif;color:#ddc3ff}.hero-power h4{margin:7px 0;font:17px OndesBlock,sans-serif}.hero-power p{margin:5px 0;font:13px/1.6 Arial,sans-serif}.hero-rules-note{font:11px/1.5 Arial,sans-serif;color:#9eb9ac}
.hero-equip-actions{display:grid;gap:10px}.card .hero-equip-actions button{min-height:44px;padding:12px;font:14px Arial,sans-serif;touch-action:manipulation}.card .hero-equip-actions #hero-classic{background:#234c43;border:1px solid #73938b;box-shadow:none;color:#d4dfbf;font-size:12px}
.card #lobby-hero{width:100%;grid-column:1/-1;margin:10px 0;padding:10px 14px;min-height:44px;font:14px Arial,sans-serif;background:#314e63;border:1px solid #a5c5d1;box-shadow:none;color:#fff2da;touch-action:manipulation}
body[data-menu-page="heroes"] #welcome .card{max-width:min(1050px,100%);width:100%;text-align:left}body[data-menu-page="heroes"] .card>h2{margin:10px 0}body[data-menu-page="heroes"] #intro{margin:5px 0 14px;font:13px Arial,sans-serif}
#heroes-screen button:focus-visible{outline:3px solid #75ece0;outline-offset:3px}
@media(max-width:650px){.heroes-workspace{grid-template-columns:1fr}#heroes-list{grid-template-columns:repeat(2,minmax(0,1fr));max-height:48dvh;overflow:auto;padding:3px;overscroll-behavior:contain}#hero-detail{position:static;padding:13px}.hero-card strong{font-size:15px}.hero-card small{font-size:12px}.hero-filters{gap:8px}.hero-detail-heading .hero-portrait{width:84px}}
@media(orientation:landscape) and (max-height:600px){.heroes-workspace{grid-template-columns:minmax(0,1.2fr) minmax(240px,1fr);gap:14px}#heroes-list{grid-template-columns:repeat(2,minmax(0,1fr));max-height:none;overflow:visible}#hero-detail{position:static}.hero-detail-heading .hero-portrait{width:72px}#hero-name{font-size:20px}}
#special[aria-disabled="false"]{box-shadow:0 0 0 2px #eed9b8,0 0 16px #cba2ff66,inset 0 2px #f3d9ff66;cursor:pointer}
#touch-layout-dialog #layout-special strong{font-size:.55em}
@media(min-width:1000px){#heroes-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Hero selection uses the full album; details open in a native modal. */
.heroes-workspace{display:block}
#heroes-list{grid-template-columns:repeat(auto-fill,minmax(min(100%,140px),1fr));max-height:none;overflow:visible;padding:3px}
#hero-dialog{width:min(560px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 24px);padding:0;margin:auto;border:2px solid #77a48d;border-radius:20px;background:#153c35;color:#fff2da;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;box-shadow:0 16px 60px #051b18aa}
#hero-dialog::backdrop{background:#071d19bb;backdrop-filter:blur(4px)}
#hero-dialog #hero-detail{position:static;border:0;border-radius:0;padding:20px}
.hero-dialog-toolbar{display:flex;justify-content:flex-end;margin:-8px -8px 6px}
#hero-dialog-close{width:44px;height:44px;padding:0;border:1px solid #73938b;border-radius:50%;background:#28564c;color:#fff2da;font:30px/1 Arial,sans-serif;touch-action:manipulation}
#hero-dialog .hero-detail-heading>div:last-child{min-width:0}
#hero-dialog #hero-name{overflow-wrap:anywhere}
#hero-dialog .hero-equip-actions button{min-height:48px;padding:12px;border:2px solid #c97662;border-radius:14px;background:#f18d74;color:#342f27;font:bold 16px Arial,sans-serif;touch-action:manipulation}
#hero-dialog #hero-classic{background:#234c43;border:1px solid #73938b;color:#d4dfbf;font-size:14px}
#hero-dialog button:focus-visible{outline:3px solid #75ece0;outline-offset:3px}
@media(max-width:380px){#heroes-list{grid-template-columns:repeat(2,minmax(0,1fr))}#hero-dialog #hero-detail{padding:14px}#hero-dialog .hero-detail-heading .hero-portrait{width:80px}}
/* Splash Arena: the home menu sits directly in the illustrated arena. */
.home-brand{display:none}
body[data-menu-page="home"] main{max-width:none;width:100%;background:#143e3a}
body[data-menu-page="home"] nav{display:none}
body[data-menu-page="home"] #welcome{position:fixed;inset:0;padding:24px max(16px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom));overflow:auto;align-items:center;background:linear-gradient(90deg,#092d2433,transparent 27%,#062e2855 50%,transparent 73%,#092d2433),url('/assets/splash-arena-home-v1.png') center/cover no-repeat}
body[data-menu-page="home"] #welcome .card{width:min(520px,100%);max-width:520px;max-height:none;margin:auto;padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;overflow:visible;isolation:isolate}
body[data-menu-page="home"] .lobby-heading{position:fixed;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));margin:0;z-index:2}
body[data-menu-page="home"] .lobby-heading .eyebrow{display:none}
body[data-menu-page="home"] #fullscreen{background:#173c35c9;color:#fff2da;border:1px solid #b9d2ac88;border-radius:12px;padding:10px 12px;box-shadow:0 3px #092e28;font:12px Arial,sans-serif;min-height:40px}
body[data-menu-page="home"] .card>h2{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body[data-menu-page="home"] .home-brand{display:block;width:min(440px,88vw);margin:0 auto -5px;filter:drop-shadow(0 8px 6px #072c3f66)}
.home-brand img{display:block;width:100%;height:auto;max-height:230px;object-fit:contain}
body[data-menu-page="home"] .card #intro{display:block;color:#fff5db;margin:0 0 18px;text-align:center;text-shadow:0 2px 2px #102e28,0 0 12px #092d26;font:600 14px/1.4 Arial,sans-serif}
body[data-menu-page="home"] #home-menu{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:0}
body[data-menu-page="home"] #home-menu button{position:relative;isolation:isolate;align-items:center;text-align:center;justify-content:center;width:100%;min-height:66px;margin:0;padding:12px 16px;border:2px solid #fbe9b4;border-radius:19px 16px 21px 17px;background:radial-gradient(ellipse at 30% 0%,#ffffff44,transparent 65%),linear-gradient(#57b9a4,#277f70);box-shadow:inset 0 2px 2px #ffffff66,inset 0 -4px 1px #105e5655,0 5px 0 #164c43,0 8px 15px #062f3166;color:#fff5da;touch-action:manipulation;transition:transform .12s,filter .12s;gap:3px}
body[data-menu-page="home"] #home-menu button::before{content:"";position:absolute;inset:0;border-radius:inherit;background:url('/assets/matieres-jardin-v2.png') center/400px;opacity:.09;z-index:-1;pointer-events:none;mix-blend-mode:soft-light}
body[data-menu-page="home"] #home-menu button strong{font:19px/1.2 OndesBlock,Arial,sans-serif;letter-spacing:.3px;text-shadow:0 2px #174c4f}
body[data-menu-page="home"] #home-menu button small{font:12px/1.3 Arial,sans-serif;color:#fff4df;max-width:100%;white-space:normal;text-shadow:0 1px #245d57}
body[data-menu-page="home"] #menu-training,body[data-menu-page="home"] #menu-multiplayer{grid-column:span 6;min-height:68px}
body[data-menu-page="home"] #home-menu #menu-training{background:radial-gradient(ellipse at 25% 0%,#fff5b966,transparent 70%),linear-gradient(#ffc86a,#e89d3d);color:#493921;border-color:#fff0c6;box-shadow:inset 0 2px 2px #fff5cd, inset 0 -4px 1px #9f642455,0 5px #936039,0 8px 15px #062f3166}
body[data-menu-page="home"] #menu-training strong{color:#493921;text-shadow:0 1px #ffdf9c}
body[data-menu-page="home"] #menu-training small{color:#5b4428;text-shadow:none}
body[data-menu-page="home"] #home-menu #menu-multiplayer{background:radial-gradient(ellipse at 25% 0%,#ffe6c344,transparent 70%),linear-gradient(#ff967c,#e86f5b);box-shadow:inset 0 2px 2px #ffdcc1,inset 0 -4px 1px #a4463b55,0 5px #873f39,0 8px 15px #062f3166}
body[data-menu-page="home"] #menu-multiplayer strong{text-shadow:0 2px #994c3c}
body[data-menu-page="home"] #menu-heroes,body[data-menu-page="home"] #menu-achievements,body[data-menu-page="home"] #menu-settings{grid-column:span 2;min-height:82px;padding:12px 8px}
body[data-menu-page="home"] #menu-heroes strong,body[data-menu-page="home"] #menu-achievements strong,body[data-menu-page="home"] #menu-settings strong{font-size:15px}
body[data-menu-page="home"] #menu-heroes small,body[data-menu-page="home"] #menu-achievements small,body[data-menu-page="home"] #menu-settings small{font-size:11px}
body[data-menu-page="home"] #home-menu #menu-quit{grid-column:2/6;min-height:36px;padding:8px 16px;border:0;background:#103b3377;box-shadow:none;border-radius:20px;justify-self:center;width:auto;color:#fff2db}
body[data-menu-page="home"] #menu-quit strong{font:600 12px Arial,sans-serif;text-shadow:0 1px #153c35}
body[data-menu-page="home"] #home-menu button:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}
body[data-menu-page="home"] #home-menu button:active:not(:disabled){transform:translateY(3px)}
body[data-menu-page="home"] #menu-notice{background:#153c35dd;border-radius:12px;text-align:center;padding:10px}
@media(max-width:400px){body[data-menu-page="home"] #welcome{padding:54px 16px 18px}body[data-menu-page="home"] #home-menu{gap:10px}body[data-menu-page="home"] #menu-heroes strong,body[data-menu-page="home"] #menu-achievements strong,body[data-menu-page="home"] #menu-settings strong{font-size:12px}body[data-menu-page="home"] .card #intro{font-size:12px}.home-brand img{max-height:190px}}
@media(orientation:landscape) and (max-height:600px){
body[data-menu-page="home"] #welcome{padding:54px 24px 18px;background-position:center}
body[data-menu-page="home"] #welcome .card{display:grid;grid-template-columns:minmax(170px,.9fr) minmax(300px,1fr);column-gap:30px;align-items:center;max-width:820px;width:100%}
body[data-menu-page="home"] .home-brand{grid-column:1;grid-row:1/3;width:100%;margin:0}.home-brand img{max-height:230px}
body[data-menu-page="home"] .card #intro{grid-column:2;font-size:12px;margin:0 0 10px}
body[data-menu-page="home"] #home-menu{grid-column:2;gap:8px}
body[data-menu-page="home"] #home-menu #menu-training,body[data-menu-page="home"] #home-menu #menu-multiplayer{min-height:49px;padding:8px 12px}
body[data-menu-page="home"] #home-menu button strong{font-size:16px}body[data-menu-page="home"] #home-menu button small{font-size:10px}
body[data-menu-page="home"] #home-menu #menu-heroes,body[data-menu-page="home"] #home-menu #menu-achievements,body[data-menu-page="home"] #home-menu #menu-settings{min-height:60px;padding:8px 6px}
body[data-menu-page="home"] #home-menu #menu-heroes strong,body[data-menu-page="home"] #home-menu #menu-achievements strong,body[data-menu-page="home"] #home-menu #menu-settings strong{font-size:12px}
body[data-menu-page="home"] #home-menu #menu-quit{min-height:28px;padding:6px 12px}
body[data-menu-page="home"] #menu-notice{grid-column:1/-1}
}
@media(orientation:portrait){body[data-menu-page="home"] #welcome{background-image:linear-gradient(#072d2811,#072d2833),url('/assets/splash-arena-home-portrait-v1.png');background-position:center;background-size:cover}}
.hero-editor-link{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border:1px solid #73938b;border-radius:10px;background:#234c43;color:#b8ffe6;font:14px Arial,sans-serif;text-decoration:none;touch-action:manipulation}
/* Le cercle montre la fraction de recharge restante, depuis midi. */
#special-cooldown{display:none;position:absolute;inset:-5%;width:110%;height:110%;overflow:visible;pointer-events:none;transform:rotate(-90deg)}
#special-cooldown circle{fill:none;stroke-width:5}
#special-cooldown .cooldown-track{stroke:#241b38bb}
#special-cooldown-fill{stroke:#ffe7a3;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;filter:drop-shadow(0 0 2px #241b38)}
/* Tous les menus partagent le décor et les commandes de l’accueil. */
body:not(.playing) #welcome{position:fixed;inset:0;align-items:flex-start;background:linear-gradient(#082d2870,#082d2890),url('/assets/splash-arena-home-v1.png') center/cover no-repeat}
body:not(.playing):not([data-menu-page="home"]) #welcome .card{width:min(1000px,100%);max-width:1000px;max-height:none;margin:auto;padding:24px;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;overflow:visible;text-shadow:0 2px 4px #082b26}
body:not(.playing):not([data-menu-page="home"]) .home-brand{display:block;width:min(270px,55vw);margin:0 auto}
body:not(.playing) #welcome h2,body:not(.playing) #welcome p{color:#fff2da}
body:not(.playing) #welcome .card button:not(.hero-card):not(.choice-buttons button){border:2px solid #eed9b8;border-radius:16px;background:radial-gradient(ellipse at 30% 0%,#ffffff33,transparent 70%),linear-gradient(#57b9a4,#277f70);box-shadow:inset 0 2px #e1ffe377,0 3px #123d34;color:#fff2da;min-height:44px;touch-action:manipulation}
body:not(.playing) .lobby-form{padding:16px;background:#123d35b8;border-radius:18px}
body:not(.playing) main>nav{display:none}
#map-open{width:100%;margin-top:12px!important}
#map-dialog{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:24px max(16px,env(safe-area-inset-right)) 32px max(16px,env(safe-area-inset-left));border:0;color:#fff2da;background:linear-gradient(#082d28bb,#082d28cc),url('/assets/splash-arena-home-v1.png') center/cover;overflow:auto;touch-action:pan-y}
#map-dialog::backdrop{background:#082d28}.map-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1100px;margin:auto}.map-heading h2{font:clamp(20px,4vw,32px) OndesBlock,sans-serif}#map-close{border:1px solid #eed9b8;border-radius:50%;width:44px;height:44px;background:#277f70;color:white;font:28px Arial;cursor:pointer}
#map-picker-hint{max-width:1100px;margin:12px auto 24px;font:15px/1.5 Arial,sans-serif}#map-cards{max-width:1100px;margin:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.map-choice{padding:10px;border:2px solid #88b49e;border-radius:20px;background:linear-gradient(#286352ee,#164438ee);color:#fff2da;box-shadow:0 5px #082d28;text-align:left;cursor:pointer;touch-action:manipulation}.map-choice[aria-pressed="true"]{border-color:#ffe3a0;box-shadow:0 0 0 3px #ffe3a044}.map-choice canvas{display:block;width:100%;height:190px;object-fit:contain;background:#103b35;border-radius:12px}.map-choice strong{display:block;margin:12px 4px 6px;font:18px OndesBlock,sans-serif}.map-choice small{display:block;margin:4px;font:14px Arial,sans-serif;color:#d0e5d5}.map-random{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:250px;background:linear-gradient(#ab8bc4ee,#675184ee)}.map-random>span{font:100px Arial}.map-choice:focus-visible,#map-close:focus-visible{outline:3px solid #ffe3a0;outline-offset:4px}
@media(orientation:portrait){body:not(.playing) #welcome,#map-dialog{background-image:linear-gradient(#082d2870,#082d2890),url('/assets/splash-arena-home-portrait-v1.png')}}
@media(orientation:landscape) and (max-height:600px){body:not(.playing):not([data-menu-page="home"]) #welcome .card{padding:12px}.home-brand img{max-height:110px}#map-dialog{padding-top:10px}#map-picker-hint{margin:4px auto 12px}.map-choice canvas{height:135px}.map-random{min-height:200px}}
#hero-dialog,#commands-dialog,#touch-layout-dialog{background:linear-gradient(#123d35ed,#123d35ed),url('/assets/splash-arena-home-v1.png') center/cover;border-color:#eed9b8;box-shadow:0 8px 32px #082d2880}
#hero-dialog::backdrop,#commands-dialog::backdrop,#touch-layout-dialog::backdrop{background:linear-gradient(#082d2870,#082d2890),url('/assets/splash-arena-home-v1.png') center/cover}
#hero-dialog #hero-detail{background:transparent}
body:not(.playing) #welcome .card .lobby-tabs button[aria-selected="true"]{border-color:#fff0a5;background:linear-gradient(#79d4bb,#358d79);box-shadow:inset 0 2px #efffd5,0 3px #123d34}
body:not(.playing) #welcome .card :is(#start-training,#start,#create-room){background:radial-gradient(ellipse at 25% 0%,#ffe6c344,transparent 70%),linear-gradient(#ff967c,#e86f5b);box-shadow:inset 0 2px #ffdcc1,0 4px #873f39;color:#fff2da}
body[data-menu-page="home"] #home-menu #menu-shop{grid-column:1/-1;min-height:48px;background:linear-gradient(#b69ada,#775b9a)}
.shop-wallet{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px;background:#153c35cc;border:1px solid #ffe089;border-radius:16px}.shop-wallet strong{font:23px OndesBlock,sans-serif;color:#ffe089}.shop-wallet span,.shop-dev p{font:13px Arial,sans-serif}#shop-tabs{justify-content:center}#shop-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}.shop-item{display:flex;flex-direction:column;align-items:center;padding:18px;border:2px solid #88b49e;border-radius:20px;background:#153c35e8;text-align:center}.shop-item .shop-art{width:120px;height:120px}.shop-icon{font:90px Arial;line-height:1.4}.shop-item h3{font:18px OndesBlock,sans-serif;margin:14px 0 5px}.shop-item p{font:14px/1.5 Arial;flex:1}.shop-item button{width:100%;font:14px Arial!important;padding:10px!important}.shop-dev{margin-top:24px;padding:14px;background:#153c35cc;border-radius:14px}.shop-dev button{font:13px Arial!important;margin:5px!important}.choice-buttons{grid-template-columns:repeat(5,minmax(0,1fr))!important}
/* Nouvelles entrées de jeu, sur la même ligne et dans le thème de l’accueil. */
body[data-menu-page="home"] #home-menu #menu-quick,body[data-menu-page="home"] #home-menu #menu-challenges{grid-column:span 3;min-height:60px;padding:12px 8px}
body[data-menu-page="home"] #home-menu #menu-quick{background:radial-gradient(ellipse at 30% 0%,#ffffff44,transparent 65%),linear-gradient(#ffc86a,#e89d3d);color:#493921;box-shadow:inset 0 2px #fff5cd,0 5px #936039,0 8px 15px #062f3166}
body[data-menu-page="home"] #home-menu #menu-quick strong{color:#493921;text-shadow:0 1px #ffdf9c}
body[data-menu-page="home"] #home-menu #menu-challenges{background:radial-gradient(ellipse at 30% 0%,#ffffff44,transparent 65%),linear-gradient(#b69ada,#775b9a)}
@media(max-width:400px),(orientation:landscape) and (max-height:600px){body[data-menu-page="home"] #home-menu #menu-quick,body[data-menu-page="home"] #home-menu #menu-challenges{min-height:48px;padding:10px 6px}body[data-menu-page="home"] #home-menu #menu-quick strong,body[data-menu-page="home"] #home-menu #menu-challenges strong{font-size:14px}}
/* Réglages : accès compact dans la barre supérieure de l’accueil. */
body:not(.playing) #welcome .card #menu-settings{display:inline-flex;align-items:center;justify-content:center;flex:0 0 46px;width:46px;height:46px;min-height:46px;margin:0;padding:0;border:2px solid #eed9b8;border-radius:50%;background:linear-gradient(#57b9a4,#277f70);box-shadow:inset 0 2px #e1ffe377,0 3px #123d34;color:#fff2da;font:29px/1 Arial,sans-serif;touch-action:manipulation}
#menu-settings:focus-visible{outline:3px solid #ffe3a0;outline-offset:4px}
body[data-menu-page="home"] #home-menu #menu-heroes,body[data-menu-page="home"] #home-menu #menu-achievements{grid-column:span 3}
#room-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:16px 0}.card .room-choice{display:flex;flex-direction:column;gap:8px;align-items:flex-start;text-align:left;padding:14px!important;min-height:90px;border-radius:16px}.room-choice strong{font:16px OndesBlock,Arial,sans-serif}.room-choice small{font:13px/1.5 Arial,sans-serif}.room-choice[aria-pressed="true"]{outline:2px solid #ffe3a0}#room-invite{padding:10px;border-radius:12px;background:#153c35cc;font:14px/1.5 Arial,sans-serif;overflow-wrap:anywhere}#room-link{color:#b8ffe6;text-decoration:underline;touch-action:manipulation}
.account-summary{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap;font-size:.8rem}.account-summary button{padding:.35rem .7rem;font-size:inherit}
#account-dialog{max-width:min(420px,90vw);border:0;border-radius:18px;padding:1.25rem;background:#fff5dd;color:#18382e}#account-dialog::backdrop{background:#102f35aa}.account-dialog-content{display:grid;gap:.75rem}.account-dialog-content h2,.account-dialog-content p{margin:0}.account-dialog-content button{padding:.75rem;border-radius:10px}#account-conflict{border:1px solid #b48c56;padding:.6rem;border-radius:10px}#account-conflict button{margin-top:.5rem;width:100%}
body[data-menu-page="home"] #home-menu .account-summary{padding:8px 10px;border-radius:14px;background:#153c35df;color:#fff5dd;font:12px/1.4 Arial,sans-serif}
body[data-menu-page="home"] #home-menu .account-summary button{min-height:40px;padding:8px 12px;font:600 13px/1.3 Arial,sans-serif;border-radius:10px;box-shadow:0 2px #164c43}
#account-status{flex-basis:100%;text-align:center}
#account-dialog p{color:#334f44;opacity:1;text-shadow:none;font:14px/1.55 Arial,sans-serif}
#account-dialog button{background:#236653;color:#fff5dd;border:1px solid #174e3f;font:600 14px/1.4 Arial,sans-serif;min-height:44px}
#account-dialog button:disabled{background:#e4e8e2;color:#526158;border-color:#b2beb4;opacity:1}
#account-dialog #account-close{background:transparent;color:#234c3e}