*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:Arial,sans-serif;background:#e9f8f6}body{position:fixed;inset:0;touch-action:none}canvas{position:absolute;inset:0;width:100%;height:100%;display:block;background:#e9f8f6}.screen{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:rgba(246,255,254,.97);padding:18px}.card{width:min(720px,94vw);max-height:90vh;overflow:auto;background:#fff;border-radius:24px;padding:24px;box-shadow:0 18px 60px rgba(0,70,75,.15);text-align:center}h1{margin:0 0 8px;color:#0a7d81;font-size:clamp(30px,6vw,52px)}h2{margin:6px 0;color:#0a7d81}p{color:#445;line-height:1.4}.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}button{border:0;border-radius:16px;padding:15px 18px;font-weight:800;font-size:18px;background:#0b9ba0;color:#fff;touch-action:manipulation}button.alt{background:#136f74}button.ghost{background:#e6f4f3;color:#0b6f73}.small{font-size:13px;color:#667}#rotate{display:none;position:fixed;inset:0;z-index:2000;background:#f6fffe;align-items:center;justify-content:center;text-align:center;padding:32px;color:#0b6f73;font-weight:800;font-size:22px}#hud{position:fixed;z-index:30;top:max(8px,env(safe-area-inset-top));left:12px;right:12px;display:none;justify-content:space-between;align-items:center;color:#075e63;font-weight:800;font-size:14px;pointer-events:none;text-shadow:0 1px 0 #fff}#hudCenter{position:absolute;left:50%;transform:translateX(-50%);text-align:center}#who .player-name{font-weight:900;text-shadow:0 1px 0 #fff,0 0 1px currentColor}#who .player-name.george{color:#2f73b9}#who .player-name.ilias{color:#8d5bb7}
#rings{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.hud-ring-icon{position:relative;display:inline-block;width:18px;height:18px;border:4px solid #f1a900;border-radius:50%;box-shadow:none;vertical-align:middle;flex:0 0 auto}
.hud-ring-icon::before{content:'';position:absolute;left:50%;top:-9px;transform:translateX(-50%);width:8px;height:5px;background:#fff8c9;border:2px solid #f6bd22;box-sizing:border-box}
.hud-ring-icon::after{content:none;display:none}
#message{position:fixed;z-index:40;top:max(45px,calc(env(safe-area-inset-top) + 38px));left:50%;transform:translateX(-50%);background:rgba(255,255,255,.95);padding:8px 14px;border-radius:13px;color:#075e63;font-weight:800;display:none;max-width:80vw;text-align:center}#controls{position:fixed;z-index:50;left:0;right:0;bottom:max(10px,env(safe-area-inset-bottom));display:none;justify-content:space-between;padding:0 max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left));pointer-events:none}.group{display:flex;gap:10px;pointer-events:auto}.ctrl{width:64px;height:64px;border-radius:50%;padding:0;font-size:28px;background:rgba(5,104,110,.88);box-shadow:0 4px 14px rgba(0,0,0,.15);touch-action:none}#levelBanner{position:fixed;z-index:60;left:50%;top:22%;transform:translateX(-50%);background:rgba(255,255,255,.96);padding:16px 24px;border-radius:18px;color:#0a7378;font-size:28px;font-weight:900;display:none;text-align:center}#resultStats{font-size:20px;font-weight:800;color:#0a7378;line-height:1.6}
.start-card{width:min(760px,96vw)}
.character-grid{align-items:stretch;gap:18px}
.character-choice{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:7px;min-height:250px;padding:14px 16px 16px;overflow:hidden;border:3px solid transparent;transition:transform .12s ease,border-color .12s ease,filter .12s ease}
.character-choice:active{transform:scale(.98)}
.character-choice:focus-visible{outline:3px solid #f3b11a;outline-offset:3px}
.sprite-stage{display:flex;align-items:flex-end;justify-content:center;width:100%;height:160px;border-radius:14px;background:rgba(255,255,255,.15);overflow:hidden}
.sprite-stage img{display:block;max-width:100%;height:150px;width:auto;object-fit:contain;image-rendering:pixelated;image-rendering:crisp-edges}
.character-name{font-size:24px;line-height:1;font-weight:900}
.play-label{font-size:14px;font-weight:700;opacity:.95}
@media (hover:hover){.character-choice:hover{transform:translateY(-3px);filter:brightness(1.05);border-color:rgba(255,255,255,.55)}}
@media (orientation:portrait) and (max-width:900px){#rotate{display:flex}}@media (orientation:landscape) and (max-height:500px){.card{padding:16px}.grid{margin-top:10px}button{padding:11px;font-size:15px}.ctrl{width:62px;height:62px;font-size:30px}h1{font-size:30px}p{margin:8px 0}.character-choice{min-height:185px;padding:8px 12px}.sprite-stage{height:110px}.sprite-stage img{height:105px}.character-name{font-size:20px}.play-label{font-size:12px}}

/* V7.8B personalised intro — larger mobile groom previews */
.start-card{width:min(820px,96vw);overflow:hidden}
.start-copy{margin:6px auto 10px;max-width:720px;font-size:16px;line-height:1.35;color:#3f4b50}
.rules-title{margin:8px 0 6px;color:#0a7d81;font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}
.rules-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 auto 12px;max-width:720px}
.rule-chip{background:#eef8f7;border:1px solid #c9e7e5;border-radius:12px;padding:8px 10px;color:#31555a;font-size:13px;line-height:1.25;font-weight:700}
.rule-chip b{display:block;color:#087f83;font-size:14px;margin-bottom:2px}
.start-card .character-grid{margin-top:8px}
.start-card .character-choice{min-height:220px}
.start-card .sprite-stage{height:132px}
.start-card .sprite-stage img{height:126px}
.start-card .small{margin:8px 0 0}

@media (orientation:landscape) and (max-height:500px){
  #start{padding:6px max(8px,env(safe-area-inset-right)) 6px max(8px,env(safe-area-inset-left))}
  #start .start-card{width:min(900px,98vw);height:calc(100dvh - 12px);max-height:none;padding:8px 12px;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
  #start h1{font-size:25px;line-height:1;margin:0 0 1px}
  #start h2{font-size:16px;line-height:1.1;margin:1px 0 3px}
  #start .start-copy{font-size:12px;line-height:1.22;margin:2px auto 4px;max-width:780px}
  #start .rules-title{font-size:10px;margin:2px 0 3px;letter-spacing:.04em}
  #start .rules-row{grid-template-columns:repeat(3,1fr);gap:5px;margin:0 auto 5px;max-width:780px;width:100%}
  #start .rule-chip{padding:4px 6px;border-radius:8px;font-size:10px;line-height:1.08}
  #start .rule-chip b{font-size:10.5px;margin-bottom:1px}
  #start .character-grid{grid-template-columns:1fr 1fr;gap:8px;margin-top:2px;min-height:0}
  #start .character-choice{min-height:145px;height:145px;padding:4px 8px 6px;gap:2px;border-width:2px;border-radius:12px}
  #start .sprite-stage{height:106px;min-height:106px;border-radius:8px}
  #start .sprite-stage img{height:103px;max-height:103px}
  #start .character-name{font-size:16px;line-height:1}
  #start .play-label{font-size:10px;line-height:1}
  #start .small{font-size:9px;margin:4px 0 0;line-height:1}
}

@media (orientation:landscape) and (max-height:390px){
  #start .start-card{padding:5px 10px}
  #start h1{font-size:22px}
  #start h2{font-size:14px}
  #start .start-copy{font-size:10.5px;margin:1px auto 3px}
  #start .rules-title{display:none}
  #start .rules-row{margin-bottom:3px;gap:4px}
  #start .rule-chip{font-size:9px;padding:3px 5px}
  #start .rule-chip b{font-size:9.5px}
  #start .character-choice{height:125px;min-height:125px}
  #start .sprite-stage{height:92px;min-height:92px}
  #start .sprite-stage img{height:89px;max-height:89px}
  #start .small{display:none}
}


/* V7.8C: restore large, visual groom-first intro; scrolling is allowed on short landscape phones */
#start{overflow-y:auto;overflow-x:hidden}
#start .start-card{width:min(900px,96vw);max-height:none;overflow:visible}
#start .character-grid{grid-template-columns:repeat(2,minmax(220px,320px));justify-content:center;gap:18px;margin:10px auto 12px}
#start .character-choice{min-height:300px;padding:10px 14px 14px;gap:7px}
#start .sprite-stage{height:225px;min-height:225px}
#start .sprite-stage img{height:215px;max-height:215px}
#start .character-name{font-size:25px}
#start .play-label{font-size:14px}
#start .rules-title{margin-top:4px}
#start .rules-row{margin-bottom:8px}

@media (orientation:landscape) and (max-height:500px){
  #start{padding:6px max(10px,env(safe-area-inset-right)) 18px max(10px,env(safe-area-inset-left));align-items:flex-start;justify-content:center}
  #start .start-card{width:min(900px,97vw);height:auto;min-height:0;max-height:none;overflow:visible;margin:4px auto 18px;padding:10px 14px 12px;display:block}
  #start h1{font-size:26px;line-height:1.02;margin:0 0 1px}
  #start h2{font-size:17px;line-height:1.08;margin:1px 0 3px}
  #start .start-copy{font-size:12.5px;line-height:1.24;margin:4px auto 6px;max-width:790px}
  #start .character-grid{grid-template-columns:repeat(2,minmax(210px,300px));justify-content:center;gap:12px;margin:7px auto 8px}
  #start .character-choice{height:224px;min-height:224px;padding:6px 10px 9px;gap:4px;border-width:2px;border-radius:13px}
  #start .sprite-stage{height:174px;min-height:174px;border-radius:10px}
  #start .sprite-stage img{height:168px;max-height:168px}
  #start .character-name{font-size:20px;line-height:1}
  #start .play-label{font-size:11px;line-height:1}
  #start .rules-title{display:block;font-size:11px;margin:5px 0 4px;letter-spacing:.05em}
  #start .rules-row{grid-template-columns:repeat(3,1fr);gap:6px;margin:0 auto 6px;max-width:790px;width:100%}
  #start .rule-chip{padding:5px 7px;border-radius:9px;font-size:10px;line-height:1.12}
  #start .rule-chip b{font-size:10.5px;margin-bottom:1px}
  #start .small{display:block;font-size:9.5px;margin:5px 0 0;line-height:1.1}
}

@media (orientation:landscape) and (max-height:390px){
  #start .start-card{padding:8px 12px 11px}
  #start h1{font-size:24px}
  #start h2{font-size:15px}
  #start .start-copy{font-size:11.5px;margin:3px auto 5px}
  #start .character-grid{margin:5px auto 7px;gap:10px}
  #start .character-choice{height:232px;min-height:232px}
  #start .sprite-stage{height:186px;min-height:186px}
  #start .sprite-stage img{height:180px;max-height:180px}
  #start .character-name{font-size:20px}
  #start .rules-row{gap:5px}
  #start .rule-chip{font-size:9.5px;padding:4px 6px}
  #start .rule-chip b{font-size:10px}
}



/* V7.9 premium wedding-game title screen — preserve V7.8C placement */
#start{
  background:
    radial-gradient(circle at 16% 18%,rgba(232,190,95,.17) 0 2px,transparent 3px),
    radial-gradient(circle at 84% 22%,rgba(11,155,160,.16) 0 2px,transparent 3px),
    radial-gradient(circle at 76% 78%,rgba(232,190,95,.13) 0 2px,transparent 3px),
    linear-gradient(145deg,#f9f3e8 0%,#f4fbf9 45%,#e8f6f4 100%);
}
#start::before,#start::after{
  content:"";position:fixed;pointer-events:none;z-index:0;opacity:.9;
}
#start::before{
  width:220px;height:220px;left:-95px;top:-95px;border:2px solid rgba(12,126,130,.16);border-radius:50%;
  box-shadow:0 0 0 18px rgba(12,126,130,.035),0 0 0 42px rgba(221,174,75,.025);
}
#start::after{
  width:180px;height:180px;right:-78px;bottom:-82px;border:2px solid rgba(221,174,75,.2);border-radius:50%;
  box-shadow:0 0 0 20px rgba(221,174,75,.04),0 0 0 46px rgba(12,126,130,.025);
}
#start .start-card{
  position:relative;z-index:1;
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,252,246,.97));
  border:1px solid rgba(209,164,73,.34);
  box-shadow:0 22px 70px rgba(17,78,80,.16),0 2px 0 rgba(255,255,255,.9) inset;
}
#start .start-card::before{
  content:"✦   💍   ✦";display:block;margin:-2px auto 5px;color:#b8892f;
  font-size:14px;letter-spacing:.18em;opacity:.86;
}
#start h1{
  margin:0;color:#557277;font-size:clamp(15px,2.4vw,20px);font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;
}
#start h2{
  position:relative;display:inline-block;margin:2px 0 7px;
  color:#087f83;font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(34px,6vw,54px);line-height:.95;font-weight:800;letter-spacing:-.035em;
  text-shadow:0 2px 0 #fff,0 5px 18px rgba(8,127,131,.12);
}
#start h2::after{
  content:"";display:block;width:70%;height:3px;margin:8px auto 0;border-radius:99px;
  background:linear-gradient(90deg,transparent,#d5a84a 25%,#0b9ba0 50%,#d5a84a 75%,transparent);
}
#start .start-copy{
  max-width:760px;margin:4px auto 10px;padding:9px 15px;
  border-radius:14px;background:linear-gradient(90deg,rgba(239,249,247,.72),rgba(255,248,235,.72));
  border:1px solid rgba(11,155,160,.12);color:#42565a;
}
#start .start-copy strong{color:#075f64;font-weight:900}

