:root{
  --ink:#4f381f;
  --paper:#f4e5bf;
  --paper2:#e9d6ab;
  --wood:#7b5227;
  --wood2:#5b3818;
  --gold:#e2be56;
  --green:#5f843e;
  --olive:#89a859;
  --purple:#7c4697;
  --blue:#5da6d8;
  --shadow:0 14px 30px rgba(45,28,10,.18);
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{
  font-family: Georgia, "Times New Roman", ui-serif, Cambria, serif;
  color:var(--ink);
  background:radial-gradient(circle at 20% 15%, rgba(255,240,173,.28), transparent 28%),linear-gradient(135deg,#6c8a4c,#9bb967 36%,#879f58 68%,#7a9350);
  touch-action:none;
  overscroll-behavior:none;
}
button{font:inherit}
.game-shell{position:fixed;inset:0;overflow:hidden}
#game{position:absolute;inset:0;width:100%;height:100%;display:block}
.left-rail,.right-rail,.top-right-controls,.bottom-banner{position:absolute;z-index:4}
.left-rail{left:20px;top:20px;width:300px;display:grid;gap:14px;pointer-events:none}
.right-rail{right:20px;top:96px;width:270px;display:grid;gap:12px}
.top-right-controls{right:20px;top:20px;display:flex;gap:12px}
.bottom-banner{
  left:50%;bottom:18px;transform:translateX(-50%);
  width:min(1100px, calc(100vw - 48px));
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  background-image:url("./assets/paper_texture.svg"), linear-gradient(180deg, rgba(250,240,214,.96), rgba(239,222,179,.96));
  background-size:220px 220px, auto;
  border:2px solid rgba(118,82,39,.38);border-radius:22px;
  padding:12px 18px;box-shadow:var(--shadow), inset 0 1px 0 rgba(255,250,236,.7);
}
.banner-left{display:flex;align-items:center;gap:14px;min-width:0}
.bee-mini{font-size:30px;line-height:1}
.banner-left strong{display:block;font-size:26px;line-height:1.05;color:#6a4824}
.banner-left span,#objectiveText{display:block;color:#86623b;font-size:15px;font-weight:700}
.banner-right{max-width:360px;text-align:right;font-size:15px;color:#7a5833;font-weight:700}
.wood-panel{
  background-image:url("./assets/wood_texture.svg"), linear-gradient(180deg, rgba(132,89,44,.98), rgba(96,59,28,.98));
  background-size:cover, auto;
  background-position:center;
  border:2px solid rgba(255,232,186,.3);border-radius:24px;box-shadow:0 18px 38px rgba(45,28,10,.25), inset 0 1px 0 rgba(255,245,218,.18);
  color:#fff5d8;
}
.logo-panel{padding:14px 16px}
.logo-row{display:flex;align-items:center;gap:14px}
.bee-badge{width:48px;height:48px;border-radius:999px;background:#f4cd64;display:grid;place-items:center;font-size:28px;box-shadow:inset 0 0 0 3px rgba(120,78,32,.3)}
.logo-panel h1{margin:0;font-size:54px;line-height:.88;letter-spacing:.02em}
.logo-panel p{margin:4px 0 0;font-size:15px;font-weight:700;opacity:.88}
.paper-card,.tool-card{
  background-image:url("./assets/paper_texture.svg"), linear-gradient(180deg, rgba(249,238,209,.97), rgba(238,221,176,.96));
  background-size:220px 220px, auto;
  background-repeat:repeat, no-repeat;
  border:2px solid rgba(118,82,39,.35);border-radius:22px;box-shadow:var(--shadow), inset 0 1px 0 rgba(255,250,236,.65);
}
.paper-card{padding:16px 18px;pointer-events:none}
.purple-card{
  background-image:url("./assets/paper_texture.svg"), linear-gradient(180deg, rgba(128,71,161,.97), rgba(103,54,132,.96));
  background-size:220px 220px, auto;
  border:2px solid rgba(255,237,179,.24);border-radius:22px;box-shadow:var(--shadow);padding:16px 18px;
  color:#fff7e2;pointer-events:none;
}
.label{font-size:14px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:#86623b}
.label.light{color:#eddff8}
.big{font-size:56px;line-height:1;font-weight:700;color:#583714;margin-top:8px}
.big.light{color:#fffaf1}
.sub{margin-top:6px;font-size:15px;font-weight:700;color:#8a673e}
.chain-card .big{font-size:50px}

/* Bloom Chain contrast polish: keep the card style, but make the light text read clearly over the purple texture. */
.chain-card{
  background-image:url("./assets/paper_texture.svg"), linear-gradient(180deg, rgba(113,48,150,.99), rgba(79,34,111,.98));
  border-color:rgba(255,239,184,.36);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -18px 28px rgba(51,20,73,.24);
}
.chain-card .label.light{
  color:#fff1bd;
  text-shadow:0 2px 3px rgba(42,20,58,.72), 0 0 10px rgba(42,20,58,.45);
}
.chain-card .big.light{
  color:#fffdf4;
  text-shadow:0 3px 4px rgba(42,20,58,.76), 0 0 12px rgba(42,20,58,.42);
}
.chain-card .meter span{
  background:rgba(255,245,204,.18);
  border-color:rgba(255,245,204,.32);
}
.meter{display:flex;gap:10px;margin-top:14px}
.meter span{flex:1;height:10px;border-radius:999px;background:rgba(245,205,100,.22);border:1px solid rgba(255,240,178,.2)}
.meter span.active{background:linear-gradient(180deg,#ffd56b,#e7a72e)}
.time-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:10px}
.dial{width:64px;height:64px;border-radius:50%;border:4px solid #a57540;background:conic-gradient(#f0b748 0 0deg,#e8dbba 0 360deg);position:relative;overflow:hidden}
.dial::after{content:"";position:absolute;inset:10px;border-radius:50%;background:#f8efd7;border:2px solid rgba(122,86,45,.18)}
.dial span{position:absolute;inset:0;border-radius:50%;background:conic-gradient(#f0b748 var(--fill, 65%), rgba(0,0,0,0) 0)}
.quest-progress{margin-top:12px;padding:10px 14px;border-radius:16px;background:#7952a1;color:#fff8e1;font-size:28px;font-weight:700;display:inline-block}
.target-row{display:flex;align-items:center;gap:14px;margin-top:10px}
.target-swatch{width:64px;height:64px;border-radius:18px;border:3px solid rgba(104,76,33,.3);box-shadow:inset 0 0 0 3px rgba(255,255,255,.3)}
.tool-card{
  position:relative;padding:16px 52px 16px 68px;text-align:left;min-height:102px;cursor:pointer;color:var(--ink);
}
.tool-card .tool-icon{position:absolute;left:18px;top:26px;font-size:30px;line-height:1;color:#6f4c24}
.tool-card strong{display:block;font-size:28px;line-height:1.02;color:#6a4824}
.tool-card small{display:block;margin-top:6px;font-size:15px;line-height:1.15;color:#85613b;font-weight:700}
.tool-card em{position:absolute;right:14px;top:14px;min-width:34px;height:34px;border-radius:999px;background:#78a947;color:#fff;display:grid;place-items:center;font-style:normal;font-size:18px;font-weight:700}
.tool-card.active{outline:4px solid rgba(247,204,93,.78);background:#fff0c9}
.tool-card.clear{min-height:84px;padding-left:68px}
.round-btn{
  width:56px;height:56px;border-radius:999px;border:2px solid rgba(255,236,194,.28);
  background:linear-gradient(180deg, rgba(89,64,48,.92), rgba(62,43,31,.96));color:#f7e7c0;font-size:26px;cursor:pointer;
  box-shadow:0 10px 22px rgba(20,12,7,.24)
}
.round-btn:hover,.tool-card:hover{transform:translateY(-1px)}
.round-btn:active,.tool-card:active{transform:translateY(1px)}
dialog{border:0;padding:0;background:transparent}
dialog::backdrop{background:rgba(18,20,12,.42);backdrop-filter:blur(6px)}
.modal-card{
  width:min(720px, calc(100vw - 30px));padding:28px;border-radius:28px;background:#f7ecd1;border:3px solid #8b6235;
  box-shadow:0 28px 70px rgba(0,0,0,.34);text-align:center;color:#5a3f20;
}
.modal-card h2{font-size:48px;line-height:1;margin:0 0 12px}
.modal-card p{margin:0 auto 14px;max-width:620px;font-size:19px;line-height:1.5;font-weight:700}
.modal-card ul{display:inline-block;text-align:left;font-size:17px;line-height:1.55;font-weight:700;color:#725230;margin:0 0 18px}
.modal-card button{
  border:0;border-radius:20px;padding:16px 24px;background:linear-gradient(180deg,#f3c245,#de8b37);color:#553717;font-size:24px;font-weight:700;
  box-shadow:0 8px 0 #8c5726;cursor:pointer;
}
.results{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}
.results div{background:#ebdbb7;border-radius:18px;padding:14px;border:2px solid rgba(125,88,43,.28)}
.results span{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.04em;font-weight:700;color:#7d592f}
.results strong{font-size:42px;line-height:1;color:#5f3e1f}
@media (max-width: 1200px){
  .left-rail{width:260px}.right-rail{width:240px}
  .logo-panel h1{font-size:44px}.tool-card strong{font-size:23px}.bottom-banner{width:min(900px, calc(100vw - 26px))}
}
@media (max-width: 860px){
  .left-rail{left:10px;top:10px;width:220px;gap:8px}
  .right-rail{right:10px;top:74px;width:190px;gap:8px}
  .top-right-controls{right:10px;top:10px;gap:8px}
  .round-btn{width:46px;height:46px;font-size:22px}
  .logo-panel h1{font-size:36px}.logo-panel p{font-size:12px}.bee-badge{width:40px;height:40px;font-size:24px}
  .paper-card,.purple-card{padding:10px 12px;border-radius:16px}
  .big{font-size:34px}.chain-card .big{font-size:32px}.quest-progress{font-size:20px;padding:8px 12px}
  .tool-card{min-height:76px;padding:12px 40px 12px 48px;border-radius:16px}
  .tool-card .tool-icon{left:12px;top:20px;font-size:22px}
  .tool-card strong{font-size:18px}.tool-card small{font-size:11px}.tool-card em{min-width:24px;height:24px;font-size:12px;right:8px;top:8px}
  .bottom-banner{left:10px;right:10px;transform:none;width:auto;bottom:10px;padding:10px 14px;border-radius:18px;gap:10px}
  .banner-left strong{font-size:19px}.banner-left span,#objectiveText,.banner-right{font-size:12px}
}
@media (max-width: 680px), (orientation: portrait){
  .left-rail{left:8px;top:8px;width:180px}
  .right-rail{left:8px;right:8px;bottom:86px;top:auto;width:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
  .top-right-controls{right:8px;top:8px}
  .paper-card.score-card,.purple-card.chain-card,.paper-card.time-card,.paper-card.quest-card{display:none}
  .tool-card{padding:10px 8px 8px 8px;min-height:76px;text-align:center}
  .tool-card .tool-icon{position:static;display:block;font-size:22px;margin-bottom:4px}
  .tool-card strong{font-size:14px}.tool-card small{display:none}.tool-card em{right:6px;top:6px}
  .target-card{grid-column:1 / -1;pointer-events:auto}
  .bottom-banner{bottom:8px;padding:8px 10px;align-items:flex-start;gap:8px}
  .banner-left{gap:8px}.bee-mini{font-size:22px}.banner-left strong{font-size:15px}.banner-right{display:none}
  .logo-panel{padding:10px 12px}.logo-panel h1{font-size:26px}.logo-panel p{display:none}
  .modal-card h2{font-size:34px}.modal-card p,.modal-card ul{font-size:15px}
  .results strong{font-size:28px}
}

.orders-list{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-top:12px;
}
.order-btn{
  width:100%;
  border:2px solid rgba(118,82,39,.18);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,247,227,.98), rgba(244,229,191,.98));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  color:var(--ink);
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  box-shadow:0 6px 14px rgba(45,28,10,.09);
}
.order-btn:hover{transform:translateY(-1px);box-shadow:0 10px 18px rgba(45,28,10,.12)}
.order-btn.active{border-color:rgba(225,170,61,.85); box-shadow:0 0 0 3px rgba(248,215,112,.45),0 12px 22px rgba(45,28,10,.16)}
.order-btn .left{
  display:flex; align-items:center; gap:10px; min-width:0;
}
.order-chip{
  width:34px; height:34px; border-radius:999px; flex:0 0 34px;
  border:2px solid rgba(120,84,41,.25);
  box-shadow:inset 0 2px 6px rgba(255,255,255,.25);
}
.order-meta{display:flex; flex-direction:column; align-items:flex-start; min-width:0}
.order-title{font-weight:700; font-size:16px; line-height:1.1}
.order-sub{font-size:12px; color:#84623c; font-weight:700}
.order-bonus{font-weight:700; color:#7a531e; font-size:15px; white-space:nowrap}
.active-order-row{margin-top:14px; padding-top:12px; border-top:1px solid rgba(118,82,39,.16)}
.prep-line{margin-top:10px; font-size:14px}
#prepActions{font-weight:700; color:#6a4824}
@media (max-width:780px){
  .orders-list{grid-template-columns:1fr}
}
.target-card{pointer-events:auto}
.target-card *{pointer-events:auto}

.tool-card.disabled{opacity:.55; filter:saturate(.75);}
.tool-card.disabled em{background:#9f9b82;}

/* Mobile / portrait cleanup pass: keep controls compact so the board remains playable. */
@media (max-width: 680px), (orientation: portrait){
  .left-rail{
    left:8px;
    top:8px;
    width:min(190px, 48vw);
    gap:6px;
  }
  .logo-panel{padding:8px 10px;border-radius:16px;}
  .logo-row{gap:8px;}
  .bee-badge{width:34px;height:34px;font-size:20px;}
  .logo-panel h1{font-size:26px;line-height:.88;}
  .logo-panel p{display:none;}
  .top-right-controls{right:8px;top:8px;gap:6px;}
  .round-btn{width:38px;height:38px;font-size:19px;}

  .right-rail{
    left:8px;
    right:8px;
    bottom:72px;
    top:auto;
    width:auto;
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:6px;
    align-items:end;
  }

  .target-card{
    grid-column:1 / -1;
    padding:7px 9px;
    border-radius:14px;
    max-height:104px;
    overflow:hidden;
    pointer-events:auto;
  }
  .target-card .label{font-size:10px;line-height:1;}
  .orders-list{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:5px;
    margin-top:6px;
  }
  .order-btn{
    min-width:0;
    padding:5px 6px;
    min-height:38px;
    border-radius:12px;
    gap:4px;
  }
  .order-chip{width:20px;height:20px;flex:0 0 20px;}
  .order-title{font-size:10.5px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:54px;}
  .order-sub{display:none;}
  .order-bonus{font-size:10.5px;}
  .active-order-row{display:none;}
  .prep-line{margin-top:5px;font-size:11px;text-align:center;}

  .tool-card{
    min-height:58px;
    padding:7px 6px 6px;
    border-radius:13px;
    text-align:center;
  }
  .tool-card .tool-icon{
    position:static;
    display:block;
    font-size:18px;
    margin:0 0 2px;
  }
  .tool-card strong{font-size:11.5px;line-height:1.05;}
  .tool-card small{display:none;}
  .tool-card em{
    right:4px;
    top:4px;
    min-width:18px;
    height:18px;
    font-size:10px;
  }

  .bottom-banner{
    left:8px;
    right:8px;
    bottom:5px;
    transform:none;
    width:auto;
    padding:7px 9px;
    border-radius:14px;
    gap:8px;
    align-items:flex-start;
  }
  .bee-mini{font-size:19px;}
  .banner-left{gap:7px;}
  .banner-left strong{font-size:13px;line-height:1.1;}
  .banner-left span,#objectiveText{font-size:10.5px;line-height:1.15;}
  .banner-right{display:none;}
}


/* Final mobile/layout polish */
dialog{
  margin:auto;
  max-width:calc(100vw - 24px);
  max-height:calc(100vh - 24px);
}
dialog[open]{
  display:flex;
  align-items:center;
  justify-content:center;
}
.modal-card{
  max-height:min(88vh, 860px);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
#startBtn{min-height:56px;}

@media (max-width: 680px), (orientation: portrait){
  html,body{overflow:hidden;}
  .left-rail{
    left:8px;
    top:8px;
    width:min(160px, 44vw);
    gap:6px;
  }
  .logo-panel{
    padding:8px 10px;
    border-radius:16px;
  }
  .logo-row{gap:8px;align-items:center;}
  .bee-badge{width:34px;height:34px;font-size:19px;}
  .logo-panel h1{font-size:23px;line-height:.92;}
  .top-right-controls{top:8px;right:8px;gap:6px;}
  .round-btn{width:36px;height:36px;font-size:18px;}

  .right-rail{
    left:8px;
    right:8px;
    bottom:74px;
    top:auto;
    width:auto;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:6px;
    z-index:5;
  }
  .target-card{
    grid-column:1 / -1;
    padding:7px 8px;
    border-radius:14px;
    min-height:0;
    max-height:122px;
    overflow:hidden;
  }
  .target-card .label{font-size:10px;line-height:1;}
  .orders-list{grid-template-columns:repeat(3, minmax(0,1fr));gap:5px;margin-top:5px;}
  .order-btn{padding:5px 6px;min-height:36px;border-radius:12px;gap:4px;}
  .order-chip{width:18px;height:18px;flex:0 0 18px;}
  .order-title{font-size:10px;max-width:48px;}
  .order-bonus{font-size:10px;}
  .prep-line{margin-top:4px;font-size:10px;}

  .tool-card{
    min-height:64px;
    padding:8px 4px 6px;
    border-radius:14px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:2px;
    overflow:hidden;
  }
  .tool-card .tool-icon{font-size:18px;margin:0;}
  .tool-card strong{font-size:11px;line-height:1.05;text-align:center;}
  .tool-card small{display:none;}
  .tool-card em{right:4px;top:4px;min-width:18px;height:18px;font-size:10px;}
  .tool-card.clear{padding:8px 4px 6px;min-height:64px;}
  .tool-card.clear strong{font-size:10.5px;}

  .bottom-banner{
    left:8px;
    right:8px;
    bottom:6px;
    width:auto;
    transform:none;
    padding:7px 8px;
    border-radius:14px;
    min-height:56px;
    z-index:4;
  }
  .banner-left{gap:6px;align-items:flex-start;}
  .bee-mini{font-size:17px;line-height:1;}
  .banner-left strong{font-size:11.5px;line-height:1.08;}
  .banner-left span, #objectiveText{font-size:9.5px;line-height:1.12;}

  dialog[open]{
    align-items:flex-start;
    padding:14px 8px 12px;
  }
  .modal-card{
    width:min(100%, 460px);
    max-height:calc(100vh - 26px);
    padding:16px 14px 14px;
    border-radius:18px;
    text-align:left;
  }
  .modal-card h2{font-size:20px;line-height:1.05;margin:0 0 10px;}
  .modal-card p{font-size:13px;line-height:1.35;margin:0 0 10px;max-width:none;}
  .modal-card ul{display:block;font-size:12px;line-height:1.35;padding-left:18px;margin:0 0 12px;}
  .modal-card button{
    display:block;
    width:100%;
    font-size:20px;
    padding:14px 16px;
    position:sticky;
    bottom:0;
    margin-top:8px;
  }
}


/* Shorter landscape viewport tuning for the chosen working build */
@media (max-height: 920px) and (orientation: landscape){
  .left-rail{width:268px;gap:10px;}
  .right-rail{width:238px;top:82px;gap:8px;}
  .paper-card,.purple-card{padding:12px 14px;border-radius:18px;}
  .logo-panel{padding:12px 14px;}
  .logo-panel h1{font-size:40px;}
  .logo-panel p{font-size:12px;}
  .bee-badge{width:42px;height:42px;font-size:22px;}
  .big{font-size:42px;}
  .chain-card .big{font-size:36px;}
  .quest-progress{font-size:22px;padding:8px 12px;}
  .tool-card{min-height:74px;padding:10px 40px 10px 52px;border-radius:18px;}
  .tool-card .tool-icon{left:14px;top:17px;font-size:22px;}
  .tool-card strong{font-size:20px;line-height:1.02;}
  .tool-card small{font-size:11px;line-height:1.1;}
  .tool-card em{min-width:26px;height:26px;font-size:13px;right:8px;top:8px;}
  .tool-card.clear{min-height:68px;padding-left:52px;}
  .bottom-banner{width:min(980px, calc(100vw - 40px));padding:9px 14px;bottom:10px;}
  .banner-left strong{font-size:18px;}
  .banner-left span,#objectiveText,.banner-right{font-size:12px;}
}

@media (max-height: 800px) and (orientation: landscape){
  .left-rail{width:238px;gap:8px;}
  .right-rail{width:214px;top:74px;gap:7px;}
  .paper-card,.purple-card{padding:10px 12px;border-radius:16px;}
  .logo-panel{padding:10px 12px;}
  .logo-panel h1{font-size:34px;}
  .logo-panel p{font-size:11px;}
  .bee-badge{width:38px;height:38px;font-size:20px;}
  .big{font-size:34px;}
  .chain-card .big{font-size:30px;}
  .quest-progress{font-size:18px;padding:7px 10px;}
  .tool-card{min-height:64px;padding:9px 34px 8px 46px;border-radius:16px;}
  .tool-card .tool-icon{left:12px;top:15px;font-size:18px;}
  .tool-card strong{font-size:17px;}
  .tool-card small{font-size:10px;line-height:1.05;}
  .tool-card em{min-width:22px;height:22px;font-size:11px;right:6px;top:6px;}
  .tool-card.clear{min-height:60px;padding-left:46px;}
  .bottom-banner{width:min(920px, calc(100vw - 32px));padding:7px 12px;bottom:8px;border-radius:16px;}
  .banner-left strong{font-size:15px;line-height:1.05;}
  .banner-left span,#objectiveText,.banner-right{font-size:10.5px;line-height:1.1;}
}


/* Shorter landscape viewport tuning for the chosen working build */
@media (max-height: 920px) and (orientation: landscape){
  .left-rail{width:268px;gap:10px;}
  .right-rail{width:238px;top:82px;gap:8px;}
  .paper-card,.purple-card{padding:12px 14px;border-radius:18px;}
  .logo-panel{padding:12px 14px;}
  .logo-panel h1{font-size:40px;}
  .logo-panel p{font-size:12px;}
  .bee-badge{width:42px;height:42px;font-size:22px;}
  .big{font-size:42px;}
  .chain-card .big{font-size:36px;}
  .quest-progress{font-size:22px;padding:8px 12px;}
  .tool-card{min-height:74px;padding:10px 40px 10px 52px;border-radius:18px;}
  .tool-card .tool-icon{left:14px;top:17px;font-size:22px;}
  .tool-card strong{font-size:20px;line-height:1.02;}
  .tool-card small{font-size:11px;line-height:1.1;}
  .tool-card em{min-width:26px;height:26px;font-size:13px;right:8px;top:8px;}
  .tool-card.clear{min-height:68px;padding-left:52px;}
  .bottom-banner{width:min(980px, calc(100vw - 40px));padding:9px 14px;bottom:10px;}
  .banner-left strong{font-size:18px;}
  .banner-left span,#objectiveText,.banner-right{font-size:12px;}
}

@media (max-height: 800px) and (orientation: landscape){
  .left-rail{width:238px;gap:8px;}
  .right-rail{width:214px;top:74px;gap:7px;}
  .paper-card,.purple-card{padding:10px 12px;border-radius:16px;}
  .logo-panel{padding:10px 12px;}
  .logo-panel h1{font-size:34px;}
  .logo-panel p{font-size:11px;}
  .bee-badge{width:38px;height:38px;font-size:20px;}
  .big{font-size:34px;}
  .chain-card .big{font-size:30px;}
  .quest-progress{font-size:18px;padding:7px 10px;}
  .tool-card{min-height:64px;padding:9px 34px 8px 46px;border-radius:16px;}
  .tool-card .tool-icon{left:12px;top:15px;font-size:18px;}
  .tool-card strong{font-size:17px;}
  .tool-card small{font-size:10px;line-height:1.05;}
  .tool-card em{min-width:22px;height:22px;font-size:11px;right:6px;top:6px;}
  .tool-card.clear{min-height:60px;padding-left:46px;}
  .bottom-banner{width:min(920px, calc(100vw - 32px));padding:7px 12px;bottom:8px;border-radius:16px;}
  .banner-left strong{font-size:15px;line-height:1.05;}
  .banner-left span,#objectiveText,.banner-right{font-size:10.5px;line-height:1.1;}
}



/* Right-rail safety mode, enabled by the resize code only if the wide layout would run below the viewport. */
body.compact-right-rail .right-rail{
  gap:6px;
}
body.compact-right-rail .right-rail .target-card{
  padding:8px 10px;
  border-radius:16px;
}
body.compact-right-rail .right-rail .orders-list{
  gap:5px;
  margin-top:6px;
}
body.compact-right-rail .right-rail .order-btn{
  padding:5px 6px;
  border-radius:12px;
  min-height:34px;
  gap:5px;
}
body.compact-right-rail .right-rail .order-chip{
  width:20px;
  height:20px;
  flex:0 0 20px;
}
body.compact-right-rail .right-rail .order-title{
  font-size:11px;
  line-height:1.05;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
body.compact-right-rail .right-rail .order-sub{display:none;}
body.compact-right-rail .right-rail .order-bonus{font-size:11px;}
body.compact-right-rail .right-rail .active-order-row{display:none;}
body.compact-right-rail .right-rail .prep-line{
  margin-top:5px;
  font-size:11px;
  text-align:center;
}
body.compact-right-rail .right-rail .tool-card{
  min-height:56px;
  padding:8px 30px 8px 42px;
  border-radius:15px;
}
body.compact-right-rail .right-rail .tool-card .tool-icon{
  left:11px;
  top:14px;
  font-size:18px;
}
body.compact-right-rail .right-rail .tool-card strong{
  font-size:16px;
  line-height:1.02;
}
body.compact-right-rail .right-rail .tool-card small{
  margin-top:3px;
  font-size:9.5px;
  line-height:1.05;
}
body.compact-right-rail .right-rail .tool-card em{
  right:6px;
  top:6px;
  min-width:22px;
  height:22px;
  font-size:11px;
}
body.compact-right-rail .right-rail .tool-card.clear{
  min-height:52px;
  padding-left:42px;
}


/* Requested wide-screen tool-card polish: the three prep/action cards are a touch larger, while compact mode still prevents bottom clipping. */
@media (orientation: landscape) and (min-width: 861px){
  .right-rail .tool-card:not(.clear){
    min-height:108px;
    padding:18px 54px 18px 70px;
  }
  .right-rail .tool-card:not(.clear) .tool-icon{
    left:19px;
    top:29px;
    font-size:31px;
  }
  .right-rail .tool-card:not(.clear) strong{font-size:29px;}
  .right-rail .tool-card:not(.clear) small{font-size:15.5px;}
}
body.compact-right-rail .right-rail .tool-card:not(.clear){
  min-height:62px;
  padding:9px 31px 9px 44px;
}
body.compact-right-rail .right-rail .tool-card:not(.clear) .tool-icon{
  left:11px;
  top:16px;
  font-size:19px;
}
body.compact-right-rail .right-rail .tool-card:not(.clear) strong{font-size:17px;}
body.compact-right-rail .right-rail .tool-card:not(.clear) small{font-size:10px;}
@media (max-height: 650px) and (orientation: landscape){
  body.compact-right-rail .right-rail .tool-card:not(.clear){
    min-height:54px;
    padding:7px 29px 7px 39px;
  }
  body.compact-right-rail .right-rail .tool-card:not(.clear) .tool-icon{
    left:9px;
    top:14px;
    font-size:16px;
  }
  body.compact-right-rail .right-rail .tool-card:not(.clear) strong{font-size:14.5px;}
  body.compact-right-rail .right-rail .tool-card:not(.clear) small{font-size:8.7px;}
}