/* Romeo Easter egg — isolated playful editorial experience */
.romeo-trigger{
  appearance:none;
  display:inline;
  margin:0;
  padding:0 1px 1px;
  border:0;
  border-bottom:1px solid rgba(247,247,245,.35);
  background:transparent;
  color:inherit;
  font:inherit;
  line-height:inherit;
  cursor:pointer;
  vertical-align:baseline;
  transition:border-color .18s ease,color .18s ease,text-shadow .18s ease;
}
.romeo-trigger:hover,.romeo-trigger:focus-visible{
  color:#fff;
  border-bottom-color:#c86bff;
  text-shadow:0 0 16px rgba(53,197,213,.35);
}
.romeo-trigger:focus-visible{outline:2px solid rgba(53,197,213,.72);outline-offset:4px;border-radius:2px}
.romeo-family-card>span{
  display:inline-flex!important;
  align-items:baseline;
  flex-wrap:nowrap;
  gap:.28em;
  white-space:nowrap;
}
.romeo-family-card>span>[data-romeo-family-prefix],
.romeo-family-card>span>.romeo-trigger{display:inline!important;width:auto!important}

body.romeo-game-open{overflow:hidden!important}
.rg-modal,.rg-modal *{box-sizing:border-box}
.rg-modal{
  --rg-ink:#302a4d;
  --rg-paper:#fffaf2;
  --rg-pink:#ef9db4;
  --rg-lilac:#c7a8e8;
  --rg-blue:#8bcad9;
  --rg-mint:#a9d9c1;
  --rg-yellow:#f2cf75;
  --rg-coral:#ed8d70;
  position:fixed;
  inset:0;
  z-index:12000;
  display:grid;
  place-items:center;
  padding:clamp(8px,2vw,24px);
  overflow:hidden;
  color:var(--rg-ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:
    radial-gradient(ellipse at 9% 10%,rgba(242,207,117,.72) 0 10%,transparent 28%),
    radial-gradient(ellipse at 90% 4%,rgba(199,168,232,.68) 0 14%,transparent 34%),
    radial-gradient(ellipse at 15% 91%,rgba(139,202,217,.62) 0 13%,transparent 35%),
    radial-gradient(ellipse at 88% 88%,rgba(239,157,180,.56) 0 12%,transparent 34%),
    linear-gradient(135deg,#f8eee5 0%,#f5f0fb 48%,#eaf4f0 100%);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .28s ease,visibility .28s ease;
}
.rg-modal::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.24;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
}
.rg-modal::after{
  content:"";
  position:absolute;
  width:min(32vw,440px);
  height:min(18vw,230px);
  left:-5vw;
  top:19vh;
  border:5px solid rgba(48,42,77,.18);
  border-left-color:transparent;
  border-radius:50%;
  transform:rotate(-15deg);
  pointer-events:none;
}
.rg-modal.is-open{opacity:1;visibility:visible;pointer-events:auto}
.rg-dialog{
  position:relative;
  width:min(1220px,100%);
  max-height:calc(100vh - clamp(16px,4vw,48px));
  overflow:auto;
  isolation:isolate;
  border:3px solid var(--rg-ink);
  border-radius:30px 44px 28px 50px/38px 28px 46px 30px;
  background:
    linear-gradient(rgba(255,250,242,.93),rgba(255,250,242,.93)),
    repeating-linear-gradient(8deg,rgba(48,42,77,.035) 0 1px,transparent 1px 8px),
    var(--rg-paper);
  box-shadow:12px 14px 0 var(--rg-ink),0 35px 90px rgba(65,46,81,.23);
  scrollbar-width:thin;
  scrollbar-color:rgba(48,42,77,.35) transparent;
}
.rg-dialog::before,
.rg-dialog::after{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  filter:blur(.2px);
}
.rg-dialog::before{
  width:280px;
  height:165px;
  right:-70px;
  top:58px;
  border-radius:42% 58% 63% 37%/52% 35% 65% 48%;
  background:rgba(139,202,217,.28);
  transform:rotate(11deg);
}
.rg-dialog::after{
  width:210px;
  height:140px;
  left:-58px;
  bottom:118px;
  border-radius:61% 39% 48% 52%/42% 63% 37% 58%;
  background:rgba(239,157,180,.26);
  transform:rotate(-9deg);
}
.rg-close{
  position:sticky;
  z-index:12;
  top:12px;
  float:right;
  margin:12px 12px -58px 0;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:2px solid var(--rg-ink);
  border-radius:50% 44% 54% 46%;
  background:#fff8df;
  color:var(--rg-ink);
  box-shadow:4px 4px 0 var(--rg-ink);
  font:500 28px/1 var(--sans,"Inter",sans-serif);
  cursor:pointer;
  transform:rotate(2deg);
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}
.rg-close:hover{transform:translate(-1px,-1px) rotate(-3deg);box-shadow:6px 6px 0 var(--rg-ink);background:#f8dfee}
.rg-close:focus-visible{outline:4px solid rgba(139,202,217,.6);outline-offset:4px}
.rg-game{position:relative;z-index:2;padding:clamp(28px,4vw,54px)}
.rg-game::before{
  content:"";
  position:absolute;
  width:170px;
  height:58px;
  left:4%;
  top:31px;
  opacity:.72;
  transform:rotate(-5deg);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 60'%3E%3Cpath d='M5 38C30 3 56 55 83 24c28-31 52 25 91-8' fill='none' stroke='%23ed8d70' stroke-width='9' stroke-linecap='round' opacity='.72'/%3E%3Cpath d='M8 47c35-22 45 15 80-5 33-19 54 10 82-10' fill='none' stroke='%23f2cf75' stroke-width='5' stroke-linecap='round' opacity='.74'/%3E%3C/svg%3E") center/contain no-repeat;
  pointer-events:none;
}
.rg-intro{
  position:relative;
  width:min(900px,88%);
  margin:0 0 clamp(26px,3vw,40px) clamp(0px,4vw,56px);
  padding:16px 70px 12px 0;
  text-align:left;
}
.rg-intro::after{
  content:"";
  position:absolute;
  left:4%;
  bottom:-7px;
  width:min(520px,82%);
  height:18px;
  transform:rotate(-1.5deg);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 20'%3E%3Cpath d='M3 12c54-9 90 7 145 0 53-7 89 7 141 0 52-7 96 7 228-3' fill='none' stroke='%238bcad9' stroke-width='7' stroke-linecap='round' opacity='.62'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.rg-intro h2{
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:clamp(7px,1vw,14px);
  align-items:center;
  font-family:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  font-size:clamp(18px,3.1vw,42px);
  font-weight:800;
  line-height:1.05;
  letter-spacing:.015em;
}
.rg-intro h2 span{
  position:relative;
  display:inline-block;
  padding:.1em .18em;
  border:2px solid var(--rg-ink);
  background:#fffdf7;
  box-shadow:3px 3px 0 var(--rg-ink);
}
.rg-intro h2 span:nth-child(1){background:#f7d7df;transform:rotate(-2deg)}
.rg-intro h2 span:nth-child(2){background:#e6d9f4;transform:rotate(1.5deg)}
.rg-intro h2 span:nth-child(3){background:#d8eef1;transform:rotate(-1deg)}
.rg-intro h2 span:nth-child(4){background:#f8e6a9;transform:rotate(2deg)}
.rg-intro h2 span:nth-child(5){background:#d9ecdf;transform:rotate(-1.5deg)}
.rg-board{
  position:relative;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(16px,2vw,26px);
  align-items:start;
  transition:opacity .45s ease,transform .45s ease,filter .45s ease;
}
.rg-board::before{
  content:"";
  position:absolute;
  z-index:-1;
  width:120px;
  height:120px;
  right:1%;
  top:42%;
  border:7px solid rgba(167,91,179,.34);
  border-right-color:transparent;
  border-radius:48% 52% 42% 58%;
  transform:rotate(18deg);
}
.rg-board.is-complete{opacity:0;transform:scale(.975);filter:blur(8px);pointer-events:none}
.rg-statement{
  position:relative;
  overflow:visible;
  border:3px solid var(--rg-ink);
  box-shadow:8px 9px 0 var(--rg-ink);
}
.rg-statement:first-child{
  grid-column:span 5;
  border-radius:24px 37px 28px 42px/31px 24px 39px 27px;
  background:rgba(248,230,169,.74);
  transform:rotate(-.55deg);
}
.rg-statement:nth-child(2){
  grid-column:span 7;
  border-radius:39px 25px 45px 27px/24px 41px 29px 44px;
  background:rgba(216,238,241,.78);
  transform:rotate(.45deg);
}
.rg-statement-title{
  margin:0;
  padding:14px 18px 11px;
  border-bottom:3px solid var(--rg-ink);
  color:var(--rg-ink);
  font-family:"Bradley Hand","Segoe Print","Comic Sans MS",cursive;
  font-size:clamp(13px,1.4vw,18px);
  font-weight:700;
  letter-spacing:.035em;
  text-align:left;
  text-transform:none;
}
.rg-zones{display:grid;gap:10px;padding:12px;background:transparent}
.rg-zones.rg-bs{grid-template-columns:repeat(3,minmax(0,1fr))}
.rg-zones.rg-is{grid-template-columns:repeat(4,minmax(0,1fr))}
.rg-zone{
  position:relative;
  min-height:154px;
  padding:46px 8px 12px;
  display:flex;
  flex-wrap:wrap;
  align-content:center;
  justify-content:center;
  gap:7px;
  border:2px dashed rgba(48,42,77,.72);
  border-radius:18px 25px 16px 28px/22px 17px 27px 19px;
  background:rgba(255,253,247,.72);
  outline:0;
  transition:background .17s ease,box-shadow .17s ease,transform .17s ease;
}
.rg-zone:nth-child(even){border-radius:27px 17px 25px 15px/18px 26px 17px 28px}
.rg-zone::before{
  content:attr(data-label);
  position:absolute;
  top:11px;
  left:8px;
  right:8px;
  color:var(--rg-ink);
  font-family:"Bradley Hand","Segoe Print","Comic Sans MS",cursive;
  font-size:clamp(10px,1.05vw,13px);
  font-weight:700;
  letter-spacing:.02em;
  text-align:center;
  text-transform:none;
}
.rg-zone.is-target,.rg-zone:focus-visible{
  background:rgba(169,217,193,.68);
  box-shadow:inset 0 0 0 4px rgba(48,42,77,.16),0 0 0 5px rgba(169,217,193,.34);
  transform:scale(1.015) rotate(-.35deg);
}
.rg-zone.is-wrong{animation:rg-shake .34s ease;background:rgba(239,157,180,.55)}
.rg-tray{
  grid-column:1/-1;
  position:relative;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:clamp(8px,1.2vw,14px);
  min-height:138px;
  padding:20px;
  border:3px dashed var(--rg-ink);
  border-radius:34px 24px 41px 26px/25px 39px 23px 42px;
  background:rgba(247,215,223,.68);
  box-shadow:7px 8px 0 rgba(48,42,77,.94);
  transform:rotate(-.25deg);
}
.rg-tray::before,.rg-tray::after{
  content:"";
  position:absolute;
  pointer-events:none;
}
.rg-tray::before{
  width:80px;
  height:30px;
  left:28px;
  top:-18px;
  background:rgba(242,207,117,.72);
  transform:rotate(-8deg);
  clip-path:polygon(3% 16%,98% 4%,94% 92%,0 100%);
}
.rg-tray::after{
  width:62px;
  height:35px;
  right:34px;
  bottom:-18px;
  border-bottom:6px solid rgba(139,202,217,.75);
  border-radius:50%;
  transform:rotate(-12deg);
}
.rg-piece{
  position:relative;
  width:92px;
  min-width:92px;
  height:92px;
  display:grid;
  place-items:center;
  padding:7px;
  border:2px solid var(--rg-ink);
  border-radius:22px 17px 25px 16px/18px 26px 17px 24px;
  background:#fffdf7;
  color:var(--rg-ink);
  box-shadow:4px 5px 0 var(--rg-ink);
  cursor:grab;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  transition:transform .17s ease,box-shadow .17s ease,opacity .17s ease,background .17s ease;
}
.rg-piece::after{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:inherit;
  pointer-events:none;
  opacity:.18;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70'%3E%3Cfilter id='x'%3E%3CfeTurbulence baseFrequency='.7' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23x)' opacity='.2'/%3E%3C/svg%3E");
}
.rg-piece:nth-child(3n+1){transform:rotate(-2deg);background:#fff6d9}
.rg-piece:nth-child(3n+2){transform:rotate(1.7deg);background:#f8e8f0}
.rg-piece:nth-child(3n){transform:rotate(-.7deg);background:#eaf5f4}
.rg-piece:hover,.rg-piece:focus-visible,.rg-piece.is-selected{
  transform:translate(-2px,-4px) rotate(1deg);
  box-shadow:7px 9px 0 var(--rg-ink);
  background:#fff;
}
.rg-piece:focus-visible{outline:4px solid rgba(139,202,217,.55);outline-offset:3px}
.rg-piece:active{cursor:grabbing}
.rg-piece svg{position:relative;z-index:1;display:block;width:75px;height:75px;filter:drop-shadow(2px 4px 0 rgba(48,42,77,.16)) saturate(.94)}
.rg-zone .rg-piece{
  width:70px;
  min-width:70px;
  height:70px;
  padding:4px;
  border-radius:17px 13px 19px 12px/14px 19px 13px 18px;
  box-shadow:3px 3px 0 var(--rg-ink);
  cursor:default;
  animation:rg-place .28s cubic-bezier(.2,.8,.2,1);
}
.rg-zone .rg-piece svg{width:59px;height:59px}
.rg-drag-ghost{
  position:fixed!important;
  z-index:12020!important;
  left:0;
  top:0;
  margin:0!important;
  pointer-events:none!important;
  opacity:.96;
  transform:translate(-50%,-50%) rotate(3deg) scale(1.07)!important;
  box-shadow:8px 10px 0 var(--rg-ink)!important;
}
.rg-piece.is-drag-source{opacity:.22}
.rg-letter-stage{
  position:absolute;
  inset:0;
  z-index:8;
  display:grid;
  place-items:center;
  min-height:100%;
  padding:clamp(58px,6vw,82px) clamp(18px,5vw,68px) clamp(22px,3vw,36px);
  border-radius:inherit;
  overflow:auto;
  background:
    radial-gradient(ellipse at 15% 16%,rgba(242,207,117,.48) 0 9%,transparent 27%),
    radial-gradient(ellipse at 89% 20%,rgba(199,168,232,.45) 0 13%,transparent 32%),
    radial-gradient(ellipse at 14% 88%,rgba(139,202,217,.45) 0 13%,transparent 32%),
    linear-gradient(135deg,#f9efe6,#f4eef9 54%,#eaf4ef);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.rg-letter-stage::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.18;
  pointer-events:none;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}
.rg-letter-stage.is-visible{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .38s ease .36s}
.rg-envelope{
  position:relative;
  width:min(910px,100%);
  min-height:630px;
  display:grid;
  place-items:end center;
  perspective:1400px;
}
.rg-envelope::before,
.rg-envelope::after{
  content:"";
  position:absolute;
  z-index:6;
  pointer-events:none;
}
.rg-envelope::before{
  width:140px;
  height:74px;
  left:-8px;
  top:9%;
  border:8px solid rgba(237,141,112,.5);
  border-right-color:transparent;
  border-bottom-color:transparent;
  border-radius:50%;
  transform:rotate(-15deg);
}
.rg-envelope::after{
  width:170px;
  height:36px;
  right:-2%;
  bottom:8%;
  border-bottom:8px solid rgba(139,202,217,.6);
  border-radius:50%;
  transform:rotate(8deg);
}
.rg-envelope-back{
  position:absolute;
  left:4%;
  right:4%;
  bottom:0;
  height:58%;
  border:3px solid var(--rg-ink);
  border-radius:12px 20px 28px 18px/16px 13px 25px 21px;
  background:
    linear-gradient(rgba(239,157,180,.82),rgba(239,157,180,.82)),
    repeating-linear-gradient(11deg,rgba(48,42,77,.07) 0 2px,transparent 2px 8px);
  box-shadow:9px 10px 0 var(--rg-ink),0 26px 55px rgba(65,46,81,.22);
}
.rg-envelope-flap{
  position:absolute;
  z-index:3;
  left:4%;
  right:4%;
  bottom:28%;
  height:31%;
  transform-origin:50% 100%;
  clip-path:polygon(0 0,50% 100%,100% 0);
  background:#f3c4cf;
  border-top:3px solid var(--rg-ink);
  filter:drop-shadow(0 4px 0 var(--rg-ink));
}
.rg-letter-stage.is-visible .rg-envelope-flap{animation:rg-flap .75s cubic-bezier(.2,.75,.2,1) .55s forwards}
.rg-paper{
  position:relative;
  z-index:2;
  width:90%;
  max-height:min(77vh,740px);
  overflow:auto;
  margin-bottom:3%;
  padding:clamp(34px,4.5vw,58px);
  border:3px solid var(--rg-ink);
  border-radius:18px 29px 16px 25px/24px 16px 28px 18px;
  background:
    linear-gradient(rgba(255,252,244,.92),rgba(255,252,244,.92)),
    repeating-linear-gradient(0deg,rgba(91,70,52,.055) 0 1px,transparent 1px 31px),
    #fffaf0;
  color:#2b2644;
  box-shadow:10px 11px 0 var(--rg-ink),0 24px 55px rgba(65,46,81,.23);
  transform:translateY(48%) rotate(-.5deg) scale(.94);
  opacity:0;
}
.rg-paper::before,
.rg-paper::after{
  content:"";
  position:absolute;
  pointer-events:none;
}
.rg-paper::before{
  width:120px;
  height:35px;
  right:28px;
  top:18px;
  background:rgba(242,207,117,.55);
  transform:rotate(4deg);
  clip-path:polygon(2% 14%,100% 0,95% 88%,0 100%);
}
.rg-paper::after{
  width:78px;
  height:78px;
  left:16px;
  bottom:12px;
  border:6px solid rgba(199,168,232,.55);
  border-top-color:transparent;
  border-radius:50%;
  transform:rotate(-12deg);
}
.rg-letter-stage.is-visible .rg-paper{animation:rg-paper-open .9s cubic-bezier(.17,.84,.24,1) 1.05s forwards}
.rg-letter{
  position:relative;
  z-index:2;
  margin:0;
  font-family:"Newsreader","Iowan Old Style","Baskerville","Times New Roman",serif;
  font-size:clamp(20px,2.15vw,28px);
  font-weight:400;
  line-height:1.46;
  letter-spacing:-.006em;
  white-space:pre-line;
}

@keyframes rg-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px) rotate(-1deg)}55%{transform:translateX(6px) rotate(1deg)}80%{transform:translateX(-3px)}}
@keyframes rg-place{from{opacity:.35;transform:scale(.75) rotate(-5deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes rg-flap{0%{transform:rotateX(0deg)}100%{transform:rotateX(180deg);z-index:1}}
@keyframes rg-paper-open{0%{opacity:0;transform:translateY(48%) rotate(-.5deg) scale(.94)}100%{opacity:1;transform:translateY(-9%) rotate(-.5deg) scale(1)}}

@media(max-width:980px){
  .rg-statement:first-child,.rg-statement:nth-child(2){grid-column:1/-1;transform:none}
  .rg-intro{width:94%;margin-left:0}
}
@media(max-width:820px){
  .rg-dialog{border-radius:24px 30px 22px 34px;box-shadow:8px 9px 0 var(--rg-ink),0 26px 60px rgba(65,46,81,.22)}
  .rg-game{padding:24px 13px 24px}
  .rg-game::before{width:115px;height:42px;left:2%;top:21px}
  .rg-intro{padding:20px 48px 8px 5px;margin-bottom:26px}
  .rg-zones.rg-bs,.rg-zones.rg-is{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rg-zones.rg-bs .rg-zone:last-child{grid-column:1/-1}
  .rg-zone{min-height:126px;padding-top:41px}
  .rg-piece{width:79px;min-width:79px;height:79px}
  .rg-piece svg{width:65px;height:65px}
  .rg-envelope{min-height:535px}
  .rg-envelope-back{height:49%}
  .rg-envelope-flap{bottom:25%;height:26%}
  .rg-paper{width:94%;max-height:71vh;margin-bottom:8%;padding:32px 25px}
}
@media(max-width:480px){
  .rg-modal{padding:5px}
  .rg-dialog{max-height:calc(100vh - 10px);border-width:2px;border-radius:18px 23px 17px 25px;box-shadow:5px 6px 0 var(--rg-ink)}
  .rg-close{top:8px;margin:8px 8px -50px 0;width:40px;height:40px;border-width:2px;box-shadow:3px 3px 0 var(--rg-ink)}
  .rg-intro{padding:19px 42px 6px 3px}
  .rg-intro h2{font-size:16px;gap:6px}
  .rg-intro h2 span{border-width:1.5px;box-shadow:2px 2px 0 var(--rg-ink)}
  .rg-board{gap:15px}
  .rg-statement{border-width:2px;box-shadow:5px 6px 0 var(--rg-ink)}
  .rg-statement-title{border-bottom-width:2px;padding:12px 14px 9px;font-size:13px}
  .rg-zones{gap:7px;padding:8px}
  .rg-zone{min-height:108px;padding:36px 4px 7px;gap:4px;border-width:1.5px}
  .rg-zone::before{top:8px;font-size:10px}
  .rg-tray{gap:7px;min-height:112px;padding:12px 8px;border-width:2px;box-shadow:5px 6px 0 var(--rg-ink)}
  .rg-piece{width:65px;min-width:65px;height:65px;padding:4px;border-width:1.5px;box-shadow:3px 3px 0 var(--rg-ink)}
  .rg-piece svg{width:55px;height:55px}
  .rg-zone .rg-piece{width:54px;min-width:54px;height:54px;border-width:1px;box-shadow:2px 2px 0 var(--rg-ink)}
  .rg-zone .rg-piece svg{width:47px;height:47px}
  .rg-letter-stage{padding:60px 8px 18px}
  .rg-envelope{min-height:570px}
  .rg-envelope-back{left:1%;right:1%;height:40%;border-width:2px;box-shadow:5px 6px 0 var(--rg-ink)}
  .rg-envelope-flap{left:1%;right:1%;bottom:20%;height:21%;border-top-width:2px}
  .rg-paper{width:98%;max-height:76vh;margin-bottom:4%;padding:31px 21px;border-width:2px;box-shadow:6px 7px 0 var(--rg-ink)}
  .rg-paper::before{width:88px;height:28px;right:15px}
  .rg-letter{font-size:19px;line-height:1.48}
}
@media(prefers-reduced-motion:reduce){
  .rg-modal,.rg-board,.rg-piece,.rg-letter-stage{transition:none!important}
  .rg-zone.is-wrong,.rg-zone .rg-piece,.rg-letter-stage.is-visible .rg-envelope-flap,.rg-letter-stage.is-visible .rg-paper{animation-duration:.01ms!important;animation-delay:0ms!important}
}


/* Mobile usability fix 04.08.2026 */
.rg-dialog{
  max-height:calc(100dvh - clamp(16px,4vw,48px));
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
@media(max-width:480px){
  .rg-modal{
    padding:max(4px,env(safe-area-inset-top)) 4px max(4px,env(safe-area-inset-bottom));
    place-items:start center;
    touch-action:pan-y;
  }
  .rg-dialog{
    width:calc(100% - 8px);
    max-width:100%;
    max-height:calc(100dvh - max(8px,env(safe-area-inset-top)) - max(8px,env(safe-area-inset-bottom)));
    margin:0 auto;
    overflow-x:hidden;
    overflow-y:auto;
    touch-action:pan-y;
  }
  .rg-game,.rg-board,.rg-statement,.rg-tray{min-width:0}
  .rg-game{padding:20px 10px 24px}
  .rg-piece{touch-action:manipulation}
}