#start .character-choice{
  position:relative;background:linear-gradient(180deg,#fffdfa 0%,#f7fbfa 100%) !important;
  color:#075f64;border:2px solid rgba(11,155,160,.25) !important;
  box-shadow:0 10px 28px rgba(17,94,96,.11),0 2px 0 rgba(255,255,255,.95) inset;
  isolation:isolate;
}
#start .character-choice::before{
  content:"";position:absolute;inset:7px;border:1px solid rgba(210,164,72,.26);border-radius:11px;z-index:-1;pointer-events:none;
}
#start .character-choice::after{
  content:"CHOOSE";position:absolute;top:10px;right:12px;padding:4px 7px;border-radius:999px;
  color:#9b7429;background:#fff8e8;border:1px solid rgba(210,164,72,.35);
  font-size:9px;line-height:1;font-weight:900;letter-spacing:.12em;
}
#start .sprite-stage{
  position:relative;background:
    radial-gradient(circle at 50% 78%,rgba(11,155,160,.12),transparent 42%),
    linear-gradient(180deg,rgba(234,248,246,.42),rgba(255,249,238,.5));
  border:1px solid rgba(11,155,160,.12);
  box-shadow:inset 0 -12px 26px rgba(8,127,131,.035);
}
#start .sprite-stage::after{
  content:"";position:absolute;left:18%;right:18%;bottom:7px;height:8px;border-radius:50%;
  background:rgba(40,79,80,.12);filter:blur(3px);
}
#start .sprite-stage img{
  position:relative;z-index:1;transform-origin:50% 100%;
  animation:groomIdle 2.4s ease-in-out infinite;
  filter:drop-shadow(0 8px 7px rgba(28,67,68,.16));
}
#start #iliasBtn .sprite-stage img{animation-delay:-1.15s}
@keyframes groomIdle{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
#start .character-name{
  color:#075f64;text-shadow:0 1px 0 #fff;letter-spacing:.01em;
}
#start .play-label{
  display:inline-flex;align-items:center;justify-content:center;min-width:112px;
  padding:5px 10px;border-radius:999px;background:#0b8f94;color:#fff;opacity:1;
  box-shadow:0 4px 10px rgba(11,143,148,.2);font-weight:900;
}
@media (hover:hover){
  #start .character-choice:hover{
    transform:translateY(-5px);filter:none;border-color:#d2a448 !important;
    box-shadow:0 17px 36px rgba(17,94,96,.17),0 0 0 3px rgba(210,164,72,.10);
  }
  #start .character-choice:hover .sprite-stage img{transform:translateY(-5px) scale(1.025)}
}
#start .character-choice:active{transform:translateY(-1px) scale(.985)}

