:root{
  --bg: #f7f5f2;
  --panel: rgba(255,255,255,0.6);
  --accent: #ff7a50;
  --accent-dark: #6b2f1f;
}

html,body{
  height:100%;
  margin:0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background:var(--bg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  color:#222;
}

#app{
  height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:14px;
  box-sizing:border-box;
}

#canvas{
  width:min(86vmin,420px);
  height: min(86vmin,420px);
  background:linear-gradient(180deg,rgba(255,255,255,0.6),rgba(250,246,240,0.9));
  border-radius:18px;
  box-shadow: 0 8px 20px rgba(15,15,15,0.08);
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
  touch-action:none;
}

#oct-svg{
  width:78%;
  height:78%;
  display:block;
  user-select:none;
  -webkit-user-select:none;
  pointer-events:none;
}

#elmo{
  position:absolute;
  width:34%;
  height:auto;
  transition:transform 240ms ease, opacity 200ms;
  transform-origin:center center;
  opacity:1;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) scale(1);
  border-radius:50%;
  pointer-events:none;
  will-change:transform,opacity;
}

#controls{
  width:100%;
  display:flex;
  gap:10px;
  justify-content:center;
}

#controls button{
  min-width:44px;
  min-height:44px;
  border:0;
  border-radius:10px;
  padding:8px 12px;
  background:var(--panel);
  box-shadow:0 4px 10px rgba(0,0,0,0.06);
  color:#111;
  font-weight:600;
  font-size:14px;
  -webkit-tap-highlight-color:transparent;
}

#controls button:active{ transform:translateY(1px) }

@media (orientation:landscape){
  #app{ flex-direction:row }
  #controls{ flex-direction:column; height:100%; justify-content:center }
}

/* small elmo icon in top-left of canvas */
#elmoIcon{
  position:absolute;
  top:10px;
  left:10px;
  width:44px;
  height:44px;
  border-radius:9px;
  box-shadow:0 6px 14px rgba(15,15,15,0.12);
  background:rgba(255,255,255,0.75);
  padding:4px;
  object-fit:contain;
  -webkit-user-drag:none;
  user-select:none;
  pointer-events:auto;
  touch-action:manipulation;
  transition:transform 180ms ease, opacity 160ms;
}

/* gentle press effect */
#elmoIcon:active{ transform:translateY(1px) scale(0.98) }