#root>main{--ink:#102a43;--muted:#526d7f;--line:#cad8cf;--lime:#1f7a5a;--panel:#fffdf7;background:transparent}
#root .scorebar{gap:12px}
#root .player,#root .match{color:#102a43;background:linear-gradient(145deg,#fffef9,#f2f8f3);border:1px solid #cbdcd1;box-shadow:0 9px 24px rgba(16,42,67,.12);opacity:1}
#root .player.active{border-color:#26966e;box-shadow:0 0 0 2px rgba(38,150,110,.16),0 10px 28px rgba(16,42,67,.13)}
#root .player.active:before{content:"";position:absolute;inset:0 auto 0 0;width:5px;border-radius:14px 0 0 14px;background:#26966e}
#root .player{position:relative}
#root .avatar{color:#102a43;background:linear-gradient(145deg,#e7f6ed,#d4ebdf);border-color:#8bbda3}
#root .player.active .avatar{border-color:#26966e}
#root .player small,#root .match small{color:#1f7a5a}
#root .player strong,#root .match strong{color:#102a43}
#root .player span,#root .match span,#root .status{color:#526d7f}
#root .sound{color:#102a43;background:#fffdf7;border-color:#cbdcd1;box-shadow:0 6px 18px rgba(16,42,67,.12)}
#root .modal:not(.result){background:linear-gradient(145deg,rgba(255,253,247,.9),rgba(223,244,232,.86));backdrop-filter:blur(4px)}
#root .modal:not(.result) h1{color:#102a43;text-shadow:0 2px 0 #fff,0 10px 30px rgba(16,42,67,.12)}
#root .modal:not(.result) .eyebrow{color:#176247;background:#fffdf7;border-color:#b8dfca}
#root .modal:not(.result) button{color:#fff;background:linear-gradient(180deg,#35aa7d,#1f7a5a);box-shadow:0 7px 0 #14533c,0 12px 28px rgba(31,122,90,.24)}
#root .how{display:none!important}
#root .status:after{content:"30 secondes par coup"!important;color:#6d8798}
.home-sections .card,.home-sections details{color:#102a43;background:#fffdf7}
.home-sections .card p,.home-sections details p{color:#38566f}
@media(max-width:720px){#root .scorebar{gap:7px}
#root .player,#root .match{box-shadow:0 5px 14px rgba(16,42,67,.1)}
}
@media(orientation:landscape) and (max-height:600px){body{width:100%;height:100dvh;overflow:hidden}
.site-header,.site-intro,.home-sections,.site-footer,.cookie-notice{display:none!important}
#root{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;margin:0}
#root>main{width:100%;height:100dvh}
#root .scorebar{top:max(5px,env(safe-area-inset-top));padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right));gap:0}
#root .player{width:min(32vw,240px);min-height:38px}
#root .sound{right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom))}
#root .canvasWrap{width:min(100vw,calc(100dvh * 1.886792));height:auto;max-height:100dvh}
#root .canvasWrap canvas{max-width:100vw;max-height:100dvh}
}

/* Illustrazione iniziale nei colori del marchio */
#root .modal:not(.result){isolation:isolate;overflow:hidden;display:block;background:radial-gradient(ellipse at 50% 38%,rgba(17,103,78,.2),transparent 44%),linear-gradient(180deg,rgba(3,28,24,.55),rgba(2,15,15,.88));border:1px solid rgba(218,255,232,.26);box-shadow:inset 0 0 90px rgba(0,0,0,.24);backdrop-filter:blur(1.5px) saturate(.85);-webkit-backdrop-filter:blur(1.5px) saturate(.85)}
#root .modal:not(.result):before{content:"";position:absolute;z-index:1;inset:3% 8% 18%;width:auto;height:auto;aspect-ratio:auto;border-radius:0;background:url("../assets/images/octabreak-opening-hero.png") center/contain no-repeat;filter:drop-shadow(0 22px 25px rgba(0,0,0,.48));opacity:1;transform:none;animation:heroFloat 5.5s ease-in-out infinite}
#root .modal:not(.result):after{content:"";position:absolute;z-index:0;inset:auto 13% 5%;width:74%;height:29%;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.62),transparent 68%);opacity:.65;transform:none;animation:none}
#root .modal:not(.result)>*{position:absolute;z-index:3}
#root .modal:not(.result) .eyebrow{top:7%;left:50%;margin:0;padding:8px 16px;color:#f4ffdc;background:rgba(7,39,32,.82);border:1px solid rgba(191,242,59,.65);box-shadow:0 9px 24px rgba(0,0,0,.3);transform:translateX(-50%);white-space:nowrap}
#root .modal:not(.result) h1{left:50%;top:auto;bottom:17%;width:auto;margin:0;color:#fff;font-size:clamp(31px,5vw,62px);line-height:.95;letter-spacing:.035em;text-shadow:0 4px 1px #071914,0 10px 26px rgba(0,0,0,.8);transform:translateX(-50%);white-space:nowrap}
#root .modal:not(.result) p{display:none}
#root .modal:not(.result)>button{left:50%;bottom:5%;min-width:190px;padding:15px 30px;color:#102300;background:linear-gradient(180deg,#dfff69,#b7ef32 63%,#9bdc1e);border:1px solid rgba(255,255,255,.8);box-shadow:0 6px 0 #397919,0 15px 34px rgba(165,232,42,.38),inset 0 1px rgba(255,255,255,.8);transform:translateX(-50%)}
#root .modal:not(.result)>button:hover,#root .modal:not(.result)>button:focus-visible{transform:translate(-50%,-3px) scale(1.035);box-shadow:0 9px 0 #397919,0 20px 44px rgba(165,232,42,.5),inset 0 1px rgba(255,255,255,.9)}
#root .modal:not(.result)>button:active{transform:translate(-50%,4px)}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media(prefers-reduced-motion:reduce){#root .modal:not(.result):before{animation:none}}
@media(max-width:720px) and (orientation:portrait){#root .modal:not(.result):before{inset:12% 2% 22%}#root .modal:not(.result) .eyebrow{top:8%}#root .modal:not(.result) h1{bottom:17%;font-size:clamp(27px,8.6vw,44px)}#root .modal:not(.result)>button{bottom:5%;min-width:174px;padding:13px 24px}}
@media(orientation:landscape) and (max-height:600px){#root .modal:not(.result):before{inset:2% 15% 16%}#root .modal:not(.result) .eyebrow{top:4%;padding:5px 11px}#root .modal:not(.result) h1{bottom:16%;font-size:clamp(25px,7.5vh,40px)}#root .modal:not(.result)>button{bottom:3%;min-width:150px;padding:9px 20px}}