#start .rules-title{
  display:inline-flex;align-items:center;gap:8px;margin:7px 0 7px;color:#6c6660;
  font-size:12px;letter-spacing:.14em;
}
#start .rules-title::before,#start .rules-title::after{content:"";width:34px;height:1px;background:#d7b56d}
#start .rules-row{gap:9px}
#start .rule-chip{
  position:relative;overflow:hidden;text-align:left;
  background:linear-gradient(145deg,#f9fcfb,#f9f3e7);border:1px solid rgba(11,155,160,.15);
  border-radius:14px;padding:10px 11px 10px 13px;color:#46595c;
  box-shadow:0 5px 14px rgba(21,86,88,.06);
}
#start .rule-chip::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(#0b9ba0,#d4a448)}
#start .rule-chip b{color:#087f83;font-size:13.5px;letter-spacing:.005em}
#start .rule-chip strong{color:#a36f15}
#start .small{
  display:inline-block;margin-top:6px;padding:5px 12px;border-radius:999px;
  background:rgba(235,247,245,.72);border:1px solid rgba(11,155,160,.11);color:#557075;font-weight:800;
}

@media (orientation:landscape) and (max-height:500px){
  #start .start-card::before{font-size:10px;margin:-1px auto 3px}
  #start h1{font-size:12px;letter-spacing:.15em}
  #start h2{font-size:34px;margin:1px 0 4px}
  #start h2::after{height:2px;margin-top:5px}
  #start .start-copy{padding:6px 10px;border-radius:10px}
  #start .character-choice::after{top:7px;right:8px;font-size:7px;padding:3px 5px}
  #start .character-choice::before{inset:5px;border-radius:9px}
  #start .play-label{min-width:92px;padding:4px 8px}
  #start .rules-title::before,#start .rules-title::after{width:22px}
  #start .rule-chip{text-align:left;padding:6px 7px 6px 9px}
  #start .small{padding:4px 9px}
}



/* V8.0 COLOR PASS — CSS ONLY. Preserve V7.9 layout and all game logic. */
#start{
  background:
    radial-gradient(circle at 10% 16%,rgba(255,151,122,.32) 0 7%,transparent 22%),
    radial-gradient(circle at 91% 18%,rgba(94,190,210,.32) 0 8%,transparent 24%),
    radial-gradient(circle at 15% 88%,rgba(247,198,84,.30) 0 8%,transparent 24%),
    radial-gradient(circle at 88% 84%,rgba(159,133,214,.22) 0 8%,transparent 25%),
    radial-gradient(circle at 52% 2%,rgba(80,188,160,.20) 0 10%,transparent 28%),
    linear-gradient(145deg,#fff0df 0%,#f8f2ff 28%,#eaf9f7 55%,#e9f6ff 78%,#fff2df 100%);
}
#start::before{
  width:245px;height:245px;left:-98px;top:-105px;
  border:3px solid rgba(14,148,151,.23);
  box-shadow:0 0 0 18px rgba(255,175,107,.09),0 0 0 42px rgba(97,181,205,.07),0 0 0 66px rgba(231,183,69,.045);
}
#start::after{
  width:205px;height:205px;right:-80px;bottom:-90px;
  border:3px solid rgba(217,159,54,.28);
  box-shadow:0 0 0 20px rgba(147,118,206,.07),0 0 0 45px rgba(26,158,157,.055),0 0 0 70px rgba(255,148,119,.04);
}
#start .start-card{
  background:linear-gradient(180deg,rgba(255,255,255,.965),rgba(255,250,244,.95));
  border:1px solid rgba(198,145,47,.42);
  box-shadow:0 24px 74px rgba(29,91,101,.19),0 2px 0 rgba(255,255,255,.95) inset;
}
#start .start-card::before{
  content:"✦   💍   ♥   💍   ✦";
  color:#bf8220;
  text-shadow:0 1px 0 #fff,0 0 12px rgba(244,181,66,.26);
}
#start h1{color:#526c79}
#start h2{
  color:#087f83;
  background:linear-gradient(90deg,#078b8f 0%,#15a49d 34%,#d1952a 68%,#d87360 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
#start h2::after{background:linear-gradient(90deg,transparent,#58b7c6,#d8a33a,#df826e,transparent)}
#start .start-copy{
  background:linear-gradient(100deg,rgba(233,249,247,.92),rgba(255,243,225,.94),rgba(242,236,255,.88));
  border-color:rgba(53,157,162,.20);
  box-shadow:0 6px 16px rgba(44,106,110,.075);
}
#start .start-copy strong{color:#097f83}
#start .character-choice:nth-child(1){
  background:linear-gradient(160deg,#e8f7ff 0%,#f0fbf8 53%,#fff0dc 100%) !important;
  border-color:#79bccc !important;
  box-shadow:0 14px 30px rgba(59,135,153,.16),0 0 0 1px rgba(255,255,255,.9) inset;
}
#start .character-choice:nth-child(2){
  background:linear-gradient(160deg,#f1edff 0%,#fff0e7 53%,#edf9ef 100%) !important;
  border-color:#c59ac8 !important;
  box-shadow:0 14px 30px rgba(137,97,150,.14),0 0 0 1px rgba(255,255,255,.9) inset;
}
#start .character-choice:nth-child(1)::before{border-color:rgba(49,157,176,.26)}
#start .character-choice:nth-child(2)::before{border-color:rgba(183,110,158,.23)}
#start .character-choice:nth-child(1)::after{background:#5caec0;color:#fff;border-color:rgba(255,255,255,.7)}
#start .character-choice:nth-child(2)::after{background:#b578aa;color:#fff;border-color:rgba(255,255,255,.7)}
#start .character-choice:nth-child(1) .sprite-stage{
  background:radial-gradient(circle at 50% 78%,rgba(255,201,116,.30),transparent 39%),linear-gradient(180deg,#dff4fb,#f8fffd 66%,#fcebd0);
}
#start .character-choice:nth-child(2) .sprite-stage{
  background:radial-gradient(circle at 50% 78%,rgba(106,194,160,.25),transparent 39%),linear-gradient(180deg,#eee8ff,#fff7f1 66%,#e8f6e8);
}
#start .character-choice:nth-child(1) .character-name{color:#207f97}
#start .character-choice:nth-child(2) .character-name{color:#8b5b89}
#start .character-choice:nth-child(1) .play-label{background:linear-gradient(90deg,#178fa5,#32aaa2);box-shadow:0 4px 10px rgba(30,145,161,.21)}
#start .character-choice:nth-child(2) .play-label{background:linear-gradient(90deg,#9a6596,#d17d78);box-shadow:0 4px 10px rgba(165,100,139,.20)}
#start .rule-chip:nth-child(1){background:linear-gradient(145deg,#e9f8ff,#f5fbff);border-color:#b9dfeb}
#start .rule-chip:nth-child(1)::before{background:#55adc3}
#start .rule-chip:nth-child(1) b{color:#247e95}
#start .rule-chip:nth-child(2){background:linear-gradient(145deg,#fff7d9,#fffaf0);border-color:#ecd9a0}
#start .rule-chip:nth-child(2)::before{background:#d8a63d}
#start .rule-chip:nth-child(2) b{color:#a97513}
#start .rule-chip:nth-child(3){background:linear-gradient(145deg,#fff0eb,#fff8f5);border-color:#efc7bc}
#start .rule-chip:nth-child(3)::before{background:#df846e}
#start .rule-chip:nth-child(3) b{color:#b76453}
#start .rules-title{color:#67717a}
#start .rules-title::before{background:linear-gradient(90deg,#65b8c4,#d7a53f)}
#start .rules-title::after{background:linear-gradient(90deg,#d7a53f,#ce829f)}
#start .small{background:linear-gradient(90deg,rgba(232,248,247,.92),rgba(250,239,255,.88));border-color:rgba(133,111,188,.16);color:#5d7180}
@media (hover:hover){
  #start .character-choice:nth-child(1):hover{border-color:#39a3b9 !important;box-shadow:0 18px 38px rgba(49,147,168,.22),0 0 0 3px rgba(71,174,191,.11)}
  #start .character-choice:nth-child(2):hover{border-color:#b46ca4 !important;box-shadow:0 18px 38px rgba(158,91,143,.19),0 0 0 3px rgba(190,111,165,.10)}
}


