/* Tactile game chrome. Focused panels and their layout remain unchanged. */
body.rich-game{font-family:'Trebuchet MS',Arial,sans-serif;font-variant-numeric:tabular-nums}
.rich-game header{background-image:linear-gradient(180deg,#ffffff0c,transparent 48%,#00000019);box-shadow:0 3px 12px #172b2d29;position:relative;z-index:3}
.rich-game header:after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#f4d39b88,transparent);pointer-events:none}
.rich-game button{transition:background-color .13s,border-color .13s,box-shadow .13s;touch-action:manipulation}
.rich-game button:not(:disabled):hover{box-shadow:inset 0 1px #ffffff30,0 2px 5px #172b2d16}
.rich-game button:not(:disabled):active{box-shadow:inset 0 2px 5px #172b2d30}
.rich-game #dock,.rich-game .play-dock{background-image:linear-gradient(180deg,#ffffff22,transparent 35%,#172b2d13);border-top:3px solid color-mix(in srgb,var(--deck-accent,var(--green,#926d42)) 55%,var(--deck-bg,#e9dfc7));box-shadow:0 -3px 14px #172b2d25}
.rich-game #dock button,.rich-game .play-dock button{border-radius:5px;background-image:linear-gradient(180deg,#ffffff18,transparent 60%,#172b2d0a);box-shadow:inset 0 1px #ffffff38;border-bottom-width:3px;letter-spacing:.15px}
.rich-game #dock button[aria-current=page],.rich-game .play-dock button[aria-current=page]{box-shadow:inset 0 1px #ffffff40,0 1px 5px #172b2d30}
.rich-game aside,.rich-game .inspector{box-shadow:-5px 0 22px #142c2d24;border-left-width:2px}
.rich-game .panel-head,.rich-game .panel-heading,.rich-game .deck-heading,.rich-game .sheet-top{background-image:linear-gradient(180deg,#ffffff0d,transparent);border-bottom:1px solid color-mix(in srgb,currentColor 15%,transparent)}
.rich-game .card{box-shadow:0 2px 5px #29453e12,inset 0 1px #ffffff40;border-radius:5px}
.rich-game .card h3{letter-spacing:.1px}
.rich-game input,.rich-game select{box-shadow:inset 0 2px 4px #172b2d12}
.rich-game .stats-two>div{box-shadow:inset 0 1px 3px #243e3218;border-bottom:2px solid #768b5933}
.rich-game #world svg .hotspot{cursor:pointer}
.rich-game #world svg .hotspot:hover{filter:brightness(1.09)}
.rich-game #world svg .hotspot:focus-visible{outline:none;filter:drop-shadow(0 0 3px #fff0a7)}
.rich-game .ledger{border-top:1px solid #76846a55;box-shadow:inset 0 2px 5px #2843350c}
.rich-game dialog{border:2px solid #c5ae80;box-shadow:0 25px 90px #0c242b70,inset 0 0 0 4px #ffffff12}
.rich-game[data-game=airline-tycoon] header{background-color:#112f40;border-color:#cfac71}
.rich-game[data-game=supermarket-tycoon] header{background-color:#214b40;border-color:#d9a165}
.rich-game[data-game=bakery-tycoon] header{background-color:#3b4b3a;border-color:#c59253}
.rich-game[data-game=greenhouse-tycoon] header{background-color:#2f5143;border-color:#b7b780}
.rich-game[data-game=cinema-tycoon] header{background-color:#231f2a;border-color:#d7b472}
.rich-game[data-game=cinema-tycoon] .left{background:#101c26}
.rich-game[data-game=ironworks] header{background-color:#293d39;border-color:#c19453}
.rich-game[data-game=grand-hotel] header{background-color:#23473e;border-color:#bb9859}
.rich-game[data-game=toothpaste-tycoon] header{background-color:#255a56;border-color:#a8d2b5}
@media(prefers-reduced-motion:reduce){.rich-game button{transition:none}}
/* Put the name over the environment so the world receives the vertical space. */
.rich-game #business{position:relative}
.rich-game #business .world-title{position:absolute;inset:12px 18px auto;z-index:2;padding:0;pointer-events:none;align-items:flex-start}
.rich-game #business .world-title>div{padding:8px 12px;border-radius:4px;background:#fff3dbe8;color:#294a40;box-shadow:0 2px 7px #1a3d3a20;border:1px solid #baa77955}
.rich-game #business .world-title h1{font-size:23px;margin:2px 0}
.rich-game #business .world-title small{font-size:8px;letter-spacing:1.2px}
.rich-game #business .world-title>span{background:#f4eddae8;color:#355448}
.rich-game #business #world{overflow:hidden}
.rich-game #business #world svg{overflow:visible}
.rich-game #business .ledger{padding:7px 18px}
.rich-game #business .hint{margin:0;padding:5px}
@media(max-width:760px){.rich-game #business .world-title{inset:8px 10px auto}.rich-game #business .world-title>div{padding:5px 8px}.rich-game #business .world-title h1{font-size:18px}.rich-game #business .world-title small{display:none}}
/* Keep the mint factory's figures legible on its enamel header. */
.rich-game[data-game=toothpaste-tycoon] header{color:#fff3d7}
.rich-game[data-game=toothpaste-tycoon] .topstat>span{color:#c7d9cb}
.rich-game[data-game=toothpaste-tycoon] .tooth-mark{color:#8ed8bf}
.rich-game[data-game=toothpaste-tycoon] .clock button{color:#244e4b}
.rich-game[data-game=toothpaste-tycoon] .clock button.active{background:#edc785;color:#244e4b}
@media(min-width:801px){
.rich-game[data-game=toothpaste-tycoon] .jess{min-height:0;padding:10px 14px;bottom:14px}
.rich-game[data-game=toothpaste-tycoon] .jess-portrait{width:60px;height:78px}
.rich-game[data-game=toothpaste-tycoon] .jess h2{font-size:14px;margin-bottom:4px}
.rich-game[data-game=toothpaste-tycoon] .jess p{font-size:11px;line-height:1.35;max-width:850px}
.rich-game[data-game=toothpaste-tycoon] .jess-name{margin-bottom:4px}
.rich-game[data-game=toothpaste-tycoon] .jess button{margin-top:5px}
.rich-game[data-game=toothpaste-tycoon] .production-strip{bottom:126px}
.rich-game[data-game=toothpaste-tycoon] .scene-controls{bottom:188px}
}
@media(min-width:761px){
.rich-game[data-game=cinema-tycoon] .theater-heading{margin:10px 20px;height:40px}
.rich-game[data-game=cinema-tycoon] .theater-heading h1{font-size:20px;margin-top:3px}
.rich-game[data-game=cinema-tycoon] .theater-heading>span{display:none}
.rich-game[data-game=cinema-tycoon] .show-strip{position:absolute;right:20px;top:12px;width:40%;max-width:380px;min-width:250px;margin:0;z-index:1}
.rich-game[data-game=cinema-tycoon] .show-strip>div{padding:7px 10px;gap:8px}
.rich-game[data-game=cinema-tycoon] .show-strip b{font-size:15px}
.rich-game[data-game=cinema-tycoon] canvas{min-height:0;max-height:none;flex:1}
.rich-game[data-game=cinema-tycoon] .manager{padding:6px 0;margin:0 20px 6px;gap:10px}
.rich-game[data-game=cinema-tycoon] .manager small{display:none}
.rich-game[data-game=cinema-tycoon] .manager p{margin:0;font-size:10px;line-height:1.3}
.rich-game[data-game=cinema-tycoon] .manager button{padding:6px 9px}
.rich-game[data-game=cinema-tycoon] .day-ledger{padding:7px 20px}
.rich-game[data-game=cinema-tycoon] .day-ledger small{margin-bottom:3px}
}

@media(min-width:761px){.rich-game[data-game=cinema-tycoon] .theater-heading>div{max-width:calc(100% - max(40%,250px) - 35px)}.rich-game[data-game=cinema-tycoon] .theater-heading h1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}