html, body { margin: 0; height: 100%; background: #000; overflow: hidden; overscroll-behavior: none; }
body { font-family: CocolaniArial, Arial, "Liberation Sans", sans-serif; color: #fff; -webkit-user-select: none; user-select: none; }
#stage { position: fixed; left: 0; top: 0; width: 100%; height: 100%; touch-action: none; overflow: hidden; }
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#fields { position: absolute; inset: 0; pointer-events: none; }
.field {
  position: absolute; box-sizing: border-box; margin: 0; padding: 0 2px; border: 0; outline: 0;
  background: transparent; pointer-events: auto; -webkit-user-select: text; user-select: text; resize: none;
  caret-color: currentColor;
}
.field[hidden] { display: none; }
textarea.field { overflow-y: auto; line-height: 1.15; }
#loading {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #000; gap: 12px; text-align: center; padding: 16px; white-space: pre-line;
}
#loading[hidden] { display: none; }
#loading p { margin: 0; font-size: 18px; }
#loading p:empty { display: none; }
/* cocolani.swf's preloader: load_bar, 200 x 4 at (374.4, 384.6) of the 925 x 600 stage, #F9D02A at 90% */
#loadbar { position: absolute; left: 40.476%; top: 64.1%; height: 0.667%; width: 0; background: rgba(249, 208, 42, 0.902); }
#loading.error #loadbar { display: none; }
html.booting, html.booting body, html.booting.flash-stage, html.booting.flash-stage body { background: #000; }
html.booting .edge { visibility: hidden; }
.spinner { width: 42px; height: 42px; border: 4px solid rgba(255,255,255,.25); border-top-color: #9be15d; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.alert { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.45); z-index: 10; }
.alert .card { background: #f4ecd2; color: #3b2a12; border-radius: 12px; padding: 18px 20px; max-width: min(420px, 86vw); box-shadow: 0 8px 30px rgba(0,0,0,.5); }
.alert h2 { margin: 0 0 8px; font-size: 18px; }
.alert p { margin: 0 0 14px; font-size: 16px; white-space: pre-line; }
.alert .buttons { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.alert button, .menu button { font: inherit; font-size: 16px; border: 0; border-radius: 8px; padding: 8px 16px; background: #6b4a1f; color: #fff; cursor: pointer; }
.menu-shade { position: absolute; inset: 0; z-index: 11; }
.menu { position: absolute; display: flex; flex-direction: column; background: #f4ecd2; border-radius: 8px; padding: 4px; box-shadow: 0 6px 20px rgba(0,0,0,.5); max-height: 70vh; overflow-y: auto; }
.menu button { background: transparent; color: #3b2a12; text-align: start; border-radius: 6px; }
.menu button:hover { background: rgba(107,74,31,.15); }
#rotate {
  position: fixed; inset: 0; z-index: 40; display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; background: #0d2a14; text-align: center; padding: 16px;
}
#rotate p { margin: 0; font-size: 18px; }
#rotate .phone { width: 34px; height: 58px; border: 4px solid #9be15d; border-radius: 8px; animation: turn 2s ease-in-out infinite; }
@keyframes turn { 0%, 30% { transform: rotate(0deg); } 60%, 100% { transform: rotate(90deg); } }
@media (orientation: portrait) and (pointer: coarse) { #rotate { display: flex; } }

/* stage=flash: the frame's own edges carry on to the window's edges (no black bars, nothing over the stage) */
.edge { position: fixed; display: none; pointer-events: none; background-repeat: no-repeat; background-size: 100% 100%; }
.edge.on { display: block; }
.edge.live { filter: blur(3px); }
#edgeL { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAASwCAYAAADR+5tJAAAEVUlEQVR42u1aS3IsKQzMlLnDHGLW7/4na3IWgPhXUY7naYfDq1ZQQoDQJyWa//z5VwAQBCETyIQSaSgj9vGRCUuDIcY4ECITwTLCMlKmV4F1lq+emZ1nJoK4/3TPc0IEQoCAwEkJ1Bft54gHW/1crOVXcHR28H4tlPua9PNLfGfikSX8sFOczFoEvb+ksZ+h+e9jACUlFa0SAtvQdCTnb8ZnATCxEADANXNnCZWHV2tt7EdlFjeK0pzavs1VCoJJKdUejxwvQbKql+CU0QhLinPigS9r8UlDJJl5eG0/Q/wh01o0y6DLiEBLI0YwC2Q5jpKkJCc223DJwxLK6hWz9VYTNSItYgaDGZCI/IkkyBvCrI6g+9RfUwUeXACP7KdawNRP4EOpuZ21HBW13FrClifkneaIJJTbmZjLfpqR2WGVpwswtu6QDKBIZrnTFaZdxgRhe9KlnLoNzLmyI5T3LGdWewpBSc/+Kf0K5jF8MVIibe9NvLgmVve80PMtcbFE1aGegYHk3d3IidXtefo0UV1vmUEWI3onnq+eq2wlQcjhyysO7A/Ybd5deCY2SrAcrILHqDLia30TFOdxzDCdS2/Zj1QCkZK/a0yI/wfBkaixju7vuszCX6efDbF2z8ee+yxKeBqFYoYHaCFWl6C/huhiZjrOm/wrVOwn9iOhwYc7BDuEnbaFcuGMARlDBngKcM0X4KqSv5Sttsqp9QUB+axi6uxGMKGvBqGVWMeEgUOBzb1lDjmXbSDi8nJ3OVdtuZRTf+gxv0fsCv5XcvoRvqvKDiW2eLSphEVlLB0zIEdMVxnKuSzGCDkobc+1A+1PU//Oeg9R7qPYchQG3cZgHLa6lixtU0k/fVJCOIiiJ/H5SM9rBDJLVnfvKfQKAb4oAIgIXuLx4Oy1ZuxaDexaBGSu9RwbM7uwz1I7K+0nX1Pt/FfV3Xe/G3/fWl1A1zk5SfRzNpd2FdnGfvwu5pH9VV74zhHGngzyeX6/89ymEOOi2H/eBb2YNatlzxNOmO9aOp3xz2q54emBIgRQb++G3VQuj+3wKjvcpIk00tYXvOhdvAtIf5tGtH67+r/EL/FL/LD302eV1Gnpse78X2bqz0nOaLKPzwQ/qZ+LV7PAbtH1e9xUIc48F3Kav9A4YZbgrhWsPnUvw/CwAgRa+VuLlULjI/8DB6ayVpy0MbaqzApwte5Bls3L7AWBrI7FJ5fsLZRcKeYOMLGeNUPrpnJ5gLo1nqsQsIkH46Vwj/CNdsCzl7PG87vHl33FgfHd/FnlovFti13Fer3632qZfrbnuZVzstaj/TQex3F6/c9b0WHcrEUEFRurhM+KGAS+oi8xEq9K7JlfcclMhPhKZZK36dol4rSNPOv1cgIglfZMAkEx9VqDopVuWI7YiuWkk+SLReNrPrvbarmvOPV7/b7Kp8ojDApH7nU6j/9nYORxTyHC3FJmJax5IO7MBhr/GPnkby1fR/wHO6f/eXKHQhsAAAAASUVORK5CYII=); background-color: #11241f; }
#edgeR { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAASwCAYAAADR+5tJAAADzUlEQVR42u1aSRbbIAz9X+UOPUTXvf/FatQFiEnYwYkztC9Z/ScLLCShyeHP378UAIIi/QKFAACBUVR1AGTiCTAghdmvKjtzf+dCSSyVx4MDnlP71FUsIK8PgJ20HNkx6wieJ3MA0Sv88F3+gGamU3rm7ruqfooFq8ZuS7hmlGv2+YIPBNUh/0Err8g8iXUrJ+1updIobCJAevTJZxeLCUlU1bVX3LXqU/zHpchzZ78BVHXQz/r9+iGAfoiiNOtHH95n8JaL/JkkpFdUR/GF0NzuaO0eSEINkEAQkYFCEiDGt4NZsO6kgyeoK6g4kSdRuCuz6rTAE5GGooBYjbRzc+F9nrz+ou3ZfX7jrrqV2pZh6e0i+YA0W+SILcio2YfmUWC2KRv9kK3dzTcGT2ArD4tgLlyYTftTsPoYJ5RAFD9M4qeCk6v7aBI1wF0Q7Iav6of7UTS46Hcf5QowiRIrq9DcnYAKmnhI60HYGXeh1H+0b5r3FzvxMLmEAZ+FK495+Kkcp0AKj5WiENeIvbwq4HEuOOWr4grgAyCQRuFKIKik8BEgAogiROarp4uFIg+OTP9o9AT6A9LnwddUF8Ul7O6EHIxrRy8oj3KKrPnCZ4edtL5Qj82TS4gxDsCl2ls1Cbs06inLOU41aYwkguTclVJSyk0nLuzVUTQs2OKqOH+g+eAi28rg5ckd0GreuVMb5/qLqrExLHf1IV8TAfr4o1qUecZF90XVhR6kW169hdKUT7y/EvYx4b3zjf07eOue5vhs98sAwOQtvr94JbhIz49WIKoRmvplyxfoGmc9cwofunFmnkA7jn7GGIETj0rdlgIBeihh7aAfy1/dPnsp+yDOH0UbvWOVr+dT1Gp7NOVbx4Z1DKUTU74WaJ5H4Rkd4n84qH+zGDcK8leC2pun/oK1o19t2/9r/XzBF3zBFzyr95xVOzZNbaJxAVL7i4EHw18X7uyF6z68PZEmdfdTHeHA9CtMotgq8Ty4DUQHALqOvjJj9+3GM6OoW45eUe27/Ll0QZ5dnmafBT17W6D8r0kMuPGsrbJHB39vOAR1qDLMV2c8HaWdcPp9avHm2pOj2df8XDfkqdOehf79vn9HXMbzhPmYulCQm3QyTzyGCk0R1AyXW/zJZ1wpUUvLP7jqqvypN8a88xbzzoUSC4/1O9E+EG8xtZMhbjFR/hjYYkyPNqPUV2zju7bY8ahtWJa3q2JZvskA8ly8A/EQdMKXnYezAwG2YQJN7zmaQKtW6zxB6zfNfOPqhjoaBR1zmUv0CagC2fMf7YFOktRbwF8HN3heDLtG7AAAAABJRU5ErkJggg==); background-color: #11241f; }
#edgeT { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABzoAAAACCAYAAAAgqdprAAABwElEQVR42u1aQW7DMAwj3X1hn9h9//+ZuUPiJumwLSkNqMLEU5E0lhxLNGWF758fwkm01kASkZDOuUsQNxACIGzPiMsY0v4qcJiVHsd6uEY89x445rD41Fq77ouW+9r9MXJNNGMEZxB+e2PXHree1339Clnh5Q7D428llKT546b/hAEmcJ9C49eh/yV0FGa/UCjE5S9BdwsM9X8Ce1rzj/a/UMisn9PPnjTq71E/RtUfZv3AwZ+G/nfo8wXsezngr//MKqaQj3t/5x/9EOaaEwJT4j8yBukef6TX/4XsGkqJ7dfZkfPW+8Kg0KpD28pnDOaEvvMNANrOtyi8XWnS9N7DG50Luf/tcyMB3jYxvG2th+aUnkvPbTw+E6Q6zGXvC0/4pN2PsR5i2GL4KcUZae8Y9ypNFlunP6xwuMhrdHvxJyh3/uAV+MMslYLzn3ank3H2C4VCWP5y1TBZ/Z+ydQTzZ6GQVjsb+XP/yPcffygqWwEH1w906wfktm/WT/76+7VD6ffsHKKL8c0DB0fGPxuD9R9zy7fSn6k3/9GPCOHvaPuosyOLu9TRtXD4+GCDo3nMFloTsPc7NQ2NE9nq/AKR+eF4wpHuqwAAAABJRU5ErkJggg==); background-color: #153529; }
#edgeB { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABzoAAAACCAYAAAAgqdprAAAAd0lEQVR42u3ZMQ7CQAwEwPU1oHT8Ifz/ZfkBwhTomjRIICSIZjq7uOK8lV2X69rh6yqdkaTTuVUyenz0XvdzbFXlcwEAAAAAOJy5/5778Hf78PNZP50zliVj29Kp3JP07vwz632/Xub92HekIT4AAAAAAADAv3kAqNIbXRHLosYAAAAASUVORK5CYII=); background-color: #112521; }
html.flash-stage, html.flash-stage body { background: #12271f; }