/* V8.1B: real logo + journey-map treatment. Layout otherwise unchanged. */
#start .hero-logo-wrap{display:flex;justify-content:center;align-items:center;margin:-4px auto 6px;width:100%}
#start .hero-logo{display:block;width:min(620px,94%);height:auto;filter:drop-shadow(0 7px 12px rgba(31,67,73,.20));}
#start .journey-map{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:10px auto 2px;padding:10px 12px;width:min(660px,100%);border-radius:18px;background:linear-gradient(135deg,rgba(255,252,239,.96),rgba(228,248,246,.96));border:2px solid rgba(36,126,129,.20);box-shadow:0 7px 18px rgba(22,78,83,.10),inset 0 1px 0 rgba(255,255,255,.85)}
#start .journey-stop{display:flex;align-items:center;gap:6px;padding:7px 10px;border-radius:12px;background:rgba(255,255,255,.78);border:1px solid rgba(31,100,109,.14);box-shadow:0 3px 8px rgba(40,77,85,.08);font-size:13px;font-weight:900;letter-spacing:.1px;color:#245866;white-space:nowrap}
#start .journey-stop:nth-of-type(1){background:linear-gradient(180deg,#fff5da,#fffaf0)}
#start .journey-stop:nth-of-type(2){background:linear-gradient(180deg,#e2f6ff,#f5fcff)}
#start .journey-stop:nth-of-type(3){background:linear-gradient(180deg,#e8f7ea,#f8fff8)}
#start .journey-stop.wedding-stop{background:linear-gradient(180deg,#fff0f1,#fff9f4);border-color:rgba(204,137,65,.25)}
#start .journey-icon{font-size:20px;line-height:1;filter:drop-shadow(0 2px 1px rgba(0,0,0,.08))}
#start .journey-arrow{font-size:20px;color:#c4922c;font-weight:900;text-shadow:0 1px 0 #fff}
@media (max-width:900px){
  #start .hero-logo{width:min(520px,92%)}
  #start .journey-map{gap:5px;padding:8px 9px;margin-top:7px}
  #start .journey-stop{font-size:11.5px;padding:6px 8px;gap:4px}
  #start .journey-icon{font-size:17px}
  #start .journey-arrow{font-size:15px}
}
@media (max-height:430px) and (orientation:landscape){
  #start .hero-logo-wrap{margin:-8px auto 0}
  #start .hero-logo{width:min(430px,72vw)}
  #start .journey-map{width:min(650px,96%);padding:6px 8px;margin:5px auto 3px;gap:4px}
  #start .journey-stop{font-size:10.5px;padding:5px 7px}
  #start .journey-icon{font-size:15px}
  #start .journey-arrow{font-size:13px}
}


