/* This canvas belongs to a UI card, never to the resizable world viewport. */
#screen #companion-chat {z-index:60;background:linear-gradient(145deg,#143e38f5,#071e24f7);border-color:#b8b981;border-radius:14px!important;color:#eff9df;}
body.emerald-game #screen :is(#chat-toggle,#companion-chat-toggle) {top:calc(var(--presence-bottom,48px) + 8px);min-height:34px;}
body.emerald-game #screen #chat-toggle {left:8px;right:auto;}
body.emerald-game #screen #companion-chat-toggle {right:8px;left:auto;}
#screen #companion-chat .companion-heading {background:#092621;padding:10px 12px;color:#f7e5aa;border-bottom:1px solid #d0b97655;}
#screen #companion-chat .companion-section {position:relative!important;inset:auto!important;display:block;width:auto!important;max-width:none!important;max-height:none!important;margin:0!important;border:0!important;background:transparent!important;color:#f1f8e4;padding:12px 14px 28px;box-sizing:border-box;}
#screen #companion-chat .companion-section[hidden],#screen #companion-chat [hidden] {display:none!important;}
#screen #companion-chat .companion-conversation {display:flex;}
#screen #companion-chat nav {background:#0b2928;}
#screen #companion-chat button {border-radius:8px!important;min-height:38px;padding:7px 10px;margin:0;font:600 13px/1.3 system-ui;touch-action:manipulation;background:#1c4946;border-color:#85c1ad66;transition:background .15s,box-shadow .15s;}
#screen #companion-chat button:hover {background:#2a6456;}
#screen #companion-chat button:focus-visible,#screen #companion-chat canvas:focus-visible {outline:2px solid #ffe19b;outline-offset:2px;}
#screen #companion-chat button[aria-pressed=true] {background:#387e62;border-color:#e2d28b;box-shadow:inset 0 0 12px #9ce4a526;}
#screen #companion-chat .companion-name {text-align:center;font:700 20px system-ui;color:#f3e1a7;margin:8px 0;}
#screen #companion-chat .companion-progress {text-align:center;font:13px/1.65 system-ui;color:#d9ebdb;}
#screen #companion-chat .companion-friendship {height:5px;border-radius:9px;background:#031a21;margin:12px 12%;overflow:hidden;}
#screen #companion-chat .companion-friendship span {height:100%;display:block;background:linear-gradient(90deg,#63d6aa,#f3d682);transition:width .4s;}
#screen #companion-chat .companion-pet {display:grid;place-items:center;height:150px;min-height:150px;background:radial-gradient(ellipse at 50% 75%,#a9d2832b,transparent 55%);border-radius:14px;overflow:hidden;}
#screen #companion-chat canvas.companion-breath {display:block!important;position:static!important;width:min(200px,100%)!important;height:150px!important;max-width:200px!important;max-height:none!important;aspect-ratio:4/3!important;object-fit:contain;image-rendering:pixelated;animation:companion-hover 3s ease-in-out infinite;}
#screen #companion-chat .companion-care-actions {display:grid;grid-template-columns:1fr 1fr;gap:8px;}
#screen #companion-chat .companion-care-actions button {background:#31614b;border-color:#c3b57880;min-height:44px;}
#screen #companion-chat .companion-notice {text-align:center;color:#f5df9b;min-height:20px;}
#screen #companion-chat .companion-care-rules {font:12px/1.5 system-ui;color:#ccdccd;text-align:center;max-width:42em;margin:12px auto 0;}
#screen #companion-chat .companion-berries {display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:6px;padding:10px;border:1px solid #86b89744;border-radius:10px;background:#061c20;}
#screen #companion-chat .companion-resize {width:28px;height:28px;min-height:28px;padding:2px;border-radius:8px 0 0 0!important;}
#screen #companion-chat .companion-arcade h3 {font:700 20px system-ui;color:#f7e4a9;margin:4px 0;}
#screen #companion-chat .arcade-subtitle {color:#a6c7ba;font-size:12px;margin-bottom:14px;}
#screen #companion-chat .arcade-choices {display:grid;grid-template-columns:1fr 1fr;gap:6px;}
#screen #companion-chat .arcade-choices button:first-child {grid-column:1/-1;min-height:48px;font-size:15px;}
#screen #companion-chat .arcade-options {display:flex;flex-wrap:wrap;gap:8px;align-items:end;margin:12px 0;}
#screen #companion-chat .arcade-options label {display:flex;flex-direction:column;gap:3px;font-size:11px;flex:1;}
#screen #companion-chat select {min-height:38px;border:1px solid #a4c2a6;background:#0c2a2b;color:#fff;border-radius:7px;padding:6px;font:14px system-ui;}
#screen #companion-chat .arcade-play {background:linear-gradient(120deg,#ecce7d,#bc9e51);color:#14382c;}
#screen #companion-chat .arcade-help {font:12px/1.5 system-ui;color:#bfd8cd;}
#screen #companion-chat .arcade-result {color:#ffdf8c;font-weight:700;}
#screen #companion-chat .arcade-result:empty {display:none;}
#screen #companion-chat:has([data-playing=true]) .companion-heading {padding:4px 10px;}
#screen #companion-chat:has([data-playing=true]) nav {padding:4px 6px;}
#screen #companion-chat .companion-arcade[data-playing=true] .arcade-options {margin:4px 0;}
#screen #companion-chat .arcade-hud {display:flex;justify-content:space-between;gap:6px;padding:10px 4px;font:12px system-ui;color:#f0d989;}
#screen #companion-chat canvas.companion-minigame {position:static!important;display:block;width:min(456px,100%)!important;height:auto!important;max-width:456px!important;max-height:none!important;aspect-ratio:19/17!important;object-fit:contain;margin:auto;border:1px solid #b7c79766;border-radius:10px!important;touch-action:none;box-shadow:0 8px 24px #0004;}
#screen #companion-chat .arcade-pad {display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,40px);justify-content:center;gap:4px;margin:12px auto 0;}
#screen #companion-chat .arcade-pad button {font-size:23px;padding:0;touch-action:none;}
#screen #companion-chat .arcade-pad [data-direction=up] {grid-column:2;}
#screen #companion-chat .arcade-pad [data-direction=left] {grid-column:1;grid-row:2;}
#screen #companion-chat .arcade-pad [data-direction=down] {grid-column:2;grid-row:2;}
#screen #companion-chat .arcade-pad [data-direction=right] {grid-column:3;grid-row:2;}
#screen #companion-chat .arcade-elements {display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0;}
#screen #companion-chat .arcade-elements button {min-height:85px;}
#screen #companion-chat .arcade-ranking {padding:12px;border:1px solid #ccb97177;border-radius:10px;background:#061d23;margin-top:14px;}
#screen #companion-chat .arcade-ranking h4 {margin:0 0 10px;color:#eedc9b;font:700 12px/1.5 system-ui;}
#screen #companion-chat .arcade-ranking ol {list-style:none;padding:0;margin:0;}
#screen #companion-chat .arcade-ranking li {display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #afd5c51c;padding:8px 4px;}
#screen #companion-chat .arcade-ranking li.is-self {color:#ffdd84;background:#245d4533;}
#screen #companion-chat .arcade-ranking li span {overflow-wrap:anywhere;}
#screen #companion-chat .companion-arcade[data-playing=true] :is(h3,.arcade-subtitle,.arcade-choices,.arcade-help,.arcade-options label,.arcade-play) {display:none;}
@keyframes companion-hover {50%{transform:translateY(-4px);}}
@media(max-width:760px),(pointer:coarse){#screen #companion-chat .companion-section {padding:8px 10px 28px;}#screen #companion-chat .arcade-hud {font-size:11px;}}
@media(prefers-reduced-motion:reduce){#screen #companion-chat canvas.companion-breath {animation:none;}}
@media(max-width:760px),(any-pointer:coarse),(orientation:landscape) and (max-height:600px) and (max-width:1100px){
  html:has(#companion-chat:not([hidden])),body:has(#companion-chat:not([hidden])) {overflow:hidden!important;}

  body:has(#companion-chat:not([hidden])) #touch-controls {visibility:hidden!important;pointer-events:none!important;}
  body:has(#companion-chat:not([hidden])) :is(.game-frame-ornaments,#exit-immersive-btn) {visibility:hidden!important;}
  #screen #companion-chat .arcade-pad {position:sticky;bottom:-20px;background:#0a2629ed;padding:6px;border-radius:10px;}
}
@media(orientation:landscape) and (max-height:520px){
  #screen #companion-chat .companion-heading {padding:3px 10px;}
  #screen #companion-chat nav {padding:3px 6px;}
  #screen #companion-chat .companion-arcade[data-playing=true][data-game=maze] {display:grid!important;grid-template-columns:minmax(0,1fr) 145px;grid-template-rows:36px minmax(0,1fr);gap:4px 10px;overflow:hidden;padding-bottom:8px;}
  #screen #companion-chat .companion-arcade[data-playing=true][data-game=maze] :is(.arcade-result,.arcade-ranking) {display:none;}
  #screen #companion-chat .companion-arcade[data-playing=true][data-game=maze] .arcade-options {grid-column:2;grid-row:1;margin:0;}
  #screen #companion-chat .companion-arcade[data-playing=true][data-game=maze] .arcade-options>button:not(:last-child) {display:none;}
  #screen #companion-chat .companion-arcade[data-playing=true][data-game=maze] .arcade-hud {grid-column:1;grid-row:1;}
  #screen #companion-chat .companion-arcade[data-playing=true][data-game=maze] canvas {grid-column:1;grid-row:2;width:100%!important;height:100%!important;max-height:100%!important;max-width:none!important;border:0;}
  #screen #companion-chat .companion-arcade[data-playing=true][data-game=maze] .arcade-pad {grid-column:2;grid-row:2;position:static;align-self:center;margin:0;padding:0;}
}