*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#f7fbff;--bg2:#eef6ff;--text:#1f2937;--muted:#6b7280;--chip:#f8fbff;--chipBorder:#e6eef8}
html,body{width:100%;max-width:100%;overflow-x:hidden;overflow-y:auto}
body,button{font-family:'Arimo',Arial,sans-serif}
body{background:#dff3ff;min-height:100vh;color:#111827;padding:8px}
.app,.framedScreen{width:100%;max-width:510px;margin:0 auto;background:transparent}
.panel{width:100%;max-width:510px;background-image:url('back.png')!important;background-position:center center!important;background-size:cover!important;background-repeat:no-repeat!important;background-color:#dff3ff;backdrop-filter:blur(.5px);-webkit-backdrop-filter:blur(.5px);padding:12px 10px 10px;border-radius:24px;box-shadow:0 14px 30px rgba(16,24,40,.10),0 0 0 1px rgba(255,255,255,.45),inset 0 1px 0 rgba(255,255,255,.55);min-height:660px;display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.55);position:relative;overflow:visible}
.panel:before{content:"";position:absolute;inset:5px;border-radius:18px;border:1px solid rgba(255,255,255,.42);pointer-events:none}
.hidden{display:none!important}.center{text-align:center}
.corner-btn{position:fixed;top:10px;z-index:40;width:38px;height:38px;border:1px solid rgba(255,255,255,.65);border-radius:50%;display:block;padding:0;cursor:pointer;color:#17366f;background:linear-gradient(180deg,#fffefa,#fff4e7);box-shadow:0 3px 0 rgba(207,185,162,.45),0 7px 12px rgba(38,32,120,.12),inset 0 2px 0 #fff;overflow:hidden}
.games-hub-corner-btn{top:20px;left:max(20px,calc(50% - 245px));font-size:0;line-height:0}
.corner-btn:hover{filter:brightness(1.03)}
.title{display:flex;justify-content:center;align-items:center;margin-top:12px;margin-bottom:4px}.title img{width:min(68%,390px);height:auto;display:block}
.heroChoices{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:nowrap;margin:auto auto 12px;padding-top:24px}
.heroChoice{width:118px;height:118px;display:flex;align-items:center;justify-content:center;background:#fff;border:2px solid #e5edf7;border-radius:22px;box-shadow:0 10px 22px rgba(15,23,42,.08);overflow:hidden}
.heroChoice img{width:108%;height:108%;object-fit:contain;display:block;filter:drop-shadow(0 8px 12px rgba(15,23,42,.16))}
.subtitle{text-align:center;color:#111827;margin-bottom:18px;font-size:1em;font-weight:800}
.startHint{display:flex;justify-content:center;align-items:center;gap:10px;color:#111827;font-weight:900;margin-bottom:18px;font-size:1.02em}
.startHint .arrow{color:#ef4444}
.buttonRow,.actions,.modal-buttons,.option-buttons{display:flex;justify-content:center;gap:12px;flex-wrap:nowrap}
.modeButtons{display:flex;flex-direction:column;align-items:center;gap:12px}
.modeButtons .buttonRow{width:100%}
.onlineBtn{min-width:250px;width:auto}
.twoLine{display:inline-block;line-height:1.12}
.btn,.small-btn{color:#fff;border:none;cursor:pointer;font-weight:800;transition:.22s;background:linear-gradient(180deg,#57adff,#2b88f7 62%,#1b6edc);box-shadow:0 6px 0 #1a63c1,0 14px 26px rgba(43,136,247,.18),inset 0 1px 0 rgba(255,255,255,.45)}
.btn{min-width:150px;padding:12px 20px;font-size:1em;border-radius:18px}
.small-btn{min-width:104px;padding:10px 13px;border-radius:16px;font-size:.88em}
.btn.red,.small-btn.red{background:linear-gradient(180deg,#ff7474,#ff4545 62%,#e92b2b);box-shadow:0 6px 0 #c71f1f,0 14px 26px rgba(255,69,69,.16),inset 0 1px 0 rgba(255,255,255,.4)}
.btn:hover,.small-btn:hover{transform:translateY(-2px)}
.btn:active,.small-btn:active{transform:translateY(3px)}
.btn.online{background:linear-gradient(180deg,#34d399 0%,#10b981 62%,#059669 100%);box-shadow:0 6px 0 #047857,0 14px 26px rgba(16,185,129,.18),inset 0 1px 0 rgba(255,255,255,.45);min-width:160px}
.btn.green{background:linear-gradient(180deg,#4ade80,#22c55e 62%,#16a34a);box-shadow:0 6px 0 #15803d,0 14px 26px rgba(34,197,94,.18),inset 0 1px 0 rgba(255,255,255,.45)}
.btn.gray{background:linear-gradient(180deg,#9ca3af,#6b7280 62%,#4b5563);box-shadow:0 6px 0 #374151,0 14px 26px rgba(107,114,128,.18),inset 0 1px 0 rgba(255,255,255,.45)}
.btn:disabled,.small-btn:disabled{opacity:.55;cursor:not-allowed;transform:none;pointer-events:none}
.openSettings{margin:12px 0 0;padding-top:10px;border-top:1px dashed #dbe7f5}
.option-section{margin:12px 0}
.option-section h2{color:#111827;font-size:1.02em;margin-bottom:8px;text-align:center;font-weight:800}
.option-btn{background:#fff;border:2px solid #e7eef8;color:#334155;padding:9px 13px;border-radius:14px;cursor:pointer;font-size:.87em;font-weight:800;box-shadow:0 6px 14px rgba(15,23,42,.04);min-width:100px}
.option-btn.selected{background:linear-gradient(180deg,#57adff,#2b88f7 62%,#1b6edc);color:#fff;border-color:#2b88f7}
.gameArea{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:10px}
.roundTitle{margin-top:18px;font-size:1.45em;font-weight:900;color:#111827}
.roundTitle.round-urgent{color:#dc2626;animation:roundUrgentPulse .8s ease-in-out infinite}
@keyframes roundUrgentPulse{0%,100%{opacity:1}50%{opacity:.72}}
.battle{width:100%;max-width:660px;display:grid;grid-template-columns:1fr 68px 1fr;gap:8px;align-items:center;margin-top:12px}
.playerCard{background:linear-gradient(180deg,#fff,#f8fbff);border:1px solid #dfeafb;border-radius:24px;padding:10px 10px 10px;box-shadow:0 12px 26px rgba(15,23,42,.08);min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;overflow:visible}
.playerName{font-size:1.12em;font-weight:900;color:#111827;margin:2px 0 6px;order:1}
.choiceBig{order:2;width:100%;height:250px;min-height:250px;line-height:1;display:flex;align-items:center;justify-content:center;padding:4px;filter:drop-shadow(0 10px 14px rgba(15,23,42,.16));overflow:visible}
.choiceBig img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center center;display:block}
.choiceBig.shuffling img{animation:shufflePulse .18s ease-in-out infinite alternate}
@keyframes shufflePulse{from{transform:scale(.96) rotate(-2deg)}to{transform:scale(1.04) rotate(2deg)}}
.choicePlaceholder{font-size:5em;line-height:1;color:#94a3b8}
.choiceLock{font-size:4.2em;line-height:1;color:#64748b}
.choiceLabel{display:none!important}
.vs{font-size:2.1em;font-weight:900;color:#ef4444;text-shadow:0 6px 14px rgba(239,68,68,.14);display:flex;align-items:center;justify-content:center}
.choices{display:flex;justify-content:space-between;gap:8px;flex-wrap:nowrap;margin:12px auto 10px;width:calc(100% - 8px);max-width:540px}
.choiceBtn{width:calc((100% - 16px)/3);height:auto;aspect-ratio:1/1;background:#fff;border:2px solid #e5edf7;border-radius:22px;padding:4px;cursor:pointer;transition:.2s;box-shadow:0 10px 22px rgba(15,23,42,.07);font-size:0;overflow:hidden}
.choiceBtn:hover{transform:translateY(-3px);border-color:#93c5fd}
.choiceBtn .choiceIcon{display:block;width:100%;height:100%;object-fit:contain;margin:0;transform:scale(1.08)}
.choiceBtn:disabled{opacity:.5;cursor:default;transform:none}
.message{margin-top:22px;min-height:42px;font-size:1.45em;font-weight:900}
.message.win{color:#16a34a}.message.lose{color:#dc2626}.message.tie{color:#d97706}
.nextRoundWrap{display:flex;justify-content:center;min-height:58px;margin-top:8px}
.nextRoundWrap.hidden{display:none}
.roundResult{display:none;width:100%;max-width:470px;margin:10px auto 0;padding:28px 22px 24px;border-radius:28px;background:linear-gradient(180deg,#fff,#fbfdff);border:1px solid #dfeafb;box-shadow:0 18px 42px rgba(15,23,42,.15),inset 0 1px 0 rgba(255,255,255,.9);animation:resultPop .35s cubic-bezier(.68,-.55,.265,1.55)}
.roundResult.show{display:block}
.roundResult h2{font-size:1.9em;margin-bottom:12px;font-weight:900;background:linear-gradient(135deg,#ef4444,#3b82f6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.roundResult p{font-size:1.05em;color:#64748b;font-weight:800;margin-bottom:18px}
.roundResult.tie h2{background:linear-gradient(135deg,#f59e0b,#f97316);-webkit-background-clip:text;background-clip:text}
.roundResult.win1 h2{background:linear-gradient(135deg,#16a34a,#2563eb);-webkit-background-clip:text;background-clip:text}
.roundResult.win2 h2{background:linear-gradient(135deg,#ef4444,#7c3aed);-webkit-background-clip:text;background-clip:text}
.roundResult h2 .result-emoji,.winFinal h2 .result-emoji{-webkit-text-fill-color:initial;background:none;background-clip:unset;-webkit-background-clip:unset}
@keyframes resultPop{0%{transform:scale(.82);opacity:0}100%{transform:scale(1);opacity:1}}
.hud{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-top:12px;margin-bottom:8px;width:100%;max-width:470px;margin-left:auto;margin-right:auto}
.hud-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%}
.scoreMini,.badge{background:linear-gradient(180deg,#fff,var(--chip));border:1px solid var(--chipBorder);box-shadow:0 8px 18px rgba(15,23,42,.06)}
.scoreMini{min-width:0;border-radius:16px;padding:9px 10px;display:flex;gap:6px;justify-content:center;align-items:center}
.scoreMini .label{font-weight:900;color:#111827}
.scoreMini .value{font-size:1.15em;font-weight:900}
.scoreMini.one .value{color:#2563eb}
.scoreMini.two .value{color:#ef4444}
.scoreMini.tie .value{color:#f59e0b}
.scoreMini.timer .value{color:#0f766e;font-variant-numeric:tabular-nums;min-width:1.2em;text-align:center}
.scoreMini.timer.round-urgent .value{color:#dc2626}
.scoreMini.timer.round-urgent{animation:roundUrgentPulse .8s ease-in-out infinite}
.scoreMini.target .value{color:#2563eb}
.badge{border-radius:999px;padding:10px 16px;font-size:.95em;font-weight:900;color:#111827}
.scoreMini.settings-chip{cursor:pointer;border:none;font-family:inherit;color:#111827}
.scoreMini.settings-chip.hidden{display:flex!important;visibility:hidden;pointer-events:none}
/* במצב מקומי/מול מחשב: מסתירים את מלבן הזמן אבל שומרים את מקום העמודה כדי ש"משחק עד" יישאר באותו רוחב ובמרכז */
#gameScreen:not(.online-active) #roundTimerChip{
  visibility:hidden;
  pointer-events:none;
}
.badge.settings-chip{cursor:pointer;border:none;font-family:inherit}
.bottom{margin-top:auto;padding-top:14px;width:100%}
.actions{width:100%;margin-bottom:10px;gap:8px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;justify-content:center;align-items:center;z-index:1000;padding:20px}
.modal.show{display:flex}
.modal-content{background:linear-gradient(180deg,#fff,#fbfdff);padding:34px 28px;border-radius:30px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.22);max-width:430px;width:100%}
.modal h2{font-size:2em;margin-bottom:22px;font-weight:900;background:linear-gradient(135deg,#ef4444,#3b82f6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.winFinal .modal-content{background:radial-gradient(circle at top,#fff7d6 0,#fff 46%,#f4f8ff 100%);border:3px solid #fbbf24;box-shadow:0 24px 75px rgba(245,158,11,.32),0 0 0 8px rgba(255,255,255,.65)}
.winFinal h2{font-size:2.35em;background:linear-gradient(135deg,#f59e0b,#ef4444 48%,#7c3aed);-webkit-background-clip:text;background-clip:text}
.finalCup{font-size:4.3em;line-height:1;margin-bottom:12px;filter:drop-shadow(0 10px 14px rgba(245,158,11,.28))}
.finalScore{font-size:1.18em;font-weight:900;color:#475569;margin:-4px 0 22px}
.secretBox{font-size:1.05em;line-height:1.6;color:#475569;margin-bottom:18px}
.readyBtn{margin-top:14px}
#ad-loading{display:none;position:fixed;inset:0;z-index:2500;background:rgba(15,23,42,.88);backdrop-filter:blur(4px);flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;text-align:center}
#ad-loading.show{display:flex}
#ad-loading .ad-loading-title{color:#fff;font-size:clamp(1.35rem,4.5vw,1.85rem);font-weight:900;line-height:1.35;margin:0;max-width:18em}
#ad-loading .ad-loading-timer{color:#93c5fd;font-size:clamp(2.4rem,10vw,3.4rem);font-weight:900;margin:0;letter-spacing:.02em;font-variant-numeric:tabular-nums;min-width:1.4em}
#ad-loading.waiting-others .ad-loading-timer{color:#bfdbfe;font-size:clamp(1.8rem,7vw,2.6rem)}
#ad-loading p{color:#fff;font-weight:800;margin:0}
.ad-ring{width:54px;height:54px;border:5px solid rgba(147,197,253,.32);border-top-color:#3b82f6;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Online mode */
#onlineModalTitle{background:none;-webkit-background-clip:unset;-webkit-text-fill-color:initial;background-clip:unset;color:#1f2937}
#onlineModalTitle .modal-title-text{background:linear-gradient(135deg,#ef4444,#3b82f6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;white-space:nowrap}
#onlineRoomModal.host-lobby .modal-content,#onlineRoomModal .modal-content{max-width:420px}
#onlineRoomModal .modal h2{margin-bottom:6px;font-size:1.55em}
.onlineStatus{font-size:.95em;color:var(--muted);margin-bottom:12px;line-height:1.5}
.onlineSymbolLine{font-size:1em;font-weight:800;color:#1d4ed8;margin:-4px 0 12px}
.onlineSymbolLine.hidden{display:none}
.roomShareBox{margin:10px 0 6px;padding:12px 14px;background:#f0fdf4;border:2px solid #bbf7d0;border-radius:16px}
.roomCodeLabel{font-size:1.08em;color:#166534;font-weight:900;margin-bottom:10px;text-align:center}
.roomLinkRow{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.roomLinkInput{flex:1 1 100%;min-width:0;padding:9px 10px;border:2px solid #d1fae5;border-radius:12px;font-size:.78em;direction:ltr;text-align:left;background:#fff;color:#334155}
.onlineWaiting{display:flex;flex-direction:column;align-items:center;gap:12px;margin:16px 0;color:#166534;font-weight:800}
.onlineLobbyTarget{margin-top:12px;padding-top:12px;border-top:1px solid #e6eef8}
.onlineLobbyTarget h2{font-size:1.05em;margin-bottom:10px;text-align:center;color:#1f2937}
.onlineLobbyTarget.hidden{display:none}
#gameScreen.online-active .actions{display:none!important}
.gameArea.waiting-mode{opacity:.55;pointer-events:none;filter:grayscale(.1)}
.online-settings-panel{position:fixed;inset:0;z-index:1200;display:flex;align-items:flex-end;justify-content:center}
.online-settings-panel.hidden{display:none}
.online-settings-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.45)}
.online-settings-content{position:relative;z-index:1;width:min(420px,94vw);background:#fff;border-radius:24px 24px 0 0;padding:20px 18px 24px;box-shadow:0 -10px 40px rgba(15,23,42,.18)}
.online-settings-content h3{text-align:center;margin-bottom:14px;font-size:1.2em}
.settings-actions{display:flex;flex-direction:column;gap:10px;margin:14px 0}
.wait-anim{width:190px;margin:auto}
.wait-anim .line{position:relative;height:28px}
.wait-anim .line i{position:absolute;top:50%;z-index:3;width:18px;height:18px;border-radius:50%;transform:translateY(-50%)}
.wait-anim .p2{left:0;background:#b7c2d8}
.wait-anim .me{right:0;background:#28b86f;box-shadow:0 0 0 4px rgba(40,184,111,.2)}
.wait-anim .rail{position:absolute;left:9px;right:9px;top:50%;height:10px;overflow:hidden;border-radius:10px;transform:translateY(-50%);background:repeating-linear-gradient(90deg,rgba(255,255,255,.32) 0 18px,transparent 18px 36px),#d8e1ef}
.wait-anim .signal{position:absolute;top:0;left:-50px;width:50px;height:100%;border-radius:10px;background:#4f87ff;animation:wait-connect 1.6s linear infinite}
.wait-anim small{display:flex;justify-content:space-between;margin-top:3px;color:#8790a2;font-size:14px;direction:ltr}
.wait-anim em{min-width:55px;font-style:normal}
.wait-anim em:first-child{text-align:left;transform:translateX(-18px)}
.wait-anim em:last-child{text-align:right;transform:translateX(18px)}
@keyframes wait-connect{from{left:-50px}to{left:100%}}

.room-notice-modal{z-index:1300}
.room-notice-content{max-width:min(400px,calc(100vw - 32px));padding:30px 24px 26px}
.room-notice-content h2{font-size:1.65em;margin-bottom:10px}
.room-notice-message{font-size:1.05em;color:#475569;font-weight:800;line-height:1.55;margin:0 0 20px}
.room-notice-modal .modal-buttons{margin-top:4px}
.room-notice-modal .btn{min-width:140px}

@media(max-width:520px){.room-notice-content{padding:24px 18px 20px}.room-notice-content h2{font-size:1.4em}.room-notice-message{font-size:.95em}}

@media(max-width:700px){.panel{min-height:640px}.title img{width:min(84%,390px)}.heroChoices{gap:10px}.heroChoice{width:108px;height:108px}.battle{grid-template-columns:1fr 48px 1fr;gap:6px}.playerCard{min-height:236px;padding:7px 8px 10px}.choiceBig{height:180px;min-height:180px}.choicePlaceholder{font-size:4em}.choiceLock{font-size:3.4em}.choices{width:100%;max-width:none;gap:6px}.choiceBtn{width:calc((100% - 12px)/3);height:auto;aspect-ratio:1/1}}
@media(max-width:520px){body{padding:0;background-size:cover;background-position:center top}.app,.framedScreen{max-width:100%}.title{margin-top:8px}.title img{width:min(90%,360px)}.subtitle,.startHint,.option-section h2,.roundTitle,.playerName,.badge,.scoreMini .label{color:#050505}.heroChoices{gap:8px;margin:8px auto 8px;padding-top:0}.heroChoice{width:102px;height:102px;border-radius:18px}.panel{min-height:100vh;border-radius:0;padding:10px 8px;background-size:cover!important}.buttonRow .btn,.actions .small-btn,.modal-buttons .btn,.modal-buttons .small-btn{flex:1 1 0;min-width:0}.modeButtons .buttonRow{gap:8px}.onlineBtn{width:auto;min-width:220px;max-width:84%}.battle{grid-template-columns:1fr 28px 1fr;margin-top:18px}.vs{font-size:1.12em}.playerCard{min-height:212px;border-radius:18px;padding:5px 5px 9px}.playerName{font-size:.98em}.choiceBig{height:164px;min-height:164px}.choiceBig img{transform:scale(1.1)}.choicePlaceholder{font-size:3.2em}.choiceLock{font-size:2.9em}.choices{width:100%;max-width:none;gap:5px;margin-top:12px}.choiceBtn{width:calc((100% - 10px)/3);min-width:0;aspect-ratio:1/1;height:auto;padding:2px}.choiceBtn .choiceIcon{transform:scale(1.16)}.message{font-size:1.18em}.scoreMini{min-width:0;padding:8px 6px;font-size:.92em;gap:4px}.actions{gap:5px}.actions .small-btn{font-size:.72em;padding:8px 4px;min-width:0;border-radius:13px;box-shadow:0 4px 0 #1a63c1,0 9px 16px rgba(43,136,247,.16)}.actions .small-btn.red{box-shadow:0 4px 0 #c71f1f,0 9px 16px rgba(255,69,69,.14)}.gameArea.resultMode .roundTitle{margin-top:3px;margin-bottom:0;font-size:1.25em;line-height:1.1}.gameArea.resultMode .battle{margin-top:5px}.gameArea.resultMode .roundResult{margin-top:25px;padding-top:20px}.gameArea.resultMode .roundResult h2{font-size:1.42em;line-height:1.12;white-space:nowrap;margin-bottom:9px}.gameArea.resultMode .roundResult p{margin-bottom:13px}#onlineRoomModal .modal h2{font-size:1.35em}#onlineRoomModal .onlineStatus{font-size:.88em}}
@media(min-width:701px){html,body{min-height:100%;overflow-x:hidden;overflow-y:auto!important}body{padding:8px 0;margin:0;background:#dff3ff}.app,.framedScreen{width:100%;max-width:510px;min-height:calc(100vh - 16px);background:transparent}.panel{width:100%;max-width:510px;min-height:calc(100vh - 16px);border-radius:24px;background-image:url('back.png')!important;background-position:center top!important;background-size:cover!important;background-repeat:no-repeat!important;padding-top:8px}.panel:before{inset:4px}.gameArea{min-height:calc(100vh - 40px);height:auto}.title{margin-top:4px}.title img{width:min(78%,350px)}.heroChoice{width:112px;height:112px}.choiceBtn{width:calc((100% - 16px)/3);height:auto;aspect-ratio:1/1}.battle{max-width:480px;grid-template-columns:1fr 40px 1fr}.playerCard{min-height:252px}.choiceBig{height:205px;min-height:205px}.openSettings{margin-top:24px}.small-btn{min-width:98px;padding:9px 11px;font-size:.84em}}