body{background:#e9eef1 !important;}
#start{background:#e9eef1 !important;}
.panel{background:linear-gradient(rgba(255,251,243,0.82),rgba(255,251,243,0.82)), url('assets/asset-da64afe66d5c44cb.png') center center / contain no-repeat, rgba(255,251,243,0.72) !important; backdrop-filter:blur(2px); border:1px solid rgba(183,153,88,.28)!important; box-shadow:0 8px 28px rgba(0,0,0,.10)!important; padding-top:18px!important}
.heroLogoWrap{padding-top:10px!important;margin-top:4px!important;overflow:visible!important}
.heroLogo{max-height:170px; width:min(760px,94%); object-fit:contain; display:block; margin:0 auto; filter:drop-shadow(0 8px 16px rgba(0,0,0,.16));}
@media (max-width: 700px){.heroLogo{max-height:124px;width:min(560px,96%)} .panel{padding-top:12px!important} .heroLogoWrap{padding-top:8px!important}}

.panel{
  background-color: rgba(255,251,243,0.88) !important;
  background-image: linear-gradient(rgba(255,251,243,0.70),rgba(255,251,243,0.70)), url("assets/asset-da64afe66d5c44cb.png") !important;
  background-position: center center, center center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: auto, contain !important;
}

.card.start-card{
  background-color: rgba(255,251,243,0.92) !important;
  background-image: linear-gradient(rgba(255,251,243,0.68),rgba(255,251,243,0.68)), url("assets/asset-da64afe66d5c44cb.png") !important;
  background-position: center center, center center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 100% 100%, contain !important;
}

.card.start-card{
  background-color: rgba(255,251,243,0.92) !important;
  background-image: linear-gradient(rgba(255,251,243,0.68),rgba(255,251,243,0.68)), url("assets/asset-ba98d006c879ce45.png") !important;
  background-position: center center, center center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 100% 100%, contain !important;
}

/* polished intro pass */
.story-intro,.intro-box,.lead-box,.introText,.intro-text,.hero-blurb{background:transparent!important;box-shadow:none!important;border:none!important}
.storyline,.journey-banner{box-shadow:none!important}
.intro-copy,.introLine,.lead-copy{background:transparent!important}
.heroTextBox,.introSentence{max-width:960px;margin:6px auto 14px;padding:0 14px;text-align:center;background:transparent!important;border:none!important;box-shadow:none!important}
.heroTextBox .line1,.introSentence .line1{font-size:21px;font-weight:900;color:#0f7b80}
.heroTextBox .line2,.introSentence .line2{font-size:17px;line-height:1.35;color:#48555d}
.rules-title{display:none!important}
.howToWinRibbonWrap{display:flex;justify-content:center;margin:10px 0 10px}
.howToWinRibbon{display:inline-block;padding:7px 18px;background:linear-gradient(#f8efda,#f0e2bc);border:2px solid #be983c;border-radius:999px;color:#7a6031;font-weight:900;letter-spacing:.08em;box-shadow:0 2px 0 #ead6a1;font-size:15px}
.rules-row{display:grid!important;grid-template-columns:repeat(3,1fr);gap:14px;max-width:980px;margin:0 auto 8px;padding:0 8px}
.rule-chip{background:linear-gradient(180deg,#fffaf0,#fff3df)!important;border:2px solid #d7c18a!important;border-radius:16px!important;padding:12px 14px!important;box-shadow:0 3px 0 rgba(220,204,161,.75)!important;min-height:92px;color:#4f5c63!important;font-weight:700!important;line-height:1.22}
.rule-chip b{display:flex;font-size:18px;align-items:center;gap:6px;margin-bottom:6px;font-weight:900}
.rule-chip:nth-child(1) b{color:#227c9d}
.rule-chip:nth-child(2) b{color:#b88412}
.rule-chip:nth-child(3) b{color:#c36b58}
@media (max-width:800px){.heroTextBox .line1,.introSentence .line1{font-size:18px}.heroTextBox .line2,.introSentence .line2{font-size:15px}.rules-row{grid-template-columns:1fr;gap:10px}}

.howToWinRibbonWrap{display:flex;justify-content:center;margin:8px 0 10px}
.howToWinRibbonImg{display:block;width:min(320px,72vw);height:auto;image-rendering:auto;filter:drop-shadow(0 3px 8px rgba(0,0,0,.12))}
@media (max-width:700px){.howToWinRibbonImg{width:min(260px,78vw)}}

.heroLogoWrap{padding-top:20px!important;margin-top:8px!important;overflow:visible!important}
.heroLogo{display:block;margin:0 auto;max-height:132px!important;width:min(760px,92%)!important;height:auto;object-fit:contain;object-position:center top;filter:drop-shadow(0 8px 16px rgba(0,0,0,.16));}
.card.start-card{padding-top:10px!important}
@media (max-width:700px){.heroLogoWrap{padding-top:14px!important;margin-top:4px!important}.heroLogo{max-height:96px!important;width:min(560px,94%)!important}}

/* V8.6C real laptop logo fix: actual hyphenated selectors + top-aligned scroll */
#start.screen{
  align-items:flex-start !important;
  justify-content:center !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding-top:14px !important;
  padding-bottom:26px !important;
  box-sizing:border-box !important;
}
#start .start-card{
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
  margin:0 auto 20px !important;
  padding-top:12px !important;
  box-sizing:border-box !important;
  justify-content:flex-start !important;
}
#start .hero-logo-wrap{
  width:100% !important;
  margin:0 auto 8px !important;
  padding:0 !important;
  overflow:visible !important;
  flex:none !important;
}
#start .hero-logo{
  display:block !important;
  width:min(620px,92%) !important;
  max-width:92% !important;
  max-height:none !important;
  height:auto !important;
  margin:0 auto !important;
  object-fit:contain !important;
  transform:none !important;
}
@media (orientation:landscape) and (max-height:500px){
  #start.screen{padding-top:8px !important;padding-bottom:18px !important;}
  #start .hero-logo-wrap{margin:0 auto 5px !important;}
  #start .hero-logo{width:min(500px,78vw) !important;max-width:78vw !important;}
}

/* V8.6D top-safe desktop override */
#start.screen{
  align-items:flex-start !important;
  justify-content:center !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding:18px 12px 28px !important;
  box-sizing:border-box !important;
}
#start .start-card{
  flex:0 0 auto !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
  margin:0 auto 24px !important;
  padding-top:14px !important;
  justify-content:flex-start !important;
  box-sizing:border-box !important;
}
#start .start-card::before{display:none !important;content:none !important;}
#start .hero-logo-wrap{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  width:100% !important;
  margin:0 auto 10px !important;
  padding:0 !important;
  overflow:visible !important;
  flex:0 0 auto !important;
}
#start .hero-logo{
  display:block !important;
  width:min(620px,90%) !important;
  max-width:90% !important;
  max-height:none !important;
  height:auto !important;
  margin:0 auto !important;
  transform:none !important;
  object-fit:contain !important;
}
@media (orientation:landscape) and (max-height:500px){
  #start.screen{padding:8px 10px 18px !important;}
  #start .start-card{margin-top:0 !important;padding-top:8px !important;}
  #start .hero-logo-wrap{margin:0 auto 6px !important;}
  #start .hero-logo{width:min(500px,76vw) !important;max-width:76vw !important;}
}

/* tighten actual live intro spacing */
#start .character-grid{margin-top:4px !important; margin-bottom:2px !important;}
#start .character-choice{margin-bottom:0 !important;}
#start .small{margin:4px 0 0 !important;}
#start img[alt="How to Win"]{display:block;margin:4px auto 2px !important;}
#start .rules-row{margin:2px auto 10px !important;}
#start .journey-map{margin:2px auto 2px !important;}

#start img[alt="How to Win"]{display:block;width:min(330px,72vw)!important;height:auto!important;margin:0 auto 2px!important;}
#start .rules-row{margin:0 auto 8px!important;}

.rule-chip b{display:flex;align-items:center;gap:8px}
.rule-icon{width:20px;height:20px;object-fit:contain;image-rendering:auto;flex:0 0 auto}

#start .rules-row{display:grid!important;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1020px;margin:4px auto 10px!important;padding:0 10px}
#start .rule-chip{background:#f8f1e4!important;border:3px solid #cfb067!important;border-radius:6px!important;box-shadow:4px 4px 0 rgba(194,160,84,.55)!important;padding:14px 14px 12px!important;min-height:112px;position:relative;font-family:"Silkscreen", monospace!important;font-size:16px!important;line-height:1.35;color:#4c5960;font-weight:400}
#start .rule-chip::before{content:"";position:absolute;inset:4px;border:1px solid rgba(255,255,255,.55);border-radius:2px;pointer-events:none}
#start .rule-chip b{display:flex;align-items:flex-start;gap:8px;margin-bottom:12px;font-family:"Silkscreen", monospace;font-size:16px;line-height:1.25;letter-spacing:0;text-transform:uppercase;font-weight:700}
#start .rule-icon{width:18px!important;height:18px!important;image-rendering:pixelated;flex:0 0 auto;margin-top:1px}
#start .rule-chip:nth-child(1) b{color:#197a9d}
#start .rule-chip:nth-child(2) b{color:#b17b00}
#start .rule-chip:nth-child(3) b{color:#c66d58}
#start .rule-chip .numBadge, #start .rule-chip strong{font-family:"Silkscreen", monospace!important;font-size:16px!important;font-weight:700;color:#8a5c00;background:#f3df9a;padding:3px 6px;border:2px solid #cfab44;border-radius:2px;display:inline-block;line-height:1.2;box-shadow:2px 2px 0 rgba(183,146,47,.45)}
@media (max-width:850px){#start .rules-row{grid-template-columns:1fr;gap:12px} #start .rule-chip{min-height:auto;font-size:15px!important} #start .rule-chip b{font-size:15px}}

/* V9.1B: Silkscreen loaded from HEAD, not invalid late @import */
#start .rule-chip,
#start .rule-chip b,
#start .rule-chip strong,
#start .rule-chip .numBadge {
  font-family: "Silkscreen", monospace !important;
}
#start .rule-chip { font-weight:400 !important; }
#start .rule-chip b,
#start .rule-chip strong,
#start .rule-chip .numBadge { font-weight:700 !important; }

/* Global Silkscreen pass */
html, body, button, input, select, textarea, .card, .choice, .choice *, .journey-map, .journey-map *, .rules-row, .rules-row *, .small, .subtitle, .heroTextBox, .heroTextBox *, .hud, .hud *, .message, .message *, #start, #start *{
  font-family:"Silkscreen", monospace !important;
}
canvas{font-family:"Silkscreen", monospace !important;}

.journey-map,.journeyWrap,.storyline{display:none !important;}

/* Pixel-style character selection boxes */
#start .choice, #start .choiceCard, #start .character-choice{
  border-radius:6px !important;
  box-shadow:4px 4px 0 rgba(194,160,84,.45) !important;
  border:3px solid #cfb067 !important;
  background:linear-gradient(180deg, rgba(255,250,239,.94) 0%, rgba(246,235,216,.92) 100%) !important;
  position:relative;
}
#start .choice::before, #start .choiceCard::before, #start .character-choice::before{
  content:"";
  position:absolute;
  inset:4px;
  border:1px solid rgba(255,255,255,.6);
  border-radius:2px;
  pointer-events:none;
}
#start .choice.blue, #start .choiceCard.blue{border-color:#78b6c9 !important; box-shadow:4px 4px 0 rgba(98,160,180,.28)!important}
#start .choice.purple, #start .choiceCard.purple{border-color:#c59bca !important; box-shadow:4px 4px 0 rgba(179,130,190,.25)!important}
#start .choose-tag, #start .choiceBadge{
  border-radius:3px !important;
  border:2px solid rgba(0,0,0,.08) !important;
  box-shadow:2px 2px 0 rgba(0,0,0,.08) !important;
  padding:4px 8px !important;
}

.heroHeadline,.line1{display:block !important;margin-bottom:8px !important;}
.heroBody,.line2{display:block !important;}

#start .start-copy strong{display:inline-block;margin-bottom:7px!important;}
#start .start-copy-line2{display:inline-block;}

/* Keep rule cards side-by-side on mobile */
@media (max-width: 850px){
  #start .rules-row{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 0 8px !important;
    align-items: stretch;
  }
  #start .rule-chip{
    min-height: 0 !important;
    padding: 10px 8px 10px !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
  }
  #start .rule-chip b{
    font-size: 9px !important;
    line-height: 1.35 !important;
    gap: 5px !important;
    margin-bottom: 8px !important;
  }
  #start .rule-icon{
    width: 14px !important;
    height: 14px !important;
  }
  #start .rule-chip .numBadge, #start .rule-chip strong{
    font-size: 9px !important;
    padding: 2px 4px !important;
    box-shadow: 1px 1px 0 rgba(183,146,47,.45) !important;
  }
}

#start .rule-body{display:block;position:relative;z-index:1;}
@media (max-width:850px){
  #start .rules-row{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:8px !important;
    align-items:stretch !important;
  }
  #start .rule-chip{
    box-sizing:border-box !important;
    min-height:96px !important;
    padding:10px 9px 10px 16px !important;
    overflow:visible !important;
    display:block !important;
  }
  #start .rule-chip::before{
    left:5px !important;
    top:7px !important;
    bottom:7px !important;
    width:3px !important;
  }
  #start .rule-chip b{
    margin:0 0 8px 0 !important;
    line-height:1.25 !important;
    min-height:18px;
  }
  #start .rule-body{
    display:block !important;
    line-height:1.35 !important;
    padding:0 !important;
    margin:0 !important;
    overflow:visible !important;
  }
  #start .rule-chip .numBadge,
  #start .rule-chip strong{
    vertical-align:baseline !important;
    white-space:nowrap !important;
  }
}


/* V10.2 — chunky retro-console touch controls */
#controls{
  bottom:max(14px,env(safe-area-inset-bottom));
  padding-left:max(18px,env(safe-area-inset-left));
  padding-right:max(18px,env(safe-area-inset-right));
}
#controls .group{
  gap:8px;
  align-items:flex-end;
}
#controls .ctrl{
  position:relative;
  width:68px;
  height:58px;
  min-width:68px;
  min-height:58px;
  padding:0 !important;
  border:4px solid #f2d28f !important;
  border-radius:4px !important;
  outline:3px solid #173f43;
  outline-offset:0;
  background:#087a7e !important;
  color:#fff4cc;
  font-family:'Silkscreen',monospace !important;
  box-shadow:
    inset 4px 4px 0 rgba(255,255,255,.16),
    inset -4px -4px 0 rgba(0,48,52,.30),
    0 6px 0 #173f43,
    0 9px 0 rgba(0,0,0,.18) !important;
  transform:translateY(0);
  transition:transform .035s linear,box-shadow .035s linear,filter .035s linear;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
#controls .ctrl::after{
  content:'';
  position:absolute;
  inset:5px;
  border:2px solid rgba(255,244,204,.28);
  pointer-events:none;
}
#controls .ctrl.pressed,
#controls .ctrl:active{
  transform:translateY(5px);
  box-shadow:
    inset 4px 4px 0 rgba(0,48,52,.25),
    inset -2px -2px 0 rgba(255,255,255,.10),
    0 1px 0 #173f43,
    0 3px 0 rgba(0,0,0,.16) !important;
  filter:brightness(.92);
}
#controls .retro-arrow{
  position:absolute;
  left:50%;
  top:50%;
  width:0;
  height:0;
  transform:translate(-50%,-50%);
  image-rendering:pixelated;
  filter:drop-shadow(3px 3px 0 #17484b);
}
#leftBtn .retro-arrow{
  border-top:12px solid transparent;
  border-bottom:12px solid transparent;
  border-right:19px solid #fff1c2;
  margin-left:-2px;
}
#rightBtn .retro-arrow{
  border-top:12px solid transparent;
  border-bottom:12px solid transparent;
  border-left:19px solid #fff1c2;
  margin-left:2px;
}
#jumpBtn{
  width:76px;
  min-width:76px;
  background:#b96243 !important;
  border-color:#f4d497 !important;
  outline-color:#5b3028;
  box-shadow:
    inset 4px 4px 0 rgba(255,255,255,.15),
    inset -4px -4px 0 rgba(76,27,21,.30),
    0 6px 0 #5b3028,
    0 9px 0 rgba(0,0,0,.18) !important;
}
#jumpBtn .retro-arrow{
  top:19px;
  border-left:11px solid transparent;
  border-right:11px solid transparent;
  border-bottom:17px solid #fff1c2;
  filter:drop-shadow(3px 3px 0 #6f382c);
}
#jumpBtn .ctrl-caption{
  position:absolute;
  left:0;
  right:0;
  bottom:6px;
  z-index:2;
  font-size:8px;
  line-height:1;
  letter-spacing:.5px;
  color:#fff1c2;
  text-shadow:2px 2px 0 #6f382c;
}
@media (orientation:landscape) and (max-height:500px){
  #controls .ctrl{width:64px;height:54px;min-width:64px;min-height:54px}
  #jumpBtn{width:72px;min-width:72px}
  #leftBtn .retro-arrow,#rightBtn .retro-arrow{border-top-width:11px;border-bottom-width:11px}
}


/* V10.7 — tiny retro quit control, gameplay-only overlay */
#quitBtn{
  position:fixed;
  z-index:55;
  top:max(34px,calc(env(safe-area-inset-top) + 28px));
  left:max(10px,env(safe-area-inset-left));
  display:none;
  width:auto;
  min-width:0;
  padding:4px 7px 3px;
  border:2px solid #fff1c2;
  border-radius:2px;
  outline:2px solid #263f40;
  outline-offset:0;
  background:#5b6a68;
  color:#fff1c2;
  font-family:"Silkscreen",monospace;
  font-size:8px;
  font-weight:700;
  line-height:1;
  letter-spacing:.4px;
  text-shadow:1px 1px 0 #263f40;
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.14),inset -2px -2px 0 rgba(0,0,0,.20),0 3px 0 #263f40;
  touch-action:manipulation;
}
#quitBtn:active{
  transform:translateY(2px);
  box-shadow:inset 2px 2px 0 rgba(0,0,0,.15),0 1px 0 #263f40;
}
@media (orientation:landscape) and (max-height:500px){
  #quitBtn{top:max(31px,calc(env(safe-area-inset-top) + 25px));font-size:7px;padding:3px 6px 2px}
}

/* V11.34 — persistent retro music control above every game screen once music has started */
#muteBtn{
  position:fixed;
  z-index:2105;
  top:max(34px,calc(env(safe-area-inset-top) + 28px));
  left:max(63px,calc(env(safe-area-inset-left) + 53px));
  display:none;
  width:auto;
  min-width:0;
  padding:4px 7px 3px;
  border:2px solid #fff1c2;
  border-radius:2px;
  outline:2px solid #263f40;
  outline-offset:0;
  background:#3f7778;
  color:#fff1c2;
  font-family:"Silkscreen",monospace;
  font-size:8px;
  font-weight:700;
  line-height:1;
  letter-spacing:.4px;
  text-shadow:1px 1px 0 #263f40;
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.14),inset -2px -2px 0 rgba(0,0,0,.20),0 3px 0 #263f40;
  touch-action:manipulation;
}
#muteBtn.is-muted{background:#6a5b58;}
#muteBtn:active{
  transform:translateY(2px);
  box-shadow:inset 2px 2px 0 rgba(0,0,0,.15),0 1px 0 #263f40;
}
@media (orientation:landscape) and (max-height:500px){
  #muteBtn{top:max(31px,calc(env(safe-area-inset-top) + 25px));left:max(58px,calc(env(safe-area-inset-left) + 48px));font-size:7px;padding:3px 6px 2px}
}
/* V11.51 — Greek-only spacing: the translated QUIT/MUTE labels are wider. */
html[lang="el"] #muteBtn{
  left:max(108px,calc(env(safe-area-inset-left) + 98px));
}
@media (orientation:landscape) and (max-height:500px){
  html[lang="el"] #muteBtn{left:max(101px,calc(env(safe-area-inset-left) + 91px));}
}


/* V11.16 — temporary debug level-jump controls */
#debugJump{
  position:fixed;
  z-index:75;
  top:max(42px,calc(env(safe-area-inset-top) + 36px));
  right:max(12px,env(safe-area-inset-right));
  display:none;
  gap:6px;
  pointer-events:auto;
}
#debugJump .debug-btn{
  border:2px solid #263f40;
  border-radius:5px;
  padding:6px 8px 5px;
  min-width:66px;
  background:rgba(7,94,99,.92);
  color:#fff;
  font:700 9px/1 Silkscreen,monospace;
  letter-spacing:.2px;
  box-shadow:0 3px 0 #263f40;
  touch-action:manipulation;
}
#debugJump .debug-btn:active{
  transform:translateY(2px);
  box-shadow:0 1px 0 #263f40;
}
@media (orientation:landscape) and (max-height:500px){
  #debugJump{top:max(34px,calc(env(safe-area-inset-top) + 29px));gap:4px}
  #debugJump .debug-btn{min-width:54px;padding:4px 5px 3px;font-size:7px}
}



/* V11.27 FINAL LANDING PAGE — intro-matched styling + local current-run leaderboard */
#finish{
  align-items:flex-start;
  justify-content:center;
  overflow-y:auto;
  overflow-x:hidden;
  padding:18px 12px 28px;
  box-sizing:border-box;
  background:
    radial-gradient(circle at 10% 16%,rgba(255,151,122,.32) 0 7%,transparent 22%),
    radial-gradient(circle at 91% 18%,rgba(94,190,210,.32) 0 8%,transparent 24%),
    radial-gradient(circle at 15% 88%,rgba(247,198,84,.30) 0 8%,transparent 24%),
    radial-gradient(circle at 88% 84%,rgba(159,133,214,.22) 0 8%,transparent 25%),
    radial-gradient(circle at 52% 2%,rgba(80,188,160,.20) 0 10%,transparent 28%),
    linear-gradient(145deg,#fff0df 0%,#f8f2ff 28%,#eaf9f7 55%,#e9f6ff 78%,#fff2df 100%);
}
#finish::before,#finish::after{
  content:"";position:fixed;pointer-events:none;z-index:0;opacity:.9;border-radius:50%;
}
#finish::before{
  width:245px;height:245px;left:-98px;top:-105px;border:3px solid rgba(14,148,151,.23);
  box-shadow:0 0 0 18px rgba(255,175,107,.09),0 0 0 42px rgba(97,181,205,.07),0 0 0 66px rgba(231,183,69,.045);
}
#finish::after{
  width:205px;height:205px;right:-80px;bottom:-90px;border:3px solid rgba(217,159,54,.28);
  box-shadow:0 0 0 20px rgba(147,118,206,.07),0 0 0 45px rgba(26,158,157,.055),0 0 0 70px rgba(255,148,119,.04);
}
#finish .finish-card{
  position:relative;z-index:1;flex:0 0 auto;
  width:min(820px,96vw);max-height:none;overflow:visible;
  margin:0 auto 24px;padding:14px 22px 22px;border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.965),rgba(255,250,244,.95));
  border:1px solid rgba(198,145,47,.42);
  box-shadow:0 24px 74px rgba(29,91,101,.19),0 2px 0 rgba(255,255,255,.95) inset;
}
#finish .finish-logo-wrap{display:flex;justify-content:center;align-items:center;width:100%;margin:0 auto 4px;padding:0}
#finish .finish-logo{display:block;width:min(600px,88%);max-width:88%;height:auto;margin:0 auto;object-fit:contain}
#finish #finishHeading{
  margin:1px 0 6px;font-family:"Silkscreen",monospace;font-size:clamp(24px,4.3vw,38px);line-height:1.12;font-weight:700;letter-spacing:.02em;
  background:none;
  -webkit-background-clip:border-box;background-clip:border-box;color:#078b8f;
}
#finish .finish-divider{width:min(360px,68%);height:3px;margin:8px auto 12px;border-radius:99px;background:linear-gradient(90deg,transparent,#58b7c6,#d8a33a,#df826e,transparent)}
#finish #endingText{max-width:690px;margin:8px auto 12px;color:#46595c;font-weight:700}#finish #endingText .ending-name{font-weight:900;text-shadow:0 1px 0 #fff,0 0 1px currentColor}#finish #endingText .ending-name.george{color:#2f73b9}#finish #endingText .ending-name.ilias{color:#8d5bb7}
#finish #resultStats{
  display:inline-block;min-width:min(430px,90%);margin:2px auto 14px;padding:10px 18px;border-radius:14px;
  background:linear-gradient(100deg,rgba(233,249,247,.92),rgba(255,243,225,.94),rgba(242,236,255,.88));
  border:1px solid rgba(53,157,162,.20);box-shadow:0 6px 16px rgba(44,106,110,.075);
  font-size:17px;line-height:1.45;color:#087f83;
}
#finish .player-name-entry{
  max-width:650px;margin:2px auto 12px;padding:11px 12px;border-radius:15px;
  background:rgba(255,255,255,.82);border:1px solid rgba(11,155,160,.18);
}
#finish .player-name-label{display:block;margin:0 0 7px;font-family:"Silkscreen",monospace;font-size:11px;font-weight:700;letter-spacing:.06em;color:#087f83;text-transform:uppercase}
#finish .player-name-controls{display:grid;grid-template-columns:1fr auto;gap:8px;max-width:470px;margin:0 auto}
#finish #playerScoreName{
  width:100%;min-width:0;border:2px solid #8fc9ca;border-radius:10px;padding:10px 12px;outline:none;
  background:#fff;color:#40575a;font-family:"Silkscreen",monospace;font-size:13px;font-weight:700;
}
#finish #playerScoreName:focus{border-color:#0b9ba0;box-shadow:0 0 0 3px rgba(11,155,160,.12)}
#finish #savePlayerName{border-radius:10px;padding:9px 14px;font-family:"Silkscreen",monospace;font-size:11px}
#finish #nameSaveStatus{display:block;min-height:14px;margin-top:5px;color:#6b7d7f;font-size:10px;font-weight:700;text-align:center}
#finish .leaderboard{
  max-width:650px;margin:4px auto 16px;padding:14px;border-radius:17px;text-align:left;
  background:linear-gradient(145deg,#f7fcfb,#fff7e8);border:1px solid rgba(11,155,160,.17);box-shadow:0 8px 20px rgba(21,86,88,.07);
}
#finish .leaderboard-title{display:flex;align-items:center;justify-content:center;gap:9px;margin:0 0 10px;color:#087f83;font-size:16px;font-weight:900;letter-spacing:.10em;text-transform:uppercase}
#finish .leaderboard-title::before,#finish .leaderboard-title::after{content:"";width:42px;height:1px;background:#d7b56d}
#finish .leaderboard-head,#finish .leaderboard-row{display:grid;grid-template-columns:52px 1.35fr .8fr .9fr;gap:10px;align-items:center}
#finish .leaderboard-head{padding:0 12px 6px;color:#718083;font-size:10px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}
#finish .leaderboard-row{padding:11px 12px;border-radius:12px;background:#fff;border:1px solid rgba(65,151,158,.18);box-shadow:0 4px 12px rgba(33,91,95,.06);color:#41575a;font-weight:800}
#finish .leaderboard-row .rank{display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:50%;background:linear-gradient(135deg,#0b9ba0,#58b7c6);color:#fff}
#finish .leaderboard-row .score{color:#a36f15;font-weight:900}
#finish .leaderboard-empty{margin:8px 0 0;text-align:center;color:#879497;font-size:11px;font-weight:700}
#finish .finish-actions{max-width:650px;margin:0 auto;gap:12px}
#finish .finish-actions button{border-radius:14px}
@media (orientation:landscape) and (max-height:500px){
  #finish{padding:8px 10px 18px}
  #finish .finish-card{padding:8px 14px 14px;margin-bottom:12px;border-radius:18px}
  #finish .finish-logo{width:min(430px,64vw);max-width:64vw}
  #finish #finishHeading{font-size:28px;margin-top:0}
  #finish .finish-divider{margin:5px auto 7px;height:2px}
  #finish #endingText{margin:5px auto 7px;font-size:13px}
  #finish #resultStats{margin-bottom:8px;padding:6px 12px;font-size:13px;line-height:1.3}
  #finish .player-name-entry{padding:6px 8px;margin-bottom:7px}
  #finish .player-name-label{margin-bottom:4px;font-size:9px}
  #finish #playerScoreName{padding:7px 9px;font-size:10px}
  #finish #savePlayerName{padding:7px 10px;font-size:9px}
  #finish #nameSaveStatus{margin-top:2px;min-height:10px;font-size:8px}
  #finish .leaderboard{padding:9px 10px;margin-bottom:9px}
  #finish .leaderboard-title{margin-bottom:6px;font-size:12px}
  #finish .leaderboard-row{padding:7px 10px;font-size:12px}
  #finish .leaderboard-row .rank{width:25px;height:25px}
  #finish .finish-actions{margin-top:0}
}


/* V11.29 — final screen polish: intro-card background, save-gated leaderboard, retro buttons */
#finish .leaderboard-row{display:none;}
#finish #savePlayerName,
#finish .finish-actions button{
  font-family:"Silkscreen",monospace !important;
  font-weight:700 !important;
  text-transform:uppercase;
  letter-spacing:.04em;
  border:3px solid #263f40 !important;
  border-radius:5px !important;
  box-shadow:0 5px 0 #263f40 !important;
  padding:11px 15px !important;
  background:#0b8f94 !important;
  color:#fff !important;
  text-shadow:1px 1px 0 rgba(0,0,0,.18);
}
#finish .finish-actions button.ghost{
  background:#f1cf65 !important;
  color:#263f40 !important;
  text-shadow:none;
}
#finish #savePlayerName:hover,
#finish .finish-actions button:hover{filter:brightness(1.06);}
#finish #savePlayerName:active,
#finish .finish-actions button:active{
  transform:translateY(4px);
  box-shadow:0 1px 0 #263f40 !important;
}
@media (orientation:landscape) and (max-height:500px){
  #finish #savePlayerName,#finish .finish-actions button{padding:7px 10px !important;border-width:2px !important;box-shadow:0 3px 0 #263f40 !important;}
  #finish #savePlayerName:active,#finish .finish-actions button:active{transform:translateY(2px);box-shadow:0 1px 0 #263f40 !important;}
}


/* V11.45 — bilingual EN / EL toggle, start screen only */
#start .start-language-toggle{
  position:fixed;z-index:2200;
  top:max(14px,calc(env(safe-area-inset-top) + 8px));
  right:max(14px,calc(env(safe-area-inset-right) + 8px));
  display:flex;gap:3px;padding:3px;
  background:#fff8df;border:2px solid #263f40;border-radius:5px;
  box-shadow:0 3px 0 #263f40;
}
#start .start-language-toggle .lang-btn{
  min-width:38px;width:auto;padding:6px 8px 5px;
  border:0;border-radius:2px;background:#dcefed;color:#263f40;
  font-family:"Silkscreen",monospace;font-size:10px;font-weight:700;line-height:1;
  box-shadow:none;
}
#start .start-language-toggle .lang-btn.active{background:#0b8f94;color:#fff8df;}
#start .start-language-toggle .lang-btn:active{transform:translateY(1px);}
#start .howToWinRibbonText{
  display:none;padding:8px 18px 7px;border:2px solid #be983c;border-radius:999px;
  background:linear-gradient(#f8efda,#f0e2bc);color:#7a6031;
  font-family:"Silkscreen",monospace;font-size:13px;font-weight:700;letter-spacing:.04em;
  box-shadow:0 2px 0 #ead6a1;
}
#start[data-language="el"] .howToWinRibbonImg{display:none;}
#start[data-language="el"] .howToWinRibbonText{display:inline-block;}
@media (orientation:landscape) and (max-height:500px){
  #start .start-language-toggle{top:max(6px,env(safe-area-inset-top));right:max(7px,env(safe-area-inset-right));padding:2px;gap:2px;box-shadow:0 2px 0 #263f40;}
  #start .start-language-toggle .lang-btn{min-width:32px;padding:4px 6px 3px;font-size:8px;}
  #start .howToWinRibbonText{padding:6px 13px 5px;font-size:10px;}
}


/* V11.48 — Public Pixel for Greek UI only. English keeps the existing Silkscreen styling. */
@font-face{
  font-family:"Public Pixel";
  src:local("Public Pixel"),
      url("https://raw.githubusercontent.com/ggbotnet/fonts-cc0/main/Public%20Pixel/Web%20Open%20Font%20Format%20%28.woff%29/PublicPixel.woff2") format("woff2");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
html[lang="el"] body{font-family:"Public Pixel", monospace !important;}


/* V11.62 — final-screen celebration guests rendered as normal IMG elements.
   This deliberately avoids the game's global canvas rules. */
#finish #celebrationGuests{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  position:relative !important;
  width:min(760px,100%) !important;
  min-height:184px !important;
  height:184px !important;
  margin:6px auto 14px !important;
  padding:0 !important;
  overflow:visible !important;
  z-index:20 !important;
  pointer-events:none !important;
}
#finish #celebrationGuests.is-visible{display:flex !important;visibility:visible !important;opacity:1 !important;align-items:flex-end !important;justify-content:space-between !important;gap:8px !important}
#finish .celebration-guest-slot{
  flex:1 1 0 !important;
  min-width:0 !important;
  height:184px !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:center !important;
  position:relative !important;
}
#finish .celebration-guest-img{
  position:static !important;
  inset:auto !important;
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:176px !important;
  margin:0 auto !important;
  object-fit:contain !important;
  opacity:1 !important;
  visibility:visible !important;
  image-rendering:pixelated;
}
/* V11.65 — ending/results screen only: mirror the far-right guest inward.
   The transform is applied to the IMG element, so both alternating sprite frames are mirrored. */
#finish #celebrationGuestImg4{
  transform:scaleX(-1) !important;
  transform-origin:center center !important;
}
@media (max-width:600px){
  #finish #celebrationGuests{height:118px !important;min-height:118px !important;gap:4px !important;margin:4px auto 10px !important}
  #finish .celebration-guest-slot{height:118px !important}
  #finish .celebration-guest-img{max-height:116px !important}
}
@media (orientation:landscape) and (max-height:500px){
  #finish #celebrationGuests{height:104px !important;min-height:104px !important;width:min(760px,100%) !important;gap:4px !important;margin:3px auto 8px !important}
  #finish .celebration-guest-slot{height:104px !important}
  #finish .celebration-guest-img{max-height:102px !important}
}


/* V11.69 — targeted mobile/Greek selection-screen refinements. */
@media (orientation:landscape) and (max-height:500px){
  /* Keep the groom previews comfortably inside their stage even during the -4px idle bob. */
  #start .sprite-stage img{height:150px !important;max-height:150px !important;}
}
@media (orientation:landscape) and (max-height:390px){
  #start .sprite-stage img{height:144px !important;max-height:144px !important;}
}

/* Greek-only: the translated copy is longer, so use a deliberately smaller type scale
   on the character-selection screen. English remains untouched. */
html[lang="el"] #start .start-copy{font-size:13px !important;line-height:1.28 !important;}
html[lang="el"] #start .character-name{font-size:21px !important;}
html[lang="el"] #start .play-label{font-size:11px !important;}
html[lang="el"] #start .rule-chip{font-size:13px !important;}
html[lang="el"] #start .rule-chip b{font-size:12px !important;}
html[lang="el"] #start .rule-chip .numBadge,
html[lang="el"] #start .rule-chip strong{font-size:12px !important;}
html[lang="el"] #start .howToWinRibbonText{font-size:11px !important;}
html[lang="el"] #start .small{font-size:10px !important;}
@media (orientation:landscape) and (max-height:500px){
  html[lang="el"] #start .start-copy{font-size:10.5px !important;}
  html[lang="el"] #start .character-name{font-size:16px !important;}
  html[lang="el"] #start .play-label{font-size:9px !important;}
  html[lang="el"] #start .rule-chip{font-size:9px !important;}
  html[lang="el"] #start .rule-chip b{font-size:8px !important;}
  html[lang="el"] #start .rule-chip .numBadge,
  html[lang="el"] #start .rule-chip strong{font-size:8px !important;}
  html[lang="el"] #start .howToWinRibbonText{font-size:9px !important;}
  html[lang="el"] #start .small{font-size:8px !important;}
}



/* DEPLOYMENT BUILD — real D1 leaderboard + unobtrusive Turnstile */
#finish #leaderboardRows{display:flex;flex-direction:column;gap:7px}
#finish #leaderboardRows .leaderboard-row{display:grid !important}
#finish .leaderboard-public-note{display:block;margin:6px auto 0;max-width:470px;color:#78888a;font-size:9px;line-height:1.35;font-weight:700;text-align:center}
#finish .turnstile-container{min-height:0;margin:5px auto 0;display:flex;justify-content:center;align-items:center;max-width:470px}
#finish .leaderboard-row.is-current{outline:2px solid rgba(11,155,160,.30);outline-offset:1px}
#finish .leaderboard-row .player-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (orientation:landscape) and (max-height:500px){
  #finish .leaderboard-public-note{font-size:7px;margin-top:3px}
  #finish #leaderboardRows{gap:4px}
}