@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=Inter:wght@500;600;700;800&display=swap');

:root { --navy:#071722; --panel:#102b38; --blue:#21b8ee; --green:#91d33f; --purple:#a978e8; --orange:#ff9d45; --teal:#28c7aa; --pink:#e44f8f; --indigo:#5578ff; --cream:#f5eddf; --gold:#ffc84b; --red:#ff665b; font-family:Inter,system-ui,sans-serif; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; overflow:hidden; background:radial-gradient(circle at 50% 20%,#194150,#071722 65%); color:white; }
button { font:inherit; }
.game-app { height:100vh; display:grid; grid-template-rows:76px minmax(0,1fr) 44px; padding:0 18px; }
.hud { display:grid; grid-template-columns:1fr 170px 210px 170px 44px; align-items:center; gap:12px; max-width:1300px; width:100%; margin:auto; }
.brand { display:flex; align-items:center; gap:10px; }
.brand-logo{width:150px;height:auto;display:block;filter:drop-shadow(0 5px 12px #0004)}.brand small{padding-left:10px;border-left:1px solid #ffffff2b;color:var(--green);font:900 9px/1.25 'Barlow Condensed';letter-spacing:1.5px;max-width:105px}
.score-card { height:54px;padding:5px 13px 5px 5px;border-radius:14px;display:flex;align-items:center;gap:10px;background:#ffffff0c;border:1px solid #ffffff14; }
.score-card img { width:43px;height:43px;border-radius:10px;object-fit:cover; }.score-card small { display:block;color:#92a9b3;font-size:8px;font-weight:800;letter-spacing:1.4px; }.score-card b { font:900 25px/21px 'Barlow Condensed'; }
.player-score img { border:2px solid var(--blue); }.player-score b { color:var(--blue); }.player-score.antonio img{border-color:var(--green)}.player-score.antonio b{color:var(--green)}.player-score.ciccioalessi img{border-color:var(--purple)}.player-score.ciccioalessi b{color:var(--purple)}.player-score.fabiuccio img{border-color:var(--orange)}.player-score.fabiuccio b{color:var(--orange)}.player-score.sergio img{border-color:var(--teal)}.player-score.sergio b{color:var(--teal)}.player-score.federica img{border-color:var(--pink)}.player-score.federica b{color:var(--pink)}.cpu-score b{color:var(--red)}
.cpu-avatar{position:relative;flex:0 0 auto;width:43px;height:43px;border:2px solid var(--red);border-radius:13px;display:block;background:radial-gradient(circle at 50% 42%,#ff9389 0 12%,#d83d36 13% 30%,#4c2022 31% 60%,#17252c 61%);box-shadow:inset 0 0 0 3px #0b1820,0 0 12px #ff665b44}.cpu-avatar:before,.cpu-avatar:after{content:'';position:absolute;top:17px;width:6px;height:6px;border-radius:50%;background:#ffdf68;box-shadow:0 0 7px #ffdf68}.cpu-avatar:before{left:10px}.cpu-avatar:after{right:10px}.cpu-avatar i{position:absolute;left:14px;bottom:8px;width:12px;height:3px;border-radius:4px;background:#ff665b}
.timer { text-align:center; }.timer small { display:block;color:#91a7b1;font-size:8px;font-weight:800;letter-spacing:2px; }.timer strong { display:block;font:900 30px/29px 'Barlow Condensed'; }.timer i { display:block;height:4px;border-radius:4px;background:#ffffff12;overflow:hidden; }.timer i span { display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--green),var(--gold));transition:width .2s linear; }
.sound-button { width:42px;height:42px;border-radius:50%;border:1px solid #ffffff18;background:#ffffff0b;color:white;cursor:pointer; }
.arena-shell { min-height:0; position:relative; height:100%; width:auto; max-width:100%; max-height:680px; aspect-ratio:1200/680; margin:auto; border-radius:22px; overflow:hidden; box-shadow:0 28px 70px #0009,0 0 0 1px #ffffff18; background:#d9d0be; }
#gameCanvas { width:100%;height:100%;display:block; }
.level-badge{position:absolute;left:16px;top:14px;z-index:4;padding:7px 11px;border:1px solid #fff5;border-radius:9px;color:#fff;background:#071722bd;box-shadow:0 5px 18px #0004;font:900 9px Inter;letter-spacing:1.4px;pointer-events:none}
.countdown { position:absolute;inset:0;display:none;place-items:center;background:#07172266;backdrop-filter:blur(3px);font:900 clamp(90px,18vw,190px) 'Barlow Condensed';text-shadow:0 12px 0 #07172266;z-index:8; }.countdown.show { display:grid; }
.power-banner { position:absolute;left:50%;top:18px;transform:translate(-50%,-30px);opacity:0;padding:9px 18px;border-radius:20px;color:#513700;background:var(--gold);font-size:10px;font-weight:900;letter-spacing:1px;transition:.25s;z-index:5; }.power-banner.show { opacity:1;transform:translate(-50%,0); }
.tutorial { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:none;align-items:center;gap:16px;padding:15px 22px;border-radius:18px;background:#071722e8;box-shadow:0 15px 45px #0006;z-index:7;pointer-events:none; }.tutorial.show { display:flex;animation:tutorialIn .3s ease; }.tutorial strong { font:800 12px Inter;letter-spacing:1px; }.keys { width:70px;display:grid;grid-template-columns:repeat(3,22px);gap:2px; }.keys span { width:22px;height:22px;border-radius:4px;display:grid;place-items:center;background:#ffffff16;font-size:10px; }.keys span:first-child { grid-column:2; }.tutorial-arrow { color:var(--gold);font-size:24px; }.sample-token { width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:white;background:var(--blue);box-shadow:0 0 20px var(--blue); }
@keyframes tutorialIn { from { opacity:0;transform:translate(-50%,-45%) scale(.9); } }
.mobile-pad { display:none;position:absolute;left:16px;bottom:16px;width:126px;height:126px;grid-template:repeat(3,1fr)/repeat(3,1fr);z-index:6; }.mobile-pad button { border:1px solid #fff4;border-radius:12px;background:#071722b9;color:white;touch-action:none; }.mobile-pad button:nth-child(1){grid-column:2}.mobile-pad button:nth-child(2){grid-column:1;grid-row:2}.mobile-pad button:nth-child(3){grid-column:2;grid-row:2}.mobile-pad button:nth-child(4){grid-column:3;grid-row:2}
.footer-hint { max-width:1200px;width:100%;margin:auto;display:flex;align-items:center;justify-content:space-between;color:#94a9b2;font-size:9px;text-transform:uppercase;font-weight:700;letter-spacing:.5px; }.footer-hint b { color:#d7e3e7;font-size:9px;letter-spacing:1.5px; }.footer-hint i { display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px; }.blue-dot{background:var(--blue);box-shadow:0 0 8px var(--blue)}.green-dot{background:var(--green);box-shadow:0 0 8px var(--green)}.purple-dot{background:var(--purple);box-shadow:0 0 8px var(--purple)}.orange-dot{background:var(--orange);box-shadow:0 0 8px var(--orange)}.teal-dot{background:var(--teal);box-shadow:0 0 8px var(--teal)}.pink-dot{background:var(--pink);box-shadow:0 0 8px var(--pink)}.red-dot{background:var(--red);box-shadow:0 0 8px var(--red)}
.overlay { position:fixed;inset:0;z-index:20;display:none;place-items:center;padding:22px;overflow:auto;background:#020b11dc;backdrop-filter:blur(13px); }.overlay.open { display:grid; }
.menu-card { width:min(1180px,100%);padding:30px 38px 28px;text-align:center;color:#102630;border-radius:25px;background:linear-gradient(145deg,#fffdf7,#e9ddc8);box-shadow:0 35px 90px #000a; }
.eyebrow { margin:0;color:#1686b5;font-size:9px;font-weight:900;letter-spacing:2.3px;text-transform:uppercase; }.menu-card h1 { margin:5px 0 9px;font:900 46px/42px 'Barlow Condensed';letter-spacing:.2px; }.menu-card h1 span { color:#63a92a; }.lead { max-width:500px;margin:0 auto 20px;color:#617178;font-size:11px;line-height:1.6; }
.versus-concept{display:flex;align-items:center;justify-content:center;gap:10px;margin:-8px auto 14px;font:900 10px Inter;letter-spacing:.6px}.versus-concept span:first-child{color:#148ab7}.versus-concept span:last-child{color:#5d9e29}.versus-concept b{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;color:#fff;background:#17313c;font:900 10px 'Barlow Condensed'}
.character-select { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0; }.character-card { height:126px;position:relative;display:flex;align-items:center;overflow:hidden;padding:8px 12px;text-align:left;border:3px solid transparent;border-radius:18px;color:#102630;background:#ffffff9c;cursor:pointer;transition:.2s; }.character-card:hover{transform:translateY(-3px)}.character-card.selected{border-color:var(--blue);box-shadow:0 10px 25px #169fda22}.character-card[data-character="antonio"].selected{border-color:#6caf2e}.character-card[data-character="ciccioalessi"].selected{border-color:var(--purple);box-shadow:0 10px 25px #8f5dc722}.portrait{width:82px;height:112px;align-self:flex-end;display:block;overflow:hidden;flex:0 0 auto}.portrait img{width:100%;height:100%;object-fit:contain;object-position:center bottom}.card-copy{position:relative;z-index:2;margin-left:8px}.card-copy small{display:block;color:#708087;font-size:7px;font-weight:800;letter-spacing:1px}.card-copy strong{display:block;font:900 27px 'Barlow Condensed'}.card-copy em{display:flex;align-items:center;gap:5px;color:#4e626a;font-style:normal;font-size:7px;font-weight:800}.card-copy em i{width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 8px var(--blue)}.character-card[data-character="antonio"] em i{background:var(--green);box-shadow:0 0 8px var(--green)}.character-card[data-character="ciccioalessi"] em i{background:var(--purple);box-shadow:0 0 8px var(--purple)}.character-card>b{display:none;position:absolute;right:10px;top:10px;width:23px;height:23px;border-radius:50%;place-items:center;color:white;background:#1686b5;font-size:11px}.character-card.selected>b{display:grid}.character-card[data-character="antonio"]>b{background:#64a82c}.character-card[data-character="ciccioalessi"]>b{background:#8f5dc7}
.floor-select{display:flex;align-items:center;justify-content:center;gap:6px;margin:-3px 0 10px}.floor-select small{margin-right:3px;color:#718087;font-size:8px;font-weight:900;letter-spacing:1.3px}.floor-select button,.setting-group button{min-width:58px;padding:7px 9px;border:1px solid #b7c5c9;border-radius:9px;color:#52666e;background:#ffffff9c;font-size:8px;font-weight:900;letter-spacing:.7px;cursor:pointer}.floor-select button.selected,.setting-group button.selected{border-color:#1686b5;color:#fff;background:#173d4c;box-shadow:0 4px 12px #173d4c33}.game-settings{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 auto 10px;max-width:510px}.setting-group{display:flex;align-items:center;justify-content:center;gap:6px}.setting-group>small{color:#718087;font-size:8px;font-weight:900;letter-spacing:1.1px}.setting-group>div{display:flex;gap:4px}.setting-group button{min-width:54px;padding:6px 7px}.setting-group button[data-difficulty="hard"].selected{border-color:#d66751;background:#9d4435}.setting-group button[data-difficulty="easy"].selected{border-color:#65a934;background:#5b8f35}
.one-rule { display:flex;justify-content:center;align-items:center;gap:9px;margin:10px 0 18px;color:#697a80;font-size:9px; }.one-rule strong{color:#17313c;letter-spacing:.8px}.key-icon{width:29px;height:29px;border-radius:8px;display:grid;place-items:center;background:#dcebf0;color:#157ba7;font-size:15px}.play-button{min-width:230px;padding:14px 22px;border:0;border-radius:10px;color:#10230d;background:linear-gradient(135deg,#aae15c,#77bd2c);box-shadow:0 8px 22px #76b82d3b;font-size:12px;font-weight:900;letter-spacing:.7px;cursor:pointer}.play-button span{margin-left:18px}.change-button{display:block;margin:13px auto 0;border:0;background:none;color:#65777e;font-size:9px;font-weight:800;text-decoration:underline;cursor:pointer}
.result-card{max-width:520px}.result-icon{font-size:45px}.result-card h2{margin:5px 0;font:900 47px 'Barlow Condensed'}.final-score{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;margin:23px 0}.final-score>span{padding:11px;border-radius:14px;background:#ffffffa8}.final-score img{width:55px;height:55px;border-radius:13px;object-fit:cover;display:block;margin:auto}.final-score .final-cpu{width:55px;height:55px;margin:auto}.final-score small{display:block;margin-top:5px;color:#718087;font-size:8px;font-weight:800}.final-score b{display:block;font:900 30px 'Barlow Condensed'}.final-score em{color:#829096;font:900 16px 'Barlow Condensed'}
@media(max-width:760px){.game-app{padding:0 7px;grid-template-rows:66px minmax(0,1fr) 30px}.hud{grid-template-columns:1fr 90px 100px 90px}.brand small,.sound-button{display:none}.brand-logo{width:100px}.score-card{height:45px;padding:3px}.score-card img{width:36px;height:36px}.timer strong{font-size:25px}.arena-shell{width:100%;max-height:calc(100vh - 105px)}.footer-hint span{display:none}.footer-hint{justify-content:center}.mobile-pad{display:grid}.menu-card{padding:17px 14px}.menu-card h1{font-size:35px;line-height:33px}.character-select{grid-template-columns:1fr;margin:9px 0}.character-card{height:98px}.portrait{height:90px}.floor-select{flex-wrap:wrap}.floor-select small{width:100%}.game-settings{grid-template-columns:1fr;gap:6px}.setting-group{justify-content:space-between}.tutorial{flex-wrap:wrap;justify-content:center;width:240px}}
.character-select .card-copy strong{font-size:24px}.character-select .card-copy small,.character-select .card-copy em{font-size:6px}.character-card[data-character="fabiuccio"].selected{border-color:var(--orange);box-shadow:0 10px 25px #ff9d4528}.character-card[data-character="fabiuccio"] em i{background:var(--orange);box-shadow:0 0 8px var(--orange)}.character-card[data-character="fabiuccio"]>b{background:#e9832e}
.character-card[data-character="sergio"].selected{border-color:var(--teal);box-shadow:0 10px 25px #28c7aa28}.character-card[data-character="sergio"] em i{background:var(--teal);box-shadow:0 0 8px var(--teal)}.character-card[data-character="sergio"]>b{background:#1da68f}
.character-card[data-character="federica"].selected{border-color:var(--pink);box-shadow:0 10px 25px #e44f8f28}.character-card[data-character="federica"] em i{background:var(--pink);box-shadow:0 0 8px var(--pink)}.character-card[data-character="federica"]>b{background:#c83b79}
.character-select{grid-template-columns:repeat(10,minmax(0,1fr))}.character-card{grid-column:span 2;height:116px}.character-card:nth-child(6){grid-column:2/span 2}
.player-score.emanuele img{border-color:var(--indigo)}.player-score.emanuele b{color:var(--indigo)}.indigo-dot{background:var(--indigo);box-shadow:0 0 8px var(--indigo)}
.character-card[data-character="emanuele"].selected{border-color:var(--indigo);box-shadow:0 10px 25px #5578ff28}.character-card[data-character="emanuele"] em i{background:var(--indigo);box-shadow:0 0 8px var(--indigo)}.character-card[data-character="emanuele"]>b{background:#4566df}
@media(max-width:760px){.character-select{grid-template-columns:repeat(10,72px);overflow-x:auto}.character-card{grid-column:span 2}.character-card:nth-child(6){grid-column:2/span 2}}
.character-card.selected{border-color:var(--role-color,var(--blue))!important;box-shadow:0 10px 25px #10263024!important}.character-card em i{background:var(--role-color,var(--blue))!important;box-shadow:0 0 8px var(--role-color,var(--blue))!important}.character-card>b{background:var(--role-color,var(--blue))!important}.player-score img{border-color:var(--role-color,var(--blue))!important}.player-score b{color:var(--role-color,var(--blue))!important}.character-select .portrait{width:72px;height:105px}.character-card[data-character="ciccioalessi"] .card-copy strong{font-size:18px}.character-card[data-character="peppe"] .card-copy strong{font-size:20px}