/* Birthday Princess shell, retaining the original Game Boy Color geometry. */
html{background:#c7e8f8}
body{background-color:#c7e8f8;background-image:radial-gradient(#9dc8e655 .8px,transparent .8px);background-size:9px 9px;color:#526e9a}
body:before,body:after{content:'✦';position:fixed;pointer-events:none;color:#fff9dc;font-size:80px;text-shadow:3px 3px #a9cce8;z-index:-1}
body:before{left:12%;top:23%;transform:rotate(15deg)}body:after{right:12%;bottom:22%;font-size:55px;transform:rotate(-15deg)}
.challenge{color:#557297}.challenge b{color:#c27eaa}
.icon-button{background:#f5d8ec;border-color:#617fa8;color:#526f99;box-shadow:2px 2px #7e9abc;border-radius:5px}
.console{background:linear-gradient(108deg,#fbd6e8 0,#f3bed7 5%,#efb4cf 52%,#dda0c0 100%);border-color:#efcadd;box-shadow:inset 3px 3px 4px #fff0f4,inset -6px -4px 3px #b57c9e80,5px 11px 0 #b57b9e,8px 16px 0 #547ca82e,12px 20px 0 #83adcc30}
.shell-shine{border-color:#fff6f755}.hardware .console:before{background:#9e6e91;box-shadow:0 -1px 0 #f9dcec}
.bezel{background:#494d6b;box-shadow:inset 1px 1px 2px #8584a6,0 2px 1px #c38aac}
.screen-wrap{border-color:#2d314f}.console-logotype{color:#e4e3f0}
.console-brand{color:#627da4}.shell-wordmark{font-family:Georgia,serif;font-style:italic;font-size:18px;letter-spacing:-.3px}
.console-brand .limited{font-size:7px;letter-spacing:.7px;color:#7e5b83}
.dpad{filter:drop-shadow(2px 5px 2px #9e6c93)}.dpad-base{background:#dca4c3;box-shadow:inset 0 2px 3px #b57d9f,0 1px 0 #f6d8e8}
.dpad button,.d-center{background:linear-gradient(130deg,#8db9e4,#527cb5);color:#44689e;box-shadow:inset 1px 1px 1px #c4e1ff88}.d-center{box-shadow:none}
.d-center:after{box-shadow:inset 1px 1px 3px #416ca1,inset -1px -1px 2px #c3ddff88}
.action-buttons{background:#d29bb9;box-shadow:inset 0 2px 2px #bd82a3,0 1px 1px #f8dfef}
.round-button{background:linear-gradient(130deg,#9dc8ed,#719ed1 65%,#517db4);box-shadow:inset 2px 2px 3px #cce6ff,2px 4px 1px #466da1,2px 6px 4px #85638080}
.round-button:active,.round-button.pressed{box-shadow:inset 1px 1px 4px #547bad,1px 1px 0 #41689b}
.action-buttons>div>span,.pill-group span{color:#745a81}
.pill-group button{background:linear-gradient(#93b9dd,#567eae);box-shadow:0 3px 1px #92668a,inset 1px 1px 1px #d1e8fb}
.speaker i{background:#9d7598;box-shadow:1px 1px 0 #f5ccdf}.bottom-label{color:#886786;letter-spacing:1px}
.power-switch{border-color:#6687b2;background:#789ac0;box-shadow:inset 2px 2px 4px #48658e,2px 3px 0 #a9c5de}
.switch-thumb{background:repeating-linear-gradient(0deg,#b7d8f0 0 3px,#7fa2ca 3px 5px);box-shadow:inset 1px 1px 1px #e4f3ff,inset -1px -1px 1px #5a7faa,0 3px 2px #3f5f8a80}
.power-control,.hardware-hint{color:#597aa5}.hardware-hint svg{stroke:#6485b1}
.cartridge{border-color:#7297c2;background:linear-gradient(100deg,#bbdcf2,#8bb5df 22%,#79a4d0 80%,#accde9);box-shadow:inset 3px 3px 2px #def3ff,inset -4px -2px 2px #547fae,4px 5px 0 #6487a766;color:#5578a2}
.cartridge:before,.cartridge:after{background:repeating-linear-gradient(0deg,#618ab480 0 2px,#c2e0f150 2px 4px)}
.cartridge-emboss{border-color:#8cb4d8;box-shadow:inset 1px 1px 2px #5f84ae,1px 1px 0 #d8eeff;text-shadow:1px 1px #c9e3fa}
.cartridge-label{background:linear-gradient(140deg,#fff3fa,#f1d9ef 55%,#d1e7fa);border-color:#fff5fb;box-shadow:1px 2px 3px #517ba6}
.cartridge-label:after{height:5px;background:linear-gradient(90deg,#e8a5ce,#bbb3ea,#acd7ee)}
.cartridge .pokemon-logo{width:151px}.cartridge-logos{height:66px;margin-top:0}
.cartridge-title{color:#6672a3;font-size:16px;letter-spacing:.5px}.cartridge-edition{color:#ad6b99;font-size:8px;margin-top:6px}
.cartridge-grip{background:repeating-linear-gradient(#6689b080 0 2px,#d3ecff80 2px 4px)}
footer,footer b,.footer-controls,.footer-controls kbd{color:#637da2}footer>span:last-child{color:#9b729a}
dialog{background:#fff2fa;border-color:#8b9cc4;color:#536c98;box-shadow:8px 8px #718bb155}dialog::backdrop{background:#4b63846b}
.console-stage:before{background:#6f99bc2c}
@media(max-width:600px){.console-brand .limited{font-size:7px}.challenge{font-size:9px}}

/* Once switched on, fit the phone's available space around the console itself. */
@media(max-width:600px){
 .console-stage{width:calc(var(--hardware-width,456) * 1px * var(--gb-scale,1))}
 .hardware{left:calc(var(--hardware-shift,0) * 1px * var(--gb-scale,1))}
 body[data-playing="true"] .site-header{height:calc(52px + env(safe-area-inset-top,0px));padding:calc(6px + env(safe-area-inset-top,0px)) 12px 6px}
 body[data-playing="true"] .header-tools{flex-wrap:nowrap}
 body[data-playing="true"] .challenge,body[data-playing="true"] footer{display:none}
 body[data-playing="true"] main{padding:4px 8px calc(8px + env(safe-area-inset-bottom,0px));justify-content:center}
 body[data-playing="true"] .console-stage{margin:0}
 body[data-playing="true"] .console-stage:before{bottom:0;height:18px}
 body[data-playing="true"] .hardware{width:402px}
 body[data-playing="true"] .power-control{left:350px;top:146px;width:38px}
 body[data-playing="true"] .power-control>span,body[data-playing="true"] .power-control-title{display:none}
 body[data-playing="true"] .power-switch{width:38px;height:20px;border-radius:6px;padding:2px}
 body[data-playing="true"] .switch-thumb{width:15px;height:14px;left:2px;top:1px;transition:left .16s ease}
 body[data-playing="true"] .power-switch[aria-checked="true"] .switch-thumb{left:17px;top:1